When you assign a scss variable to an existing css variable like this
--color: #FFF;
$color: var(--color);
This will result in $color holding the var(--color) as a value. Is there a trick so it would hold the actual CSS value? So $color would save the #FFF?
You can define variable like this
$color: #FFF;
and use it like this for example
p {
color: $color;
}
Related
I'm trying to extract values from an SCSS variable that contains 1+ values. For testing purposes, let's say I want to get the 2nd value of the argument passed in, and if it only contains 1 value, then return that. e.g.
#function get-second-value($args) {
// Obviously this syntax isn't correct, but something like this
#return $args.split(' ')[1] || $args;
}
$var1: 1px;
$var2: 1px 2px;
$var3: 1px 2px 3px;
#debug get-second-value($var1); // returns 1px
#debug get-second-value($var2); // returns 2px
#debug get-second-value($var3); // returns 2px
I've tried searching all over, but my search terms must be inadequate, so apologies if this is a dupe. How can I accomplish the above?
I think I figured it out... I didn't realize that the variable I was defining was actually a list, so I can do normal list operations on it. My function then becomes:
#function get-second-value($args) {
$return: nth($args, 1);
#if (length($args) > 1) {
$return: nth($args, 2);
}
#return $return;
}
In Sass is it possible to put a variable argument and a variable with a default value all wrapped inside one mixin?
Here is what I've been trying
#mixin p($size: 20px, $font-fam...){
font-family: $font-fam;
font-size: $size;
}
I know that a default value normally should be put on the end but in this case $font-fam would think it was a part of its own variable.
Is this possible or will I just need to separate out the mixin for it to work?
Thanks!
I don't think variable arguments can have a default value, but you can check if the variable exists, and if not then set its value:
#mixin p($size: 20px, $font-fam...){
#if length($font-fam) == 0 {
$font-fam: "Helvetica", sans-serif;
}
font-family: $font-fam;
font-size: $size;
}
I have a SCSS mixin with the below definition for linear-gradient.
#mixin custom-background(
$color: $color,
$progress: 0
) {
background: linear-gradient(to right, $color #{$progress}%, #9EC9DB 0);
border: #10516C solid #9EC9DB;
}
But on compiling with gulp-sass it breaks with below error:
Error: Invalid CSS after "... #{$progress} %": expected expression (e.g. 1px, bold), was ", $progress-"
on line 15 of file.scss
nt(to right, $color #{$progress} %, #9EC9DB 0);
------------------------------------------^
messageOriginal: Invalid CSS after "... #{$progress} %": expected expression (e.g. 1px, bold), was ", $color"
Interpolation is for different purposes, like creating a selector from a string variable. Not to convert values. To convert a number to percentages, simply multiply it by 100%.
#mixin custom-background(
$color: $color,
$progress: 0
) {
background: linear-gradient(to right, $color $progress * 100%, #9EC9DB 0);
border: #10516C solid #9EC9DB;
}
It is possible, that you want to use 1% or 10000% instead (I don't know $progress input range).
Also: what the hell is $color: $color? According to SASS scope rules, it doesn't make any sense.
I have a map declared like below
Map Definition
$color-array:(
black:#4e4e4e,
blue:#0099cc,
dark-blue:#14394e,
green:#2ebc78,
white:#ffffff,
orange:#ed6a0e
);
and calling the same in for each loop to generate class for text color and background color like below
#each $color-name, $color-value in $color-array{
.#{$color-name}{
color: $color-value !important;
}
.bg-#{$color-name}{
background: $color-value !important;
}
}
I am using gruntjs for for compilation, when i set output style to compressed it gives below error
You probably don't mean to use the color value #000' in interpolation
here. It may end up represented as #000000, which will likely produce
invalid CSS. Always quote color names when using them as strings (for
example, "#000"). If you really want to use the color value here, use
"" + $color-name'.
Error: Invalid CSS after ".": expected class name, was "#000"
on line 25 of SCSS/_base.scss
from line 5 of scss/style.scss
But when i set output style to expanded it runs fine.
In your colors array, change all the key double-quoted string keys and things should work.
$color-array:(
"black":#4e4e4e,
"blue":#0099cc,
"dark-blue":#14394e,
"green":#2ebc78,
"white":#ffffff,
"orange":#ed6a0e
);
An alternative of changing the SCSS code would be to make sure the variable is a string like the error message mentioned
#each $color-name, $color-value in $color-array{
.#{"" + $color-name}{
color: $color-value !important;
}
.bg-#{"" + $color-name}{
background: $color-value !important;
}
}
I can't get a mixin to accept a block:
=my-mixin($some-var)
width: $some-var
#content // Is this correct?
+my-mixin(123px)
height: 100px
This results in a "mixin doesn't accept a content block" error. I'm using the current version of Sass. Thanks for help.
syntax is ok with version 3.2 of SASS, double check that
For me the problem was with SASS indentation.
You can't nest another block within a mixin like this:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
instead:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
hover state must not be nested
I was getting this error too. Turned out that somewhere else in my scss I was using #mixin mobile-only instead of #include mobile-only - aka, I was accidentally redefining the mixin later in the code.