I wonder if it is possible to do this with SCSS? Incrementing by X each time.
It is tricky because the -s or -md needs to be updated instead of the number.
#for $i from 1 through 6 {
.u-marg-t-#{$i} {
margin-top: 0px + ($i * 8);
}
}
Aside from this not even counting correctly, is a #for the best approach, here?
Plain CSS output
.u-marg-t {
&-xs {
margin-top: 8px;
}
&-sm {
margin-top: 16px;
}
&-md {
margin-top: 24px;
}
&-lg {
margin-top: 32px;
}
&-xl {
margin-top: 43px;
}
&-xxl {
margin-top: 50px;
}
}
.u-marg-b {
&-xs {
margin-bottom: 8px;
}
&-sm {
margin-bottom: 16px;
}
&-md {
margin-bottom: 24px;
}
&-lg {
margin-bottom: 32px;
}
&-xl {
margin-bottom: 43px;
}
&-xxl {
margin-bottom: 50px;
}
}
You could use a list with the suffixes you want to use and iterate through inside your for loop. Here's an example:
$sizes: xs, sm, md, lg, xl, xxl;
#for $i from 1 through 6 {
.u-marg-t-{
&#{nth($sizes, $i)} {
margin-top: 0px + ($i * 8);
}
}
}
$sizes is your list with the suffixes. Inside the loop I used the function nth($list, $i) to get the item at position $i in your list.
Related
I'm not very familiar with SCSS and downt know how the following code should look in SCSS. I wanna add per level 20px margin.
.level-1 {
margin-left: 0px;
}
...
.level-9 {
margin-left: 160px;
}
You can use a for loop :
#for $i from 1 through 9 {
.level-#{$i} {
margin-left: 20px * ($i - 1);
}
}
I'm trying to achieve the following code with a scss for loop:
.box {
margin-left: 0;
margin-right: 2%;
}
.box + .box {
margin-left: 2%;
margin-right: 0;
}
.box + .box + .box {
margin-left: 0;
margin-right: 2%;
}
...
My for loop in scss looks like this:
.box {
margin-left: 0;
margin-right: 2%;
#for $i from 1 through 4 {
$sel: if($i == 1, &, selector-nest($sel, &)) !global;
#{$sel} {
#if ($i % 2 == 0) {
margin-left: 0;
margin-right: 2%;
} #else {
margin-left: 2%;
margin-right: 0;
}
}
}
}
The result is this:
.box {
margin-left: 0;
margin-right: 2%;
}
.box .box {
margin-left: 2%;
margin-right: 0;
}
.box .box .box {
margin-left: 0;
margin-right: 2%;
}
...
But I don't know how i can add the adjacent sibling selector between the classes. Maybe I'm doing it the wrong way. Is there a better way to do it, or could i use a recursive function or something like that? :)
Thanks for your help
Is this what you want:
.box {
margin-left: 0;
margin-right: 2%;
#for $i from 1 through 4 {
$sel: if($i == 1, &, selector-nest(#{$sel} #{'+'}, &)) !global;
+ #{$sel} {
#if ($i % 2 == 0) {
margin-left: 0;
margin-right: 2%;
} #else {
margin-left: 2%;
margin-right: 0;
}
}
}
}
I'm trying to work out on SCSS how I would go about something like this:
I would like to have a margin anywhere between 1px and 1000px and have a class for it.
For example
.MarginTop-x
X being where I can write any value. Obviously I couldn't write out
.MarginTop-1 {margin-top:1px}
.MarginTop-2 {margin-top:2px}
.MarginTop-3 {margin-top:3px}
.MarginTop-4 {margin-top:4px}
etc...
Well you need a #for loop to do that .
SCSS :
$class-slug: ".MarginTop";
$stop-loop: 4;
#for $i from 0 through $stop-loop {
#{$class-slug}-#{$i} {
margin-top: #{$i}px;
}
}
Compiled CSS:
.MarginTop-0 {
margin-top: 0px; }
.MarginTop-1 {
margin-top: 1px; }
.MarginTop-2 {
margin-top: 2px; }
.MarginTop-3 {
margin-top: 3px; }
.MarginTop-4 {
margin-top: 4px; }
Not sure of the utility of this, but...
Sass:
#mixin marginTop($amount) {
.marginTop-#{$amount} {
margin-top: unquote($amount + 'px');
}
}
#include marginTop(1);
#include marginTop(100);
Compiled CSS:
.marginTop-1 {
margin-top: 1px;
}
.marginTop-100 {
margin-top: 100px;
}
I've got the following loop producing some styles for a tag cloud. On the online generators it produces the I'd consider the correct css styles, however in the visual studio solution (2012) which auto produces the css it seems to hang up. (see below) the less. Is there a more proper way to produce something like this via less that won't confuse the VS .less generator?
#iterations: 10;
#maxSize: 40;
#minSize: 10;
.tag-loop (#i) when (#i > -1) {
#j: (#i*(30/#iterations) + #minSize);
li.tag-#{i} {
font-size:~"#{j}px";
}
.tag-loop(#i - 1);
}
.tag-loop (#iterations);
Produces via visual studio:
ul.tag-cloud li.tag-10 {
font-size: 10px;
}
ul.tag-cloud li.tag-9 {
font-size: 10px;
}
ul.tag-cloud li.tag-8 {
font-size: 10px;
}
ul.tag-cloud li.tag-7 {
font-size: 10px;
}
ul.tag-cloud li.tag-6 {
font-size: 10px;
}
ul.tag-cloud li.tag-5 {
font-size: 10px;
}
ul.tag-cloud li.tag-4 {
font-size: 10px;
}
ul.tag-cloud li.tag-3 {
font-size: 10px;
}
ul.tag-cloud li.tag-2 {
font-size: 10px;
}
ul.tag-cloud li.tag-1 {
font-size: 10px;
}
ul.tag-cloud li.tag-0 {
font-size: 10px;
}
If I use something like http://winless.org/online-less-compiler the following is more accurately produced:
li.tag-10 {
font-size: 40px;
}
li.tag-9 {
font-size: 37px;
}
li.tag-8 {
font-size: 34px;
}
li.tag-7 {
font-size: 31px;
}
li.tag-6 {
font-size: 28px;
}
li.tag-5 {
font-size: 25px;
}
li.tag-4 {
font-size: 22px;
}
li.tag-3 {
font-size: 19px;
}
li.tag-2 {
font-size: 16px;
}
li.tag-1 {
font-size: 13px;
}
li.tag-0 {
font-size: 10px;
}
It looks like your VS uses (via Web Essentials 2012?) quite outdated Less 1.3.3 which handles variable scope quite differently, i.e. #j defined in the last iteration overrides all previous #j definitions.
The workaround to this is to calculate font-size value directly:
#iterations: 10;
#maxSize: 40;
#minSize: 10;
.tag-loop (#i) when (#i > -1) {
li.tag-#{i} {
font-size: unit((#i * (30 / #iterations) + #minSize), px);
}
.tag-loop((#i - 1));
}
.tag-loop (#iterations);
Im using SASS. I need on value to be double another value so the logic is this:
.one {
padding: 'value';
}
.two {
padding: 'value times 2';
}
So it could be this:
.one {
padding: 2px;
}
.two {
padding: 4px;
}
Or this:
.one {
padding: 10px;
}
.two {
padding: 20px;
}
How can I write this?
If you want a value you can reuse, you need a variable.
$my-padding: 1em;
.one {
padding: $my-padding;
}
.two {
padding: $my-padding * 2;
}