I'm using the Susy SASS-library. I'm compiling one main SASS-file that #imports various partial SASS-files. Inside the partials I use Susy-mixins. Do I need to #import "Susy" for every single partial SASS-file? What's the smart way to do this?
You can just have a single #import "Susy" before you import all of your other partials. As long as your main file imports Susy first, your partials will be able access it.
#import "Susy";
#import "partials/header";
#import "partials/footer";
Related
In a next.js project, I have a sass file called main.scss.
Here I'm importing another sass file with:
#import "style-1.scss";
But now I'm facing a situation where instead of style-1.scsss, I need to import another sass file called style-2.scss.
Basically I'm trying to find a way to import style-1.scss or style-2.scss conditionally based on a class in body or maybe based on existence of a prop.
Something like this:
if (body has class amp)
#import "style-2.scss";
esle
#import "style-1.scss";
Alternatively (although I don't think that I can use porps in a sass file)
if (prop two is true)
#import "style-2.scss";
esle
#import "style-1.scss";
The main idea is that only one of the two sass files should output any css and the other one shouldn't.
But I still couldn't find a working solution. Any help would be appreciated.
I'm probably missing something obvious here - I'm trying to compile my Bootstrap using SCSS, so I can just select the files I need. Everything working great until I get to the margin and padding classes (e.g. mt-0). I thought these were part of the utilities.scss but apparently not, and I can't seem to track them down. Am I missing an obvious include here?
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/utilities";
// Optional
#import "../../node_modules/bootstrap/scss/root";
#import "../../node_modules/bootstrap/scss/reboot";
#import "../../node_modules/bootstrap/scss/type";
#import "../../node_modules/bootstrap/scss/images";
#import "../../node_modules/bootstrap/scss/containers";
#import "../../node_modules/bootstrap/scss/grid";
The mapping for the margin and padding classes (e.g. mt-0) is in the _utilities.scss [1] file however it generates the classes using the utilities/_api.scss [2] so you'll need below the utilities import:
#import "../../node_modules/bootstrap/scss/utilities/api";
References
[1] Utilities file (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)
[2] Utilities API file (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)
I just recently had the same issue. Every class worked except classes for margin/padding.
Now (From bootstrap V5.0) left is replaced by start and right is replaced by end.
So change mr-3 to me-3
Here's why
I've set up my project to use Bootstrap and scss with Webpacker, however, whenever I start my server locally I get this error:
ActionView::Template::Error (Error: Undefined variable: "$secondary-accent".
on line 76:23 of app/assets/stylesheets/_hero.scss
>> border: solid 0.5px $secondary-accent;
This error actually goes away locally if I do a hard refresh, but of course, Capistrano is not as forgiving and I want to figure out the issue anyway.
In my /app/javascscript/ folder I have a src/style.scss file which imports the required stylesheets.
#import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
#import '~bootstrap/scss/bootstrap'; //import bootstrap
#import '../../assets/stylesheets/application.scss' //import everything else;
/assets/stylesheets/application.scss looks like:
#import '_navbar';
#import 'actiontext';
#import '_hero';
#import 'comments';
#import 'static_pages';
body {
font-family: $body-font;
font-size: $standard;
}
Of course, the easy way to get rid of this is to just add #import 'globals' to each of the partials but that does not seem to fit with the sass way. I don't really want to add #import 'globals' at the top of every single .scss file, not a big deal at the moment but as the project grows and the complexity of the styles increases maintainability could become a headache. I thought that Webpacker would take care of this, am I wrong? Am I missing something in the setup?
Ps. I realize this question has been asked dozens of times, but they all seem to be for older versions of Rails, or the solutions don't apply to me (such as removing the require tree from application.css
This was resolved by tightening my Webpacker set up a bit.
The biggest issue was installing scss I thought sass-rails in my gemfile was sufficient but I also needed yarn add scss. I didn't need to import the globals inside of src/style.scss just in application.scss.
I would like to know how can i extend default gap between columns in bulma, according official website is-8 gap equals 2em but i need 6em,can i override $column-gap value in my css file ?
This is a Sass variable, you can override it but not in a .css file, your need to setup Sass with node-sass or with Sass CLI or with webpack, you can also learn more about customisation with sass variables here.
All those links point to the official documentation and will help you with the setup. Then you will be able to overrride the value of the $column-gap and all other sass variables in a .scss file like this :
#charset "utf-8";
// Update all the variables you want :
$column-gap: 6em;
// And then import bulma
#import "../path/to/bulma";
// Or import only what you need from Bulma
#import "../path/to/bulma/sass/utilities/_all.sass";
#import "../path/to/bulma/sass/base/_all.sass";
#import "../path/to/bulma/sass/elements/container.sass";
#import "../path/to/bulma/sass/elements/title.sass";
#import "../path/to/bulma/sass/form/_all.sass";
#import "../path/to/bulma/sass/components/navbar.sass";
#import "../path/to/bulma/sass/layout/section.sass";
im new to sass and having some trouble with imports. These are my imports
#import "reset";
#import "variables";
#import "fonts";
#import "mixins";
#import "grid";
#import "foundations";
#import "forms";
and these are the name of my documents reset.scss, variables.scss, fonts.scss, mixins.scss, grid.scss, foundations.scss, forms.scss.
Any idea why they are not importing?
Thanks
The name of the documents inside the Main sass file must match the names of the files you are trying to import, otherwise it will not work.
Something that you may want to look into is SMACSS it will help you structure your document and avoid Nested craziness!
See "Partials" here: http://sass-lang.com/guide
I see you're using Foundation, so definitely also read this regarding partials for it: http://zurb.com/university/lessons/35