Compile error with SCSS if-else statement - css

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;
}
}

Related

How to remove some value of condition in scss?

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;
}

My SASS loop is breaking using interpolation and percentage

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 + '%'};
}
}

SASS for loop to output increments of 15 [duplicate]

This question already has answers here:
Adding a unit to a number in Sass
(2 answers)
Closed 7 years ago.
I am trying to output the following:
.time15 {
width: 25%;
}
.time30 {
width: 50%;
}
.time45 {
width: 75%;
}
.time60 {
width: 100%;
}
.time75 {
width: 125%;
}
All the way up to .time1440
Here is my code:
$max: 60 * 24;
$step: 15;
#for $i from 15 through ceil($max/$step) {
$value: ($i - 1)*$step + 1;
$width: $value / 60 * 100;
.time{$value} {
width: $value%
}
}
I'm getting the following syntax error though when trying to compile:
Error: Invalid CSS after "... &.time{$value": expected ":", was "} {"

The issue is that SCSS can't handle the following line:
width: $value%;
It is safer to do
width: percentage($value);
Apart from that, I think that the interpolation of the selector is also wrong.
In my test I changed it to .time-#{$value} and that worked for me.
Full example:
$max: 60 * 24;
$step: 15;
#for $i from $step through ceil($max/$step) {
$value: ($i - 1) * $step + 1;
$width: $value / 60 * 100;
.time-#{$value} {
width: percentage($value);
}
}

this maybe what you're looking for:
$max: 60 * 24;
$step: 15;
#for $i from 1 through ($max/$step) {
$value: $step * $i;
$width: $i * 25;
.time#{$value} {
width: $width + 0%
}
}

Conditional selector name with SASS

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%;
}
}
}

Adding Slashes into CSS Classnames in Sass

I have this code;
#each $viewport, $viewport-val in $viewport-vars {
// Classes only apply once certain breakpoint is triggered.
#include media-query(nth($viewport-val, 1)) {
$_cols: nth($viewport-val, 2);
#while $_cols > 1 {
#for $i from 1 through $_cols {
#if $i == $_cols {
.pull-#{$viewport}-1/0 {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
} #else {
.pull-#{$viewport}-#{$i}-#{$_cols} {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
}
}
$_cols: $_cols - 1;
}
}
}
Where I have this line .pull-#{$viewport}-#{$i}-#{$_cols}, I would like to add slash in the classname like so, #{$i}/#{$_cols}
Unfortunately this throws an error, does anyone know why?
B

Resources