I have a condition in scss, but I want to remove my value, how can I remove that value in scss? I put some code in bellow and also with image too
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 12 {
#for $j from 12 through 1 {
.#{$color-sp}-#{$i} {
width: $j;
}
}
}
I put some link to know my result :
https://www.sassmeister.com/gist/3d049565b0be28429f7d3803baf1bcb1
You can achieve that with an if statement
$color-sp: color-sp;
$width: 100%;
$max: 12;
$min: 1;
$j: $max;
#for $i from $min through $max {
#{$color-sp}-#{$i} {
width: $j;
}
$j : $j - 1;
}
Related
I have a sass class like this:
#for $column from 1 through $columns {
.column-#{$column} {
#extend %set-margin;
flex: 100% / $column;
}
}
and the result like this:
.column-1 {
flex: 100%
}
.column-2 {...}
...
I want reverse the result like:
.column-12 {
flex: 100%
}
.column-11 {...}
...
how to reverse the result ?
You can just switch around the two variables 1 and $columns and divide the 100% by the inverse:
$columns: 4;
#for $column from $columns through 1 {
.column-#{$column} {
#extend %set-margin;
flex: 100% / ($columns - $column + 1);
}
}
Simply like below:
$columns:12;
#for $column from 1 through $columns {
.column-#{$column} {
flex: 100% / ($columns - $column + 1);
}
}
I want to write a for loop which increments with 100 each time ($i), and increments another variable by 50 each time ($j).
I tried to follow the examples in other questions about sass incremental loops, but I can't seem to be able to figure out how to apply to my case specifically.
$max: 2600;
$step: 100;
$j: 150;
#for $i from 1000 through $max {
$i: $i + $step;
$j: $j + 50;
// stuff
#media screen and (min-height: #{$i}px) {
.item {
transform:
translateY(calc(-100% - #{$j}px));
}
}
}
this is the current CSS output:
#media screen and (min-height: 1100px) {
.item {
transform: translateY(calc(-100% - 200px)); } }
#media screen and (min-height: 1101px) {
.item {
transform: translateY(calc(-100% - 250px)); } }
#media screen and (min-height: 1102px) {
.item {
transform: translateY(calc(-100% - 300px)); } }
// ..etc
the desired CSS output:
#media screen and (min-height: 1000px) { // $i is 1000
.item {
transform:
translateY(calc(-100% - 150px)); // $j is 150
}
}
#media screen and (min-height: 1100px) { // $i is 1100
.item {
transform:
translateY(calc(-100% - 200px)); // $j is 200
}
}
#media screen and (min-height: 1200px) { // $i is 1200
.item {
transform:
translateY(calc(-100% - 250px)); // $j is 250
}
}
...
// and so on and so forth until min-height is 2600
EDIT
This is the working code, thank you
$max: 26;
$step: 100;
$j: 100;
#for $i from 10 through $max {
$k: $i * $step;
$j: $j + 50;
#media screen and (min-height: #{$k}px) {
.item {
transform:
translateY(calc(-100% - #{$j}px));
}
}
}
$max: 26;
$step: 100;
$j: 150;
#for $i from 1 through $max {
$k: $i * $step;
$j: $j + 50;
// Use $k and $j in the styles instead of $i
Instead of adding $step to $i, you need to multiply * it with the $step. Also, change the variable name from $i to something else since it will override the loop variable $i.
Edit: Just realized you will also need to change your start and end of the loop.
IMPROVED ANSWER:
My old answer works but, I believe it works at the expense of readability. I would suggest you initialize $k with an initial value just like you did with $j and add $step to $k each time independent of $i in each iteration:
$max: 26;
$j: 150;
$k: 100;
$stepK: 100;
$stepJ: 50;
#for $i from 10 through $max {
$k: $k + $stepK;
$j: $j + $stepJ;
// Use $k and $j in the styles instead of $i
I have made a condition in scss but when I compile, the result cannot appear in css file, I hope anyone can help me to solve my problem, I put code in the bellow :
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $color-sp == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $color-sp == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
I think you have to put if condition on $i instead of $color-sp. Check below code it will produce two classes .
try it on https://www.sassmeister.com/
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $i == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $i == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
And more optimized code for creating classes is below:
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
.#{$color-sp}-#{$i} {
width: $width / $i;
}
}
This code is breaking my SASS process for some reason..
#for $i from 1 through 100 {
.t-#{$i} {
top: #{$i}%;
}
}
You can change to this:
#for $i from 1 through 100 {
.t-#{$i} {
top: 1% * $i
}
}
From SASS docs:
Here is an example
You can also write like this
#for $i from 1 through 100 {
.t-#{$i} {
top: #{$i + '%'};
}
}
I want generate classes like grid-col-1, grid-col-md-1, grid-col-lg-1, grid-col-2, grid-col-md-2, grid-col-lg-2...
So, I have created this mixin to do it:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
$selector: 'grid-col-';
#if $type { $selector: $selector + $type + '-' + $i; }
#else { $selector: $selector + $i; }
.#{$selector} { width: $i/$grid-columns*100%; }
}
}
But I still think the code a bit repetitive. Is there a smarter way to make the condition that adds the type in the selector name?
You can make things more compact by using the if() function:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
.#{'grid-col-' + if($type, $type + '-', '') + $i} {
width: $i / $grid-columns * 100%;
}
}
}