To ensure readability and maintainability, I would like to declare several values like colors for example, but only once.
The problem I have is that it seems impossible to assign the result of a sass function or even simple variables directly to css variable.
.some-selector {
--my-css-variable: $my-color; // nope
--my-css-variable: mySassFunction(); // nope
--my-css-variable: transparentize($my-color, .5); // nope
--my-css-variable: copy-pasted-value; // alright
}
I can't seem to find any answer on search engines, always finding irrelevant topics at best.
Could you help me?
Try with interpolation #{...}
$my-color: #fff;
#function myFunction() {
#return #000;
}
.some-selector {
--my-css-variable: #{$my-color};
/* output: --my-css-variable: #fff; */
--my-css-variable: #{myFunction()};
/* output: --my-css-variable: #000; */
}
Related
I'm looking at solving a specific problem with SASS - I want to append a pseudo-class to the selectors of a lot of old legacy styles, and ideally I'd like to do it in a DRY way.
I saw that sass enables you to append to a selectors using the selector-append function - however, I can't seem to figure out a way to write some sort of reusable function in sass that calls such a function to modify a selector.
Here's what I've tried:
#function optOut($selector) {
#return selector-append($selector, ":not(:where(*.opt-out))");
}
optOut(div) {
color: black;
}
But, depending on the sass compiler I use, it either does not compile or just compiles to:
optOut(div) {
color: black;
}
I'd like it to compile to this:
div:not(:where(*.opt-out)) {
color: black;
}
Any help is greatly appreciated - thank you so much for your time and knowledge.
You just need to interpolate the return value of the function like so:
#function optOut($selector) {
#return selector-append($selector, ":not(:where(*.opt-out))");
}
#{optOut(div)} {
color: black;
}
I want to create a function which will change color based on background-colorlightness(), but get an error
Argument $color of lightness($color) must be a color
When I setup color: set-color(#000000); everything is okay, but I need to setup varibable ($background-color). Is there is a way to achieve it?
#function set-color($color) {
#if (lightness($color) >= 50) {
#return #000;
}
#else {
#return #FFF;
}
}
$background-color: attr(data-color);
background-color: $background-color;
color: set-color($background-color);
From the code it looks like u are using data-color attribute is down tag.
Either add the attribute to proper element in html
Or hard code $background-color to some value
i.e. replace
$background-color: attr(data-color)
with
$background-color: #000000
Is there any way to customize the variables in SASS?
For example:
.m-b-{$number} {
margin-bottom: $number;
}
If I give class="m-b-50" to an element, it should take margin-bottom 50. I just want to know if it is possible with SASS.
Yes it is possible with the help of variable interpolation or variable substitution which uses #{} for variable substitution in SASS and mixins which is a block of code just like function.
Interpolation is the process of evaluating an expression or a string containing one or more variables, yielding a result in which the variables are replaced with their corresponding values.
Simple example of interpolation and set values to the css property in SASS:
$number:60;
$n: 20px;
.m-b-#{$number}{
margin-bottom: #{$number}px;
margin-top: $n;
}
To create customize class names, will use mixins:
#mixin margin-class($side, $number) {
$firstLetter: str-slice($side, 0, 1);
.m-#{$firstLetter}-#{$number}{
margin-#{$side}: #{$number}px;
}
}
$margins: (10, 20);
$sides: ("top", "right", "bottom", "left");
#mixin generate-margin(){
#each $margin in $margins{
#each $side in $sides{
#include margin-class($side, $margin);
}
}
}
#include generate-margin();
Here, generate-margin() will get executed which will call margin-class() for each $margins and $sides, and will generate the below CSS classes:
.m-t-10 {
margin-top: 10px;
}
.m-r-10 {
margin-right: 10px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-l-10 {
margin-left: 10px;
}
.m-t-20 {
margin-top: 20px;
}
.m-r-20 {
margin-right: 20px;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-l-20 {
margin-left: 20px;
}
That's the one way when you want only for specific values, but if you want to create margin class for 0-20, you can loop thru 0 to 20 as shown below:
#mixin generate-margin(){
#for $margin from 1 through 20{
#each $side in $sides{
#include margin-class($side, $margin);
}
}
}
For anyone else facing this issue, here is how one can achieve this:-
#for $i from 1 through 10 {
.mb-#{$i} {
margin-bottom: #{$i}rem;
}
}
The answer is: no it is not possible. SASS is just a language to pre-generate CSS for you. There is no on-demand, dynamic creation of classes triggered by the contents of your HTML markup. When it comes time for the browser to render your HTML and apply your specified classes, it is still just using CSS. I.e. if you assign class="m-b-50" to an element, the class .m-b-50 must already be explicitly defined somewhere. As noted in the other answers, SASS can make it easier to generate a bunch of pre-defined classes but you must know which values you want to support up front.
Now, you could generate classes for some very large, all-inclusive range like -1000 to 1000 to effectively support all values you might ever try to use and it would seem to do what you wanted, but you would be forcing your users to download a larger CSS file with, most likely, a large percentage of it being unused CSS which is wasteful and can be inconsiderate in a world of paid & limited data plans.
I'm trying to build a function to automate hover state operations. So gar I have this
$switch-element-hover: 20% !default;
$switch-element-operation: "lighten" !default;
#function generate-hover-state($color) { #return
#{$switch-element-operation}($color, $switch-element-hover); }
Then I try to use it like this:
&:hover {
background-color: generate-hover-state($background);
}
Now I managed to compile it but the output looks weird:
background-color: lighten#626262, 20%;
Also I have tried using unquote as suggested by the tool but it doesn't seem to work.
Does anyone have any idea how to do this?
Solved it.
The answer laid in the #call method:
http://sass-lang.com/documentation/Sass/Script/Functions.html#call-instance_method
// Hover state function
#function generate-hover-state($color) {
#return call($switch-element-operation, $color, $switch-element-hover);
}
On the site I'm working on we were using Scaffold, which is a PHP-based system similar to Sass. It also can process Sass functions\files. Unfortunately that system is now abandonware, and we are looking on a way to move completely to Sass. There is one big feature with Scaffold though that I'm not finding a way to port to Sass, the variable groups.
Variable in Scaffold can be organized in groups and used with a point-separated markup. For example I would define them as:
#variables vargroup1{
variable1: ####;
variable2: ####;
variable3: ####;
variable4: ####;
}
And later use on the code as, for example.
body{ width: vargroup1.variable1; margin: vargroup1.variable2 + 10;}
This helps development a lot, since you can group together variables from a system and reading the CSS files you can easily know what to reference. I didn't find anything like that on the Sass documentation, anyone knows if it is possible? Or if there is anyway using Mixins to do this?
Thanks
I came across this somewhat clunky solution (see Chris Eppstein's reply) using zip and index. Apparently a maintainer of SASS added these built-in functions in response to a similar question.
To quote his reply:
$border-names: a, b, c;
$border-widths: 1px, 1px, 2px;
$border-styles: solid, dashed, solid;
$border-colors: red, green, blue;
$borders: zip($border-widths, $border-styles, $border-colors);
#function border-for($name) {
#return nth($borders, index($border-names, $name))
}
#each $name in $border-names {
.border-#{$name} {
border: border-for($name);
}
}
Would generate:
.border-a { border: 1px solid red; }
.border-b { border: 1px dashed green; }
.border-c { border: 2px solid blue; }
The "naming your variables" comes from the list "-names" at the top; you then use the index of a desired variable name from that variable list to get the nth value from another variable lists. zip is used to mush separate lists together, so that you can retrieve the same index from all lists at the same time. Wrapping that behavior in a function makes it easier to retrieve a set.
There is no equivalent in Sass. But I can think in two workarounds:
1) Sass lists and its related list functions.
Your code could look like the following:
$variables = 40px 30px 20px 10px;
body {width: nth($variables, 1); margin: nth($variables, 2) + 10;}
It's not the same because list indexes can't be strings, so you haven't any way to name your variables.
2) Define a custom function. Look at Function Directives section in Sass reference
#function variables($variable_name) {
#if ($variable_name == 'variable1') {
#return 40px;
} #else if ($variable_name == 'variable2') {
#return 30px;
}
}
body {width: variables('variable_1'); margin: variables('variable_2') + 10;}
This way is less intuitive and uglier but you can 'name your variables'.
You could use the scss/sass map function:
#use "sass:map";
$variables: (
"variable1": ####;
"variable2": ####;
"variable3": ####;
"variable4": ####;
}
body {
width: map.get($variables, "variable1");
margin: map.get($variables, "variable2") + 10;
}
Documentation
You can use SASS lists a it's related functions on a way similar to that:
// List order: top, bottom, left, right, width, height, ...
$Header: 10px,auto,10px,auto,100%,50px;
$Footer: auto,0px,0px,auto,100%,20px;
#function getVar($variable,$name:top){
$var_index:1;
#if $name==bottom {
$var_index:2;
} #else if $name==left {
$var_index:3;
}
// Continue de if else for each property you want.
return nth($variable,$var_index);
}
That way calling something like:
getVar($Header,left)
Should return the value of the left property for the list of Header, but changing it to getVar($Footer,top) would return the value for the top property of the "Footer Group" (Footer List of Values).
That works for the time of using the values, but a the definition, you must follow the exact order and cannot leave any empty value, the nearest to an empty value that I found is #{''} what means "Empty String with no quotes", an empty value, but is added to the CSS.