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%};
}
}
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/)
Seems like I must have some syntax error with my function?
Defined as so:
#function v($i, $a: $ba) {
$ca: $i*$a;
$x: $r*(sin($ca) + $p*sin($q*$ca));
$y: $r*(cos($ca) - $p*cos($q*$ca));
$z: $r*sin(($q + 1)*$ca);
#return $x, $y, $z;
}
in my output style.css document I still see the function calls:
--v: v($i)
In this case, you need to use interpolation where you call your function:
.selector {
--v: #{v($i)};
}
.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
I'm trying to get a sass function going:
$times: 0.10 0.20 0.30 0.40 0.50 0.60 0.70 0.75 0.80 0.90;
#each $value in $times{
.is-hidden-#{$value}{
#include hide( $value + s );
}
}
The problem is this: somehow, it doesn't accept decimal numbers. It works perfectly with 1, 2, 3, etc. I even tried this:
$times: 10 20 30 40 50 60 70 80 90;
#each $value in $times{
.is-hidden-#{$value}{
#include hide( ($value / 100) + s );
}
}
But sass doesn't do anything with that last calculation there. He just ignores the '/ 100'. Is there some way I can pass decimal numbers through a function like this? The output would be this:
.is-hidden-0.1s{
}
.is-hidden-0.2s{
}
.is-hidden-0.3s{
}
etc....
Thanks!
--- EDIT ---
This is the hide mixin:
#mixin hide( $time ){
opacity: 0;
visibility: hidden;
#include transition( $time );
}
Your desired output is invalid CSS. From the CSS validator:
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "1s" a valid class, CSS2 requires the first digit to be escaped ".\31s" [1s]
There are many times where Sass will give you errors when you try to generate invalid CSS. To generate valid results, you need to compose the selector using integers and adding the escaped decimal point like this:
#for $i from 1 through 9 {
.is-hidden-0\.#{$i}s {
#include hide($i / 10 * 1s);
}
}
Here's a general way to escape decimal numbers for class names (replacing . with -)
#function strip-units ( $number ) {
#return $number / ( $number * 0 + 1 );
}
#function escape-number ( $value ) {
#if type-of( $value ) != 'number' {
#return $value;
}
$int: floor( strip-units( $value ) );
$fract: $value - $int;
#if ( $fract == 0 ) {
#return $int;
}
#while ( $fract != floor( $fract ) ) {
$fract: $fract * 10;
}
#return $int + '-' + $fract;
}