So, the super-helpful 'gallery' mixin in susy2 uses the nth-child selector, which doesn't work in IE8. So what's a good workaround?
I was thinking of extending the gallery mixin and adding ie8-specific styles. Is that possible with susy?
Here's my sass code, if it helps:
.grid_gallery li.slide {
#include gallery(12 of 24); //2 across
margin-bottom: gutter(24);
#include breakpoint(600px) {
#include gallery(6 of 24); //4 across
}
#include breakpoint(769px) {
#include gallery(4.8 of 24); //5 across
}
#include breakpoint(1200px) {
#include gallery(4 of 24); //6 across
}
}
Here's a Gist to see this SASS (simplified) converted to css: http://sassmeister.com/gist/59927698cfbba6fadbf5
Here's the look I'm going for:
Sure. You need output that doesn't use nth-child selectors — which will require some extra classes in your markup. I'd start by copy-pasting the full gallery mixin from Susy, and then only change the mixin name (so it doesn't conflict), and replace any mention of nth-child with your class naming convention (lines 62-63). If you can design class names that matches Susy's existing nth-child pattern, you shouldn't need to change the mixin much.
It might even be possible for us to add this option to the existing mixin. Feel free to file an issue on GitHub, and we'll take a look at it.
UPDATE: Looking closer, there are some simpler options, depending exactly what you need. If you change your gallery declarations to simple spans, you only need to add .last classes/mixins to the last items in each row. And if you change your gutters to inside, inside-static or split you don't even need to do that. Simple spans will stack up correctly on their own.
.item {
#include span(12 of 24 inside); // 2 across
#include breakpoint(600px) {
#include span(6 of 24 inside); // 4 across
}
// etc...
}
ok, I wanted to write styles for IE8 specifically within the gallery mixin to switch to ‘inside’ gutters, but I just couldn’t figure out how to do it.
Instead I just added the following to my IE stylesheet:
.ie8 .grid_gallery li.slide {
#include span(4 of 24 inside); // ie8 needs to switch to an 'inside' gutter system. It doesn't handle nth-child css
}
So this span mixin adds to some of the gallery mixin styles called earlier. Basically, changing it to an inside gutter setup in IE8 only.
And I’ve switched to only using gallery mixin when I really need to, like when there are an unknown number of items generated by the cms, or when setting a last element per row isn’t possible in the html.
Related
I'm pretty new to using sass and I'm having some trouble using a mixin for Material.io's icon buttons.
The page I linked describes using the density($density-scale) mixin, but I can't seem to figure out how to use it. The Getting Started guide shows an example of how to use a mixin for an mdc-button, so I tried doing the same thing for an mdc-icon-button. Here are some things I tried.
#use "#material/icon-button/mdc-icon-button";
#use "#material/icon-button";
// ^ The line above results in this error: SassError: Can't find stylesheet to import.
For the actual element, since this import didn't work, I tried the following.
.mdc-icon-button {
#include icon-button.density(-1);
// ^ SassError: There is no module with the namespace "icon-button".
#include mdc-icon-button.density(-1);
#include mdc-icon-button-density(-1);
#include density(-1);
// ^ All of these lines cause the following error: SassError: Undefined mixin.
}
I'm just not sure what to do at this point. How can I use the density mixin for this component?
This actually turns out to be a bug with sass-loader. You can check here for a temporary workaround while something else is worked out. Using the workaround causes imports to not fail anymore, and the documentation is still accurate for the components.
When I first started using Bootstrap I would generally lay out my grid inline using the classes. For whatever reason, in my mind, it was easier to read etc.
Now, I have started using the sass mixins more. For example:
body.archive #secondary {
#include make-col-ready();
#include make-col(12);
#include media-breakpoint-up(lg) {
#include make-col(4);
}
}
In regards to performance, is there a reason to use one way over the other?
It's more a question about customization rather than performance.
If you need to customize bootstrap's grid then using SASS mixins would help customize it to your needs, but if you don't need that then it would be best to use the already predefined grid classes that get inlined.
I am working on a Symfony 4 application and using Symfony's Webpack wrapper Encore.
The application will be used to run multiple sites on one db, each one with a different theme. The themes will be versions of bootstrap 4 that have their primary variables set to a certain colour. i.e theme1 red, theme2 blue.
What is the optimum way to achieve this?
I have though about multiple CSS output files, i.e theme1.css, theme2.css and dynamically referencing these from the HTML.
I am also wondering if Encore/Webpack has the option to pass in a variable to an SCSS file i.e:
.addStyleEntry('theme1', './scss/main.scss, red) // THIS WOULD OUTPUT theme1.css (RED)
.addStyleEntry('theme2', './scss/main.scss, blue) // THIS WOULD OUTPUT theme1.css (BLUE)
The main.scss uses various mixins to overide the primary colours in Bootstrap, but I was wondering if a variable could be passed into main.scss.
Create a SCSS for each theme. This way more changes can be added and maintained easily.
// scss/theme1.scss
$primary-color: red;
#import 'main';
and
// scss/theme2.scss
$primary-color: blue;
#import 'main';
Pack them with
.addStyleEntry(theme1, './scss/theme1.scss')
.addStyleEntry(theme2, './scss/theme2.scss')
and you are done.
Though there is a way to set SCSS variables with Webpack/Encore by prefixing all sass-entries with a string, I would not recommend this approach:
.enableSassLoader((config) => { config.data = '$primary-color: green;' })
All entries will have the same prefix $primary-color: green; and you are polluting with styling information that should be placed in style-sheets when possible.
I'm pretty much new to Bootstrap 4 and Sass\SCSS,I wanted to use the new grid and style the rest of my website on my own using SCSS, so I downloaded bootstrap source, compiled bootstrap-grid.scss (which is only the grid plus some variables and mixins), now the question that pops in my mind is : How do I use bootstrap's media queries screen sizes with my own style? Is there a particular mixin/way to call the breakpoints? Or since I'm using the grid only I have to configure media queries myself?
My idea was that there probably would be a mixin that allows me to do for example :
.my_class {
color: red;
+mobile {
color: blue;
}
}
Does bootstrap have something like this? I have to do it on my own? How do you proceed when working with the grid only?
Yep. There's many Sass options in Bootstrap 4. You can read about them in the docs.
Foreword: New to Sass, better with Less but not great either.
I'm using chartist to plot a line plot and a pie chart in two seperate views. Chartist provides a _chartist-settings.scss file which contains a bunch of global constants definitions. The documentations says to alter these in order to customize the look of the chart. However, I'd like each chart to have its own styling, but I'm not sure the way I'm doing it right now in the SCSS is correct.
Let's use the example of the chart's label font-size. in the file, this is set using the $ct-text-size variable.
Ideally, I would define values for these constants which would change according to the scope of the chart. So the chart under <div class="line"> I can have $ct-text-size: 2rem and under <div class="pie"> have $ct-text-size: 1rem. However, I can't figure out how to do this. Is there a way to do this?
Instead, to make it work, I've looked at the class these constants end up getting used in (in this case .ct-label) and changed them directly according to scope (See below). This however, seems to go against the abstraction that _chartist-settings.scss provides, since it couples it with the internal SCSS workings of the module.
.line{
.ct-label { //this class uses the $ct-text-size variable
font-size: 1rem; // but I just change the class directly
}
}
.pie{
.ct-label {
font-size: 2rem;
}
}