This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
Hi all I'm new to SASS (late I know) and playing around with mixins.
Basically is there a way to link a variable to a string here is what I'm trying to do but it throws errors.
(This is a condensed version)
#mixin post-link ($class, $color, $hover) {
a.$class:link {
color: $color;
}
a.$class:hover {
color: $hover;
}
}
Link I say this is a little simpler than what I am trying to do in the mixin (more variables in full one).
EDIT: should add i'm using Compass.
Thanks
Yes, you just have to use variable interpolation. Example:
#mixin post-link ($class, $color, $hover) {
a.#{$class}:link {
color: $color;
}
a.#{$class}:hover {
color: $hover;
}
}
Example on SassMeister: http://sassmeister.com/gist/9533103
The key is adding #{ and } around your variable names to get them expanded.
Related
Consider the following SCSS:
$color-black: #000000;
body {
--color: $color-black;
}
When it is compiled with node-sass version 4.7.2, it produces following CSS:
body {
--color: #000000;
}
When I compile the same SCSS with version 4.8.3 or higher, it produces following:
body {
--color: $color-black;
}
What am I missing? I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?
Also, what is my alternative? Should I use Interpolation?
Just use string interpolation:
$color-black: #000000;
body {
--color: #{$color-black};
}
Apparently the old behaviour is not intended and violated the language specs of SASS:
CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
CSS variables aren't properly compiled
Assigning SASS variables to CSS Variables (Custom Properties) no longer works
scss and css
I found a workaround to mapping the scss variables to css variables.
See Terry's answer for better use
Scss:
// sass variable map
$colors: (
color-black: #FFBB00
);
// loop over each name, color
:root {
// each item in color map
#each $name, $color in $colors {
--#{$name}: #{$color};
}
}
Css:
:root {
--color-black: #FFBB00;
}
I had an issue with older sass versions.
Trying to compile a list of variables coming from an array, it would get stuck with the double dash. Here's my solution in case it helps someone
$var-element:'--';
:root {
#each $color in $color-variables {
#{$var-element}#{nth($color, 1)}: #{nth($color, 2)};
}
}
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin
#mixin pseudoawesome($fa-symbol, $pseudo) {
&$pseudo { // <-- here is the error
content: $fa-symbol;
font-family: FontAwesome;
}
}
and I want to use it like:
#include pseudoawesome(' \f105', ':after');
but I cannot pass :after as argument for $pseudo. Is this somehow possible, or doesn't allow SASS using variables as selector at all?
Thanks
Yes, you can. You must write the name of variable inside the braces:
#{$yourVariable}
#mixin pseudoawesome($fa-symbol, $pseudo) {
&#{$pseudo} {
content: $fa-symbol;
font-family: FontAwesome;
}
}
EDIT: you can find this information here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_
Just search with chrome: "If you want to use"
The section didn't have the anchor tags.
This question already has an answer here:
Sass store selector in variable
(1 answer)
Closed 7 years ago.
I'm trying to use multiple class inside a variable using the Interpolation method.
This method work for me if I have one class and I use it like this:
$class: classname1;
.#{class} {
color: red;
}
But if I want to use more the one class I have a problem:
$class: classname1.classname2;
.#{class} {
color: red;
}
This snippet give me an error because of the dot inside the variable. I tried some other options but nothing worked.
Any idea how to solve this issue? Thanks!
Use a string as a variable
$class: ".classname1.classname2";
#{$class} {
color: red;
}
(tested on sassmeister)
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
I have a map in Sass with keys and values
$colors: (blue: #0081d2, green: #288600, orange: #e57323);
#each $color, $value in $colors {
.#{$color} {
color: $value;
}
}
This works and gives me css classnames with the appropriate values, like:
.blue{
color: #0082d1;
}
What is would like to have is a function that produces sass variables based on the keys in the map.
$blue: #0082d1;
$green: #288600;
I have been breaking my head but can't get it to work.
You could create a function to return the value by the key specified.
Example
$colors: (blue: #0081d2, green: #288600, orange: #e57323);
#function color($color) {
#return map-get($colors, $color);
}
.bacon {
color: color(blue);
}
Results in
.bacon {
color: #0081d2;
}
The whole point of a map is to have data structured in a more hierarchical way and not just as a bunch of variables. If you don't want this, define variables instead of a map in the first place.
But I'm guessing what you really want is a way to access map values. Try this:
map-get($colors, blue)
This question already has answers here:
Dynamic Sass Variables
(3 answers)
Closed 8 years ago.
I'd like to do something like that in SASS:
$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;
$currentColor:null;
body.page-about { $currentColor: $BLUEISH; }
body.page-browse { $currentColor: $GREEN; }
body.page-signup { $currentColor: $HEADER_PURPLE; }
body.page-login { $currentColor: $HEADER_PURPLE; }
body.page-contribute { $currentColor: $RED; }
I've no error, it's compiled with success. But when I check my page, the value of $currentColor is $RED even if I'm not in body.page-contribute.
So, I don't know if SASS doesn't handle it or if I made a big mistake.
Thanks.
You are declaring a Sass variable with a global scope, so each line is modifying the global var, like in JavaScript.
You can use #debug $currentColor; between you lines to see variable state.
You should probably use a mixin to prevent scope issue, or declare another variable with a local scope each time (try to just delete $currentColor:null;)
Remove the line $currentColor:null; - there is no need to instantiate variables in SASS outside their required scope.
$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;
body.page-about { $currentColor: $BLUEISH; }
body.page-browse { $currentColor: $GREEN; }
body.page-signup { $currentColor: $HEADER_PURPLE; }
body.page-login { $currentColor: $HEADER_PURPLE; }
body.page-contribute { $currentColor: $RED; }