I am try to access the previous item in a list using SASS so that I can add my variable $itemWidthIncrement onto the previous items value hence having an increment of 3px for each item:
$totalItems: 12;
$itemWidthIncrement: 3px;
$itemMarginIncrement: 1px;
#for $i from 1 through $totalItems {
.item-:nth-child(#{$i}) {
float: if($i % 2 == 0, left, right);
width:/*get previous item here*/ + $itemWidthIncrement;
}
}
Is this doable with SASS or am I not approaching this in the correct manner?
Try this - keep a $currentWidth variable and increment as necessary:
$totalItems: 12;
$itemWidthIncrement: 3px;
$itemMarginIncrement: 1px;
$currentWidth: 1px;
#for $i from 1 through $totalItems {
.item-:nth-child(#{$i}) {
float: if($i % 2 == 0, left, right);
width: $currentWidth;
}
$currentWidth: $currentWidth + $itemWidthIncrement;
}
Related
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;
}
}
I am formatting the color of my Atom indent guide lines.
The Atom stylings are in CSS but I can't figure out how to repeat the pattern.
This is what is looks like at moment:
And this is my code:
.editor {
.indent-guide {
// first level
color: rgb(255, 140, 0);
// second level
&:nth-child(2) {
color: rgb(138,43,226);
}
// third level
&:nth-child(3) {
color: rgb(46,139,87);
}
}
}
What is missing?
repetition is missing: you are targeting 2nd and 3rd child only, as exception to the first rule which is applied to all .indent-guide elements.
Use instead 3n + 1 and 3n + 2
.editor {
.indent-guide {
// first level
color: rgb(255, 140, 0);
// second level
&:nth-child(3n + 1) {
color: rgb(138,43,226);
}
// third level
&:nth-child(3n + 2) {
color: rgb(46,139,87);
}
}
}
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'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
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