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%
}
}
Related
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;
}
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 + '%'};
}
}
First time asking here.
I'm trying to make somekind of MIXIN in order to set heights for an element.
For example < span class="space h5" >< /span > in CSS this would be:
$size: 1px;
.space {
display: block;
}
.space.x5 {
height: $size * 5;
}
So my question, is it possible to create a mixin to multiply, add up or subtract amounts with classes?
For example
< span class=" space h5 x2 add4 ">< /span > ====> height: 14px
or:
< span class=" space h5 x4 subtract2 ">< /span > ====> height: 18px
Thanks a lot!
Regards.
#mixin height-special($default,$multiplier: 1,$extra: 0) {
height: ($default*$multiplier+$extra) + px;
}
So, height-special(5,2,4) will return 14
you can leave out the last 2 which will return the default value.
It's a nice solution but I was looking for something more like a loop:
.space {
display: block;
clear: both;
}
$space-base: 5px;
/*multipliers*/
#for $space-base from 1 through 100 {
.h5x#{$space-base} {
height: $space-base * 5px;
}
}
/*add*/
.h5x2.add-1 {
height: ($space-base * 2 + 1);
}
.h5x2.add-2 {
height: ($space-base * 2 + 2);
}
.h5x2.add-3 {
height: ($space-base * 2 + 3);
}
.h5x2.add-4 {
height: ($space-base * 2 + 4);
}
.h5x2.add-5 {
height: ($space-base * 2 + 5);
}
.h5x2.add-6 {
height: ($space-base * 2 + 6);
}
.h5x2.add-7 {
height: ($space-base * 2 + 7);
}
.h5x2.add-8 {
height: ($space-base * 2 + 8);
}
.h5x2.add-9 {
height: ($space-base * 2 + 9);
}
/*subtract*/
.h5x2.sub-1 {
height: ($space-base * 2 - 1);
}
I was trying to avoid all the combination by hand and do it with SASS.
I'm trying to create a grid of list items, I have 10 items and want to position them absolutely in sets of 2. I can set the left position fine using modulus but I tripping up on how I can increment the top position so each row is an additional 20% top. Can anyone advise on what I need to do? I tried adding in a row and top value counter but I think my logic for this is messed up. Currently all top values get set as 0, is it because Im not setting $topValue as a percentage or am I messing this up?
SASS
$total: 10;
$inc: 0;
#for $i from 1 through $total {
$rowCount: 0;
$topValue: 0;
li:nth-child(#{$i}) {
top: $topValue;
$rowCount: $rowCount + $rowCount;
#if $rowCount >= 2 {
$rowCount: 0;
$topValue: $topValue + 20;
}
#if $i % 2 == 0 {
left: 50%;
} #else {
left: 0;
}
}
}
Pen: http://codepen.io/styler/pen/IAkzy
SASS: http://sassmeister.com/gist/a5ee97397eb2a0609ca1
$total: 10;
$inc: 0;
$rowCount: 0;
#for $i from 1 through $total {
li:nth-child(#{$i}) {
#if $i % 2 == 0 {
left: 50%;
} #else {
$rowCount: $rowCount + 1;
left: 0;
}
top: ($rowCount - 1) * 20%;
}
}
Fiddle: http://codepen.io/anon/pen/umojy