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.
Related
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;
}
I can write in scss this:
:root {
margin: 0px;
}
but looks I get compiler error when I write in sass same thing:
:root
margin: 0px
I just get compiler error: "Error: Invalid CSS after "r": expected 1 selector or at-rule, was "root: {"
You can try preprending inverted slash \:root or twice dots ::root
I have two separate SASS files among many, on a ReactJS repository, such as _main.sass and _partials.sass. They are combined using #use on a separate file named index.css.
The SASS package as a dependency is just sass via npm.
_main.sass and all of its variables can be accessed by _partials.sass, thanks to #use "./main" as *.
I have the following code on _main.sass which detects OS preference for dark mode:
#media (prefers-color-scheme: light)
body
background-color: $white
color: $black
#media (prefers-color-scheme: dark)
body
background-color: $dark
color: $light
All of these color variables are defined and they're working well.
But the problem is that I need to use complement() function on the background-color which is currently active, in _partials.sass.
The main issue seems to me that when I assign a variable e.g. $accent on both ends of the media queries, the variable does not get picked up by the remote file. I could not wrap my head around to do it in such way, since I'm only a beginner at coding SASS.
Unfortunately, I need the plain CSS #media query implementations for automatically detecting the preference. But any suggestion is appreciated in case it is impossible to keep it like that and achieve what I wanted.
Thank you!
I've found the solution myself.
So, I was trying to make a light/dark theme compliant SASS implementation.
What complement function does is that it rotates the color in the input for 180deg on the RGB hue. I needed this to get corresponding inverted-like colors for each color, for better dark-mode contrast. The difference between invert and complement are listed here.
But, I realized that I did not need that. Here is the code for my theme implementation using SASS.
// rainbow
$blue: #00a4ef
$yellow: #f4b400
$red: #db4437
$green: #61b500
$purple: #6e14ef
$pink: #ff0090
$carmine: #c6004b
// monochroma
$white: #fff
$light: #f5f5f5
$lgray: #c2c2c2
$dgray: #6e6e6e
$ldark: #363636
$dark: #232323
$black: #000
$themes: (light: (logo: url("../static/logo-light.svg"), bg: $white, card-bg: $light, text: $black, link: $red, hover: $pink, active: $carmine, border: $lgray, button: $yellow), dark: (logo: url("../static/logo-dark.svg"), bg: $dark, card-bg: $ldark, text: $light, link: $red, hover: $pink, active: $carmine, border: $dgray, button: $purple))
#mixin themeProperty($theme, $property, $color, $additionalProperties)
#if $additionalProperties
#{$property}: unquote(map-get($theme, $color) + " " + $additionalProperties)
#else
#{$property}: unquote(map-get($theme, $color))
#mixin theme($property, $color, $additionalProperties: "")
$light: map-get($themes, light)
$dark: map-get($themes, dark)
#media (prefers-color-scheme: light)
#include themeProperty($light, $property, $color, $additionalProperties)
#media (prefers-color-scheme: dark)
#include themeProperty($dark, $property, $color, $additionalProperties)
There is a color map named "themes" which lists each color for light and dark themes for different use cases.
Furthermore, the mixins match the exact color for exact usage for the desired theme mode, whichever is being used by the client-side (browser or OS), thanks to #media queries.
For example, if you'd like to color a background-color using the button preset on the theme mapping, the usage is as follows:
#include theme("background-color", button)
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;
}
}
This question already has answers here:
Adding a unit to a number in Sass
(2 answers)
Closed 7 years ago.
I am quiet new to Sass... I want to create some css with percentage values like:
width : 13%;
The value is the result of a sass number operation. Writing this
width : $main-width + "%"
scss code generates this:
width : "13%";
css, what is actually not working because it should be:
width : 13%;
writing
width : $main-width %;
results in
width : 13 "%"
what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?
Think of units in Sass like variables in algebra instead of just concatenating strings.
In algebra:
2x * 3 = 6x
In Sass:
13 * 1% = 13%
Use this approach to do more advanced math.
10px * 3px = 30px*px
But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px
30px*px / 1px = 30px
Hope this helps beyond your original question.
unquote("%") does the trick.
You could try #.
I had a similar problem with a mixin and lists
#mixin p($value, $position: a, $unit: $rhythm-unit){
$vallist: ();
#if length($value) > 1 {
#each $sval in $value {
$sval: 0 !default;
$vallist: append($vallist, #{$sval}#{$unit});
}
padding: $vallist;
} #else{
#if $position == t {
padding-top: $value+$unit;
} #else if $position == r {
padding-right: $value+$unit;
} #else if $position == b {
padding-bottom: $value+$unit;
} #else if $position == l {
padding-left: $value+$unit;
} #else {
padding: $value+$unit;
}
}
}
The problem was
append($vallist, $sval+$unit);
It always added quotes around these values e.g. "1rem" "1.25rem" which is not a correct css syntax.
I replaced it with:
append($vallist, #{$sval}#{$unit});
As you can see i use #-sign with {} and + it not necessary any more.
The very interesting here is that this only appear with lists/append as you can see in my outer else.
You could find it at the sass reference page Division and slash
If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
Hope it helps