With the help of #for loop in SASS I want to apply padding (pixel unit) to my list by multiplying for every level but its giving me raw output. My SASS code is :
#for $i from 1 through 5 {
.chapter-summary {
&:nth-child(#{$i}) {
padding-bottom: (10px) * #{$i};
}
}
}
and its giving me following output :
.chapter-summary:nth-child(1) {
padding-bottom: 10px * 1;
}
.chapter-summary:nth-child(2) {
padding-bottom: 10px * 2;
}
.chapter-summary:nth-child(3) {
padding-bottom: 10px * 3;
}
.chapter-summary:nth-child(4) {
padding-bottom: 10px * 4;
}
.chapter-summary:nth-child(5) {
padding-bottom: 10px * 5;
}
Need a solution
Ok guyz I got the solution and that is as following :
#for $i from 1 through 5 {
.chapter-summary {
&:nth-child(#{$i}) {
padding-bottom: #{$i * 10px};
}
}
}
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 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.
I have a problem converting a string to a variable, because it generates an error
I have tried in several ways to convert this variable into a line, in order to obtain the colors in the classes
c-gray + $i
SASS
$c-gray1: #666;
$c-gray2: #979797;
$c-gray3: #4c4c4c;
$c-gray4: #b9c6d1;
$c-gray5: #f7f8f9;
#for $i from 1 through 5 {
$colorsGrays: c-gray + $i;
$count: 1;
#each $color in $colorsGrays {
.gBgcGray#{$i} {
background-color: $color;
}
.gCGray#{$i} {
color: $color;
}
.g-bc--gray#{$i} {
border-color: $color;
}
$count: $count + 1;
}
}
OUTPUT:
.gBgcGray1 {
background-color: c-gray1;
}
.gCGray1 {
color: c-gray1;
}
.g-bc--gray1 {
border-color: c-gray1;
}
.gBgcGray2 {
background-color: c-gray2;
}
.gCGray2 {
color: c-gray2;
}
.g-bc--gray2 {
border-color: c-gray2;
}
.gBgcGray3 {
background-color: c-gray3;
}
.gCGray3 {
color: c-gray3;
}
.g-bc--gray3 {
border-color: c-gray3;
}
.gBgcGray4 {
background-color: c-gray4;
}
.gCGray4 {
color: c-gray4;
}
.g-bc--gray4 {
border-color: c-gray4;
}
.gBgcGray5 {
background-color: c-gray5;
}
.gCGray5 {
color: c-gray5;
}
.g-bc--gray5 {
border-color: c-gray5;
}
TEST: https://sass.js.org/
There is some way to generate a code with the correct one to get the values in the SASS and the OUTPUT
Sass can't resolve variables in this way, but you can use either list or map and resolve colors:
Using list:
$c-gray: #666 #979797 #4c4c4c #b9c6d1 #f7f8f9;
#for $i from 1 through 5 {
$colorsGrays: nth($c-gray, $i);
}
Using map:
$colors: (
c-gray1: #666,
c-gray2: #979797,
c-gray3: #4c4c4c,
c-gray4: #b9c6d1,
c-gray5: #f7f8f9,
);
#for $i from 1 through 5 {
$colorsGrays: map-get($colors, c-gray + $i);
}
Moreover in these cases you can use #each $colorGrays in $colors instead of #for
I would like to have children elements to have padding incremented by 10px.
I've tried the following:
$lpad: 10px;
$i: 1;
#for $i through 20 {
.myEm:nth-child($i) {
padding-left: $lpad * $i;
}
$i: $i + 1;
}
Looks right but doesn't seem to work. What am I missing?
This isn't a loop. Even if it were, this isn't how CSS works.
You can do something like this if your elements are nested:
.el {
padding-left: 10px;
> .el {
padding-left: 20px;
}
}
If your elements are siblings:
#for $i from 1 through 20 {
.simLvl:nth-child(#{$i}) {
margin-left: $lpad * $i;
}
}
Suppose I have the following in SCSS:
$browser-context: 16;
#function em($size, $context: $browser-context) {
#if (unitless($size)) { $size: $size * 1px; }
#if (unitless($context)) { $context: $context * 1px; }
#return ($size / $context) * 1em;
}
With this, I can write the following:
.test { padding: em(20px); }
Which will output the following CSS:
.test { padding: 1.25em; }
And everything is hunky dory. Is there any way that I can transform an unknown amount of inputs in one call? For example:
.text { padding: func(20px 30px); }
and
.text { padding: func(20px 30px 10px); }
would output
.text { padding: 1.25em 1.875em; }
and
.text { padding: 1.25em 1.875em 0.625em; }
respectively. I'm just hoping to avoid doing this:
.text { padding: em(20px) em(30px) em(10px); }
What you're looking for is a map function (commonly found in other languages to apply a function on each item in a list), but Sass does not provide one. However, you can write your own starting with Sass 3.3 by using the call() function as you loop over the entire list.
#function map($fun, $list) {
#for $i from 1 through length($list) {
$list: set-nth($list, $i, call($fun, nth($list, $i)));
}
#return $list;
}
Usage:
$bar: 10px 20px 30px;
#function times2($i) {
#return $i * 2;
}
.foo {
padding: map('times2', $bar); // note the quotes around the function name
}
Output:
.foo {
padding: 20px 40px 60px;
}