I have a Sass file which does multiple imports as follows
#import("variables")
#import("custom-variables")
#import("widgets")
#import("custom-styles")
I declare a variable called $promoBoxColor for example in both variables and custom-variables, and then the widgets and custom styles references this variable.
What I am finding is that the color defined in variables is being used if I try and use it in custom-styles, not the colour defined in custom-variables.
Is it possible to override variables in this way in Sass? It seems to work fine if I just override a color used in widgets.
Thanks for the replies. Found the best way of doing this was to set all the variables in the core variables file with !default and then declare the custom-variables first.
Related
First of all, I hope someone can actually understand this rambling question because I'm struggling to even word what I mean in a coherent way, but here goes:
I don't know why I'm struggling so much to figure this out, but I've been using #import with SCSS for a while now and feel I have my head around it fairly well, but now I want to use the #use rule since the phasing out of #import is a thing. And I can't find any videos or any real articles explaining how to use it properly.
The problem I'm having is I can't get my head around how to actually use it, I feel like I get the basic idea, and how to use the modules in each partial (I think..), but I feel like I don't understand how to actually get all of the partials into a main .scss file to be compiled into css.. This is hard to explain.. I just feel like I would still need to #import at least the files that have #use inside them into a main file for it to be compiled.. I'm guessing this obviously isn't the case, but otherwise I can't work it out.. Do I just #use all the files I want imported into the main file or..?
If anyone could shed some light on this for me, I would be really grateful.
Thanks
The new rules #use/#forward and the remove from #import are indeed a really big impact to SASS. It leads to a complete new form to write sass. A try to make an easy explanation for the beginning to use the new technique:
(1) #use works similar to #import. It adds the code from a (config- or partial-)file or a module to your stylesheet.
(2) The difference is: SASS changes the scope of variables/mixins/functions from global (all imported files = one scope) to local files (variables are only valid in the actual file). If you need to use variables/mixins/functions from another (config- or partial-)file you need to 'include' them to the actual file first.
That means for your project(*):
//file ###> _config.scss
$columnWidth: 50%;
$projectColors: (
primary: red,
secondary: blue,
);
//file ###> _functions.scss
#use 'config' as * // --> to use config vars (here: without namespace)
#function getColor( $name ){
$color: map-get($projectColors, $name);
#return $color;
}
//file ###> _partial.scss
#use 'config' as * // --> use config vars (here: without namespace)
#use 'functions' as * // --> use functions (here: without namespace)
.class {
width: $width;
color: getColor( primary );
}
//file ###> myStylesheet.scss
// no need to #use 'config' or 'functions'
// as they are not direct needed in this file
#use 'partial' //--> write the css
---
( * ) Including files without using a namespace is a special case to make the example more easy. Normaly you will include variables/mixins/functions to a separated namespace and call them by namespace.$variable or namespace.mixin. And there are techniques to move special settings to a #used file as well so you can move variable settings to the project. Please have a look to official and excelent description: https://sass-lang.com/documentation/at-rules/use
NOTES:
(1) As it is heavily discussed: Yes. This is INDEED the intended new way to work with SASS. (https://github.com/sass/sass/issues/2750)
(2) Very interesting: The actual brandnew version from Bootstrap has moved to the new Sass Version. But as I have seen Bootstrap does not use that new feature #use and still works with #import. That may have reasons ... and it seems not to easy to change the technique.
(3) Also it seems to be a little bit complicated there are some advantages comming with that new technique. Using separate namespaces make it much mor easier to work with external modules without causing name conflicts.
I am trying to learn media query in css and I have few questions about some of the examples that I have come across. The queries are mentioned below:
I have seen a variable was declared in the following format in a .scss file which is used in a react component:
$screen-xs-max: ($screen-sm-min - 1);
Why is -1 used here?
The second question that I have is about this:
$large-screens-up: "(min-width: #{$screen-lg-min})";
I have 2 questions about these lines of code:
Why is the variable declared within the " ", doesn't that make the variable a string?
Why is # used here? I guess it is to find the variable $screen-lg-min in the path from where it is imported, but I am not sure if its correct. I just want to confirm if that's the correct thing or correct me if I am wrong.
Can anyone please help me with these doubts? I am sorry if this is too simple. I tried getting the answers myself, but couldn't find it.
In SCSS
Consider $screen-sm-min:546px; which will be declared in scss variables file in your project or the node modules folder.
$screen-xs-max: ($screen-sm-min - 1); means that the value of $screen-xs-max will be 1 less than $screen-sm-min that is 545px.
$large-screens-up: "(min-width: #{$screen-lg-min})";
Varible in scss can be used directly using $varible-name ,
But when you want to use the same variable inside a string in scss u will have to follow this
#{$variable-name} method
Why -1
Consider extra small devices width to be 0 to 545px(maxvalue).
Consider small devices width to be 546px(minvalue) to 768px(maxvalue)
Therefore the max width of the extra small devices will be
(min value of small devices) - 1
This method is used to avoid harcoded values in scss file,
For example if you decide to change the values of the width, you can change it in only one place and let the formulae handle the remaining calculation of the widths
Ideally, I'd like to set up one file "colors.styl" where I can define all the colors used across the site like so:
// --------------- GENERAL VARIABLE DEFINITIONS
$beige = #F2F2F2
$darkGrey = #282828
$errorRed = #B94A48
When I try accessing these variables in other files, I just get the variable name back instead of the resolved value:
body {
background-color: $beige;
I'm compiling the files in order so colors.styl goes before the rest. Do variables lose their scope across files in Stylus?
Instead of doing #import "colors" in every file, you can also make a main loader file, like this:
#import "colors"
#import "styles1"
#import "styles2"
Variables defined in colors.styl will then be available in styles1.styl and styles2.styl. Output from stylus will be one big css file containing all your styles.
Yes, variables lose their scope across files.
But you can #import color in the other files to access the variables.
I have tried both SimpLESS and Crunchapp both return the same error.
I am trying to compile this bootswatch http://bootswatch.com/cyborg/ and when I do I get the following error.
Compiler Errors
variable #grayLight is undefined (Line: 17)
Does anyone know what I am doing wrong?
You must define the variable in the same file where you using it:
#grayLight: #e7e7e7;
Or if it defined in another .less file you must import that to see the variable in another file:
#import "mixins.less";
You have to asign the variable value first, for example:
#grayLight: #ffffff;
It's exactly as error said, you use variable that is undefined.
Then you can call this variable at any place in code. If it happens you defined it earlier, check if names are equal (letterCase as well).
Is it possible to set a sass variable at compile time? I basically want to do this:
$color: red !default;
div#head {
background-color: $color;
}
When I compile to css I want to set $color to "blue" (preferably from the command line). Has anyone been able to do this?
Thanks,
Chris
I found this at their FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html
If you just want to pass some variables to the CSS every time it gets compiled, like using --watch, you can use Sass functions to define Ruby scripts to even query a database. But the code is going to be compiled only once, and served statically.
But if you need to recompile it at every request with different options,
you can use Sass::Engine to render the code, using the :custom option
to pass in data that can be accessed from your Sass functions
Seems like it's not recommended, though. Probably for performance reasons.
An alternate of command line options is to create other files assigning values to variables.
Assume that your code above is in a file named 'style.scss'.
To set $color to "blue", create a file such as:
$color: blue;
#import "style";
and name it to 'blue.scss' for example.
Then compile it with below.
sass blue.scss:style.css
When you want to assign another value to the variable, make another file named "green.scss" like:
$color: green;
#import "style";
Then compile it with
sass green.scss:anotherstyle.css
It is bothering somewhat but enables to decide values of variables at compile time.