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.
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.
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.
Is there a way to use sass/scss with Dojotoolkit ?
I've searched for any documentation, tutorial or references but couldn't find any.
It depends on what you really need to do.
Generally Dojo Themes like Claro are based on LESS CSS preprocessor, Dojo Flat instead use Stylus.
So if you need to modify or fork Dojo Themes you should stick to LESS or Stylus.
If instead you do not need to modify a Dojo Themes and just simply need add your CSS for anything else you could use with no problem SCSS/SASS.
I would suggest in that case to process your styles using a separate "tasks", example you could use gulp-sass or similar.
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.
_partial/_mixins.sass
page/generic.sass
#import "_partial/mixins"
page/specific.sass
#import "_partial/mixins"
I'm using SASS with Compass and I have a slight architecture problem right now as I put all my mixins into one file. Now each page have two linked SASS files (one generic) and (one specific to the page).
Both of these SASS files have an #import "_partials/mixins" which contains a collection of mixins. The problem is as you would expect I'm getting the entire mixins duplicated in both CSS files when I really only want to import that file only so I can use one or two mixins in it (just like I would expect when I import a library in any programming languages, compilation only uses what it needs from the library"
Is there a way when I perform the import on a file to specific exactly what gets loaded perhaps providing a mixin name?
In general, I think it is a bad idea to call mixins in partials you use in more than one place for the reasons you are having. It is much better to define the mixins in those partials, and call them only where you need them.
partials/_mixins.sass
=my-mixin
font-size: 2em
page/generic.sass
#import "_partial/mixins"
page/specific.sass
#import "_partial/mixins"
+mymixin