.myclass {
position: absolute;
$positions: 0 1 2 3 4 5 6 7;
#each $position in $positions {
&.x#{$position} {
top: #{$position}%;
}
&.y#{$position} {
left: #{$position}%;
}
}
}
Did i make something wrong? VsCode tells me [scss] term expected aftr the % signs, can you tell me is it a bug or did i make a mistake?
That should work just fine:
#{$position}#{"%"}
UPDATE:
I think compiler recognizes % as start of placeholder selector (so it expects placeholder name after percent sign), it's required in this case that you declare "%" as string.
"Placeholder selectors" # sass-lang.com/documentation/file.SASS_REFERENCE.html
Related
In my SCSS file I have this:
#for $i from 1 to 100 {
$percent : $i + '%';
[fxFlex='$percent'] {
flex: 1 1 $percent ;
}
}
I want 1%, then 2% etc but I get this. I wish to remove the double quotes and have $percent display as 1%, 2% not $percent:
[fxFlex=' $percent '] {
flex: 1 1 "1%";
}
[fxFlex=' $percent '] {
flex: 1 1 "2%";
}
You're almost there.
You need to use variable interpolation, meaning you have to write #{$percent} instead of $percent:
Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{} in any of the following places:
Source: sass-lang
Second thing, you probably want to remove the quotes in the flex property. You can do it with the string function string.unquote(), but first you need to import it with the use keyword.
#use "sass:string";
#for $i from 1 to 100 {
$percent: $i + '%';
[fxFlex='#{$percent}'] {
flex: 1 1 string.unquote($percent);
}
}
I am working on an angular library and am trying to create a function that takes a color pallet and a name and returns a list so I can create CSS variables. Any help or ideas is appreciated!
$violets-palette: (
100: #e1cced,
200: #9064b3,
300: #6a408a,
400: #5d357e,
500: $violet,
600: #311a52,
700: #2d054c,
800: #28053d,
900: #1f0532
);
$reds-palette: (
50: #fee9e8,
100: #fbc8c6,
200: #f9a4a1,
300: #f77f7b,
400: #f5635e,
500: $precise-red,
600: #f1413c,
700: #ef3833,
800: #ed302b,
900: #ea211d
);
#function createVariables($palette, $name){
#each $key, $value in $palette {
#if $key != 'contrast' {
#if $key == 500 {
#return '--' + $name + ':' + #{$value};
} #else {
#return #{'--' + $name + '-' + $key} + ':' + #{$value};
}
}
}
}
:root{
//This would loop over the returned list
createVariables($reds-palette, 'precise-red');
}
I want it to add this to the style sheet...
--precise-red-50
--precise-red-100
--precise-red-200
--precise-red-300
--precise-red-400
--precise-red
--precise-red-600
--precise-red-700
--precise-red-800
--precise-red-900
Why your #function not works: With #return you end the function and #return's the result ... so your #function will stop on the first step in your loop.
So, if you really want to use a function first write the values to a map and return the map to a var.
But note: in SASS a #function is not the best choice to write code to css. It is more used to return a single value. If you would need a multiused solution use a #mixin (it is to write calculated code to the css file) or if it is a single task in your project a simple #each loop does the job as well.
One more thinking:
Only writing var names to css does not even helps without advising a value to it. So maybe you like to do:
:root {
--precise-red-50: #fee9e8;
--precise-red-100: #fbc8c6;
...
}
However. We had a very similar question here some days ago. Maybe you like to have a look ... It was about writing css color vars based on lists/maps similar to yours to css file. If with or without advising color to the css vars ... please adapt the code to your needs:
https://stackoverflow.com/a/66854088/9268485
Update: Additional Example
Here is another similar example from the last days. In this case the task was to write the color swatch build on a color direct to css vars. The shades had been calculated in same process:
https://stackoverflow.com/a/66850423/9268485
(If you are not confirm with Bootstrap colors and color maps here is a short overview to this example: https://getbootstrap.com/docs/5.0/customize/color/)
I am doing some calculations with in my mixins and need to return a value in %.
#include breakpoint(sm) {
padding-left: ($content-block) + %;
padding-right: ($content-block) + %;
}
This is supposed to return 10% but when running Compass, I get the following error:
error scss/main.scss (Line 265 of scss/_mixins.scss: Invalid CSS after
"...l ox--xs) + ": expected expression (e.g. 1px, bold), was "%;")
Any idea on how to make this work?
I have issue Operators % in Sass when i use a for loop
#for $i from 1 to 10 {
.colu-md-#{$i}{
width: #{$i} * 10%;
}
}
But it results into:
Error: Undefined operation "1 * 10%".
Has anyone ever seen this before?
Got syntax error. code is attached below. Hope this will be helpful for you
#for $i from 1 to 10 {
.colu-md-#{$i}{
width: #{$i * 10%};
}
}
With Sass' ability to use variables, one would hope there is a large set of logic functions we can do with them.
Is there a way to do something like this?
$someVar: someValue !default;
#switch $someVar
{
#case 'red':
.arbitrary-css here {}
#break;
#case 'green':
.arbitrary-css here {}
#break;
#case 'blue':
.arbitrary-css here {}
#break;
}
However, I can't find anything in the Sass reference about this.
No there isn't any supported switch statement in sass but if you only need to use the switch statement to tweak a variable, you can use sass maps in a switch statement sort of way.
Using SASS maps in place of a switch statement
$newVar: map-get((
case_1_test_name : case_1_return_value,
case_2_test_name : case_2_return_value,
), $testVar);
So here's an example:
$vehicle: car;
$vehicleSeating: map-get((
car : 4,
bus : 20,
), $vehicle);
//$vehicleSeating = 4
The above example translated into if/else statements:
$vehicle: car;
#if ($vehicle == 'car') {
$vehicleSeating: 4;
} #else if ($vehicle == 'bus'){
$vehicleSeating: 20;
}
//$vehicleSeating = 4
Sass doesn't support Switch Case.
Sass only support four control directives:
#if
#for
#each
#while