I want to get the font size between two ranges.
$base-font: 1px;
#for $i from 1 through 100 {
.th-#{i} {
font-size: $base-font + $i + px;
}
}
When I am using class .th-30, I am not getting a font size of 30px.
You can just remove the $base-font variable altogether. Also, you're missing a dollar sign in the selector:
#for $i from 1 through 100 {
.th-#{$i} {
font-size: $i + px;
}
}
Here's a working fiddle.
Here are some changes you need to do.
There is no need for $base-font here
$base-font: 1px;
#for $i from 1 through 100 {
.th-#{$i} {
font-size: #{$i}px;
}
}
Related
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 have helper classes like the following for all directions (both margin and padding):
.h-space-top-10 {margin-top: 10px;}
.h-space-top-20 {margin-top: 20px;}
.h-space-top-30 {margin-top: 30px;}
Is there anyway to create those with Sass to have dynamic values (e.g. up to 10x the base value 10px) or would one have to write them out manually?
#for $i from 1 through 3 {.h-space-top-#{$i * 10} {margin-top:#{$i * 10}px}}
$properties: (margin padding);
$positions: (top right bottom left);
$range: 10;
#each $property in $properties {
#each $item in $positions {
#for $ii from 1 through $range {
.h-#{$property}-#{$item}-#{$ii * 10} { #{$property}-#{$item}: #{$ii * 10}px; }
}
}
}
You may define two variables: number of repetitions and number of px to jump in each repetition. Something like this:
$numRepetitions: 3;
$pxJump: 10;
#for $i from 1 through $numRepetitions {
.h-space-top-#{$i * $pxJump} {
margin-top:#{$i * $pxJump}px
}
}
The output for that case would be the code you need:
.h-space-top-10 {
margin-top: 10px;
}
.h-space-top-20 {
margin-top: 20px;
}
.h-space-top-30 {
margin-top: 30px;
}
However, if you need for example to iterate 4 times and summing 5px in each jump you just need to change the value of the variables, like this:
$numRepetitions: 4; //4 instead of 3 repetitions
$pxJump: 5; //5px instead of 10px
#for $i from 1 through $numRepetitions {
.h-space-top-#{$i * $pxJump} {
margin-top:#{$i * $pxJump}px
}
}
In that case you'll get this code:
.h-space-top-5 {
margin-top: 5px;
}
.h-space-top-10 {
margin-top: 10px;
}
.h-space-top-15 {
margin-top: 15px;
}
.h-space-top-20 {
margin-top: 20px;
}
I have SCSS style like this, I want to use #for from SCSS to write this more efficient.
So far:
#for $i from 1 through 6 {
h#{$i} {
$size: {$i} * 1.4;
#include font-size($size);
}
}
Note: don't mind calculation of size, its just for test
but syntax is not right.
Expected output
h1 {
#include font-size(3.2);
}
h2 {
#include font-size(2.4);
}
h3 {
#include font-size(1.8);
}
h4 {
#include font-size(1.6);
}
h5 {
#include font-size(1.3);
}
h6 {
#include font-size(1.2);
}
The main issue is your h1 increasing in size as it gets to a higher number (because you are using $i incrementally). You can escape that by reducing the h-number size using the formula 7 - $i.
#for $i from 1 through 6 {
h#{7 - $i} {
fontsize: $i * 1.4em;
}
}
The output here is:
h6 { font-size:1.4em }
h5 { font-size:2.8em }
h4 { font-size:4.2em }
h3 { font-size:5.6em }
h2 { font-size:7em }
h1 { font-size:8.4em }
Which seems to make sense. The original error you were getting was this:
Invalid CSS after "$size:": expected expression (e.g. 1px, bold), was "{$i} * 1.4;"
Because you can simply use $i as a number without special denotation.
To get the numbers to match with your question, you should actually find a way to calculate them on the fly - and the numbers you have shown above are not a pattern, so they are not mathematically controllable. Here's what you could do:
#for $i from 1 through 6 {
h#{7 - $i} {
fontsize: 3.4em / 6 * $i;
}
}
The reason this cannot be computed mathematically like your question desires is: h1 - h2 = .6em, h2 - h3 = .6em, h3 - h4 = .2em => That last one does not fall into line with any particular pattern.
I'm trying to make a responsive design that flips from horizontal to vertical depending on the screen width and I need all the widths in percentage defined in css because I cannot use JavaScript.
The app is based on Middleman (a ruby gem) and I use scss as the css processor/renderer.
For this in scss:
#for $i from 0 through 100 {
.width-percentage-#{$i} {
width : #{percentage($i/100)};
}
}
It gets this in css :
...
.width-percentage-27 {
width: 27%
}
.width-percentage-28 {
width: 28.0%
}
.width-percentage-29 {
width: 29.0%
}
.width-percentage-30 {
width: 30%
}
...
.width-percentage-53 {
width: 53%
}
.width-percentage-54 {
width: 54%
}
.width-percentage-55 {
width: 55.0%
}
.width-percentage-56 {
width: 56.0%
}
.width-percentage-57 {
width: 57.0%
}
.width-percentage-58 {
width: 58.0%
}
.width-percentage-59 {
width: 59%
}
...
Now notice the problem ... for 28, 29,55, 56, 57, 58 there is a .0 in the value.
The browsers I'm targeting are handling this fine. But how does scss processor renders somehow different value types (int and floats) in the same loop ?
Strange indeed you could solve this issue by using round or ceil
#for $i from 0 through 100 {
.width-percentage-#{$i} {
width : round(percentage($i/100));
}
}
An example: http://sassmeister.com/gist/2c6f6b7cd825b16e423a
You only need to add % symbol to 100 to make the operation work.
#for $i from 1 through 100 {
.width-percentage-#{$i} {
width : #{100% / $i};
}
}
I want to write a sass mixin that outputs a certain class every 5 steps from 1 to 100. But I can't get the modulo operator to work somehow. No class is created at all.
Here is my code
#mixin flex_percentage($className) {
#for $i from 1 through 100 {
#if $i % 5 != 0 {
.#{$className}#{$i} {
width: $i * 1%;
}
}
}
}
#include flex_percentage(p);
I also tried $i mod(5) but then it outputs all 100 classes.
I would like to have a output like
.p5 {
width: 5%;
}
.p10 {
width: 10%;
}
.p15 {
width: 15%;
}
The #if $i % 5 != 0 { should be like this:
#if $i % 5 == 0 {
The difference is between != and == in the if clause. Your original code was actually outputting every class except those that were multiples of 5. If we change it to ==, then only those classes which are multiples of 5 are output.
Live example: http://sassmeister.com/gist/7550271