I'm developing a standard create-react-app-based webapp using WebStorm as an IDE. For this code:
$colors: ( 'primary': #000, 'error': #acda5a);
:export {
#each $key,
$value in $colors {
#{unquote($key)}: $value;
}
}
I'm getting the error Unknown pseudo selector 'export' -- any idea why?
Exporting sass variables with the webpack :export directive is not yet supported, please follow WEB-41662 for updates
Related
I've created a big sass stylesheet with all sorts of colors. Following vite's guide for sass, I got sass working in my components. Now I'd like to use these external variables in my Svelte components' stylesheets as well.
So far I've tried:
#use "./test.sass" // along with "./test"
p {
color: $testColor
}
As well as
#import url("./test.sass") // along with "./test"
// ... same as above
It gives me an error Error: Undefined variable. And my variable is defined properly in test.sass
#use wraps imported variables in a namespace, so instead of $testColor you have to explicitly state that these variables come from a module.
#use "./test.sass"
p {
color: test.$testColor
}
or
#use "./test.sass" as *
p {
color: $testColor
}
(Pretty green scss/bootstrap user here)
So, like bootstrap btn-{color} is coded in scss as some way so that
btn-primary and btn-info and btn-danger and btn-warning, etc. are not needed to be individually coded, I'd like to create my own custom class that relies on all the built in theme colors and adapts as they are used in the html.
Example HTML:
<div class="bflag-success"> this div </div>
where the scss is something like
#each $color, $value in $theme-colors { #include border-left-color-variant('.bflag-#{$color}', $value);
so that then any time I use bflag-success or bflag-danger or bflag-info, etc. it adopts that theme color, just like the btn class does.
I feel like I'm close, but adding the above code to my scss fail doesn't compile correctly and lands me with errors... "Error: Undefined mixin"
I suspect its the border-left-color-variant that's missing from somewhere, but I don't know where.
What am I doing missing or doing wrong?
Thanks
I learned how to do this:
Here is the syntax and example code that would be added to the (yourfile).scss file, BELOW the boostrap imports like shown:
// Below this import
#import '~bootstrap/scss/bootstrap';
// add this - changing the "bflag" class prefix to whichever you like
#each $color, $value in $theme-colors {
.bflag-#{$color} {
background-color: $value !important;
}
}
Then for every color you have in either the boostrap scss file, or the bootstrap core imported file, (i.e. primary, secondary, success, danger, info, light, dark, etc. ) the compiler will create a class and styles for that color in your output (yourfile).css file. Example using "primary" and "success" as examples.
.bflag-primary {
background-color: #3490dc;
}
.bflag-success {
background-color: #38c172;
}
After checking out the latest updates on the Sass Change Log, I got very exited about the new content exists function.
I'm using their own example, which doesn't work. And I've tried the following...
#mixin check-for-content {
#if content-exists() { background:green; }
#if not content-exists() { background:red; }
#content;
}
body {
background:blue;
#include check-for-content;
//#include check-for-content { test:block };
}
It doesn't matter if I pass parameters, add a block, don't add a block, add an empty block, etc... it always thinks content-exists() is true (and gives me a green background).
Am I missing something? Do I need to update anything else locally besides Sass?
If you use LibSass or NodeSass, then you can't use RubySass syntax.
Function content-exists() included the latest Sass 3.5.
I'm not totally sure if what I'm attempting is possible, but I've searched around as much as I can and build the following nested loop to create many variants of hex colors (rather than manually typing out the variable names).
$colors: (
green: #006938,
pink: #9d1e65,
//...
);
$variations: (
30%, 50%, 70%,
);
#each $hex, $name in $colors {
#each $v in $variations {
#{$name}-#{$v}: lighten($hex, $v);
}
}
However, I'm getting the following error on my second loop:
$ gulp sass
[17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js
[17:01:14] Starting 'sass'...
events.js:163
throw er; // Unhandled 'error' event
^
Error: src/scss/app.scss
Error: Invalid CSS after "...n $variations {": expected 1 selector or at-rule, was "#{$name}-#{$v}: lig"
on line 72 of src/scss/app.scss
>> #each $v in $variations {
-----------------------------^
at options.error (/Users/martynbisset/Sites/webcomponents/node_modules/node-sass/lib/index.js:291:26)
Is this not the correct syntax for a nested loop? Also, when I try to do the variable name dynamically without the loop, I also get an error .. sorry, kinda two questions in one but would appreciate any advice on this as I'm quite a noob with SASS/SCSS.
$name: "Hello";
$v: "70%";
#{$name}-#{$v}: lighten($hex, $v); // throws error too :(
You can't declare new css property or dynamic variable name in SASS, but you can definitely do something better by converting variable name into different css classes which we will learn step by step and do corrections in your SASS.
Map: Map is a data-type in SASS which represents one or more key value pairs. Map keys and value can be any SASS datatype(like number, string, color, boolean, map, list of values, null).
Syntax of map
map-name1{
key1: value1,
key2: value2,
...
}
map-name2{
key1:(key11:value11, key12: value12), //value is of map datatype
key2:(key21:value21, key22: value22)
}
So, correct the definition of $variations. Even though if you don't specify key it will work.
SASS also provides map-get() to get the value using key.
example,
$font: ( /*define 'font' map*/
color: #666,
size: 16px
);
body {
color: map-get($font, color); /*get value of 'color' property of 'font'*/
font-size: map-get($font, size);
}
2. As we can't declare variable name dynamically in SASS, so better to create some css class using map and #each loop.
Use the below SASS code:
$color:(
green: #006938,
pink: #9d1e65
);
$variations: (
thirty: 30%,
fifty: 50%
);
#each $name, $hex in $color {
#each $n, $v in $variations {
.color-#{$name}-#{$n}{
color: lighten($hex, $v);
}
}
}
After compilation, it will generate the below css,
.color-green-thirty {
color: #03ff89;
}
.color-green-fifty {
color: #69ffb9;
}
.color-pink-thirty {
color: #e470b1;
}
.color-pink-fifty {
color: #f4c6e0;
}
You cannot create dynamic variables in scss. What you can do is instead convert the variable name to a class name and use that everywhere. You also had a syntax issue in #each. It's key,value so your each will be $name,$hex
$colors: (
green: #006938,
pink: #9d1e65,
//...
);
$variations: (
30, 50, 70,
);
#each $name, $hex in $colors {
#each $v in $variations {
$perc: percentage($v/100);
.#{$name}-#{$v} {
background-color: lighten($hex, $perc);
}
}
}
I am creating css using SASS and would like to make it possible for another developer to create a custom css by changing sass variables. This works fine when I in my base file use a single variable like this:
$text-color: #000 !default;
To test the override I create a new project where I first declare an override for the variable and then import the "base" sass file.
$text-color: #0074b;
#import "base-file";
But I would also like to use maps for configuration but then I do not get the override to work. How should I use configuration maps that can be overriden?
$colors: (text-color: #000, icon-color: #ccc );
Adding !default after #000 gives me a compilation error: expected ")", was "!default,")
Adding !default after the ) gives no error but the variables does not get overwritten either.
Any ideas on what I am doing wrong?
I don't think the functionality you want exists in standard Sass. I built this function though that does what you're asking for:
//A function for filling in a map variable with default values
#function defaultTo($mapVariable: (), $defaultMap){
//if it's a map, treat each setting in the map seperately
#if (type-of($defaultMap) == 'map' ){
$finalParams: $mapVariable;
// We iterate over each property of the defaultMap
#each $key, $value in $defaultMap {
// If the variable map does not have the associative key
#if (not map-has-key($mapVariable, $key)) {
// add it to finalParams
$finalParams: map-merge($finalParams, ($key : $value));
}
}
#return $finalParams;
//Throw an error message if not a map
} #else {
#error 'The defaultTo function only works for Sass maps';
}
}
Usage:
$map: defaultTo($map, (
key1 : value1,
key2 : value2
));
Then if you have a mixin for something, you can do this sort of thing:
#mixin someMixin($settings: ()){
$settings: defaultTo($settings, (
background: white,
text: black
);
background: map-get($settings, background);
color: map-get($settings, text);
}
.element {
#include someMixin((text: blue));
}
Outputted CSS:
.element { background: white; color: blue; }
So you would use it like this based on what you said in the question:
$colors: defaultTo($colors, (
text-color: #000,
icon-color: #ccc,
));
Bootstrap has solved this issue as:
$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
),
$grays
);
https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L23