The Issue
I'm currently in a pickle. I need to group selectors inside of a Sass loop. I've tried many different ways to go about doing this such as:
body {
$store: null;
#for $i from 1 through 10 {
$store: append($store, ".offset-by-#{$i}", comma);
}
// produces content: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
#each $j in $store {
$store: unquote($j);
}
// produces .offset-by-10
}
What I'm trying to accomplish using pure Sass (no Ruby) is the following:
.offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }
If you are a Sass god then please give me an idea of what to do here. If this is an inherent limitation of the meta-language then let me know about that too!
Considerations
I can't use anything other than a mixin to accomplish this because functions are expected to be used on a property value. Mixins, on the other hand allow the production of entire blocks of code.
Keep it simple, soldier!
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo; }}
UPD You can also have individual styles with this approach:
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo;
margin-left: 50px * $i; }}
Which results in the following CSS:
.offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
foo: bar; }
.offset-by-1 {
margin-left: 50px; }
.offset-by-2 {
margin-left: 100px; }
.offset-by-3 {
margin-left: 150px; }
.offset-by-4 {
margin-left: 200px; }
.offset-by-5 {
margin-left: 250px; }
.offset-by-6 {
margin-left: 300px; }
.offset-by-7 {
margin-left: 350px; }
.offset-by-8 {
margin-left: 400px; }
.offset-by-9 {
margin-left: 450px; }
.offset-by-10 {
margin-left: 500px; }
Have you tried something like this:
#mixin createNumbered($num, $className){
#for $i from 1 through $num {
.#{$className}-#{$i} {
#content;
}
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}
Updated:
#mixin createNumbered($num, $className){
$foo : '';
#for $i from 1 through $num {
$foo : $foo + '.' + $className + '-' + $i + ', ';
}
#{$foo} {
#content;
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}
This is likely overkill for what you need, but I needed to be able to add :last-child onto the class list. I built this on Clark Pan's Answer:
#mixin group-classes($start, $stop, $step, $selector, $selector-suffix, $property, $value) {
$selector-list: '';
$i: $start;
#while $i <= $stop {
$comma: ', ';
#if $i == $stop {
$comma: '';
}
$selector-list: $selector-list + $selector + '-' + $i + $selector-suffix + $comma;
$i: $i + $step;
}
#{$selector-list} {
#{$property}: #{$value}
}
}
And then to use it:
#include group-classes(1, 3, 1, '.e > .g', ':last-child', 'margin', 0);
Result:
.e > .g-1:first-child,
.e > .g-2:first-child,
.e > .g-3:first-child {
margin:0!important;
}
Related
I wonder if there's a way to programmatically create classes with stylus using Iterators.
Example:
$my-colors = {
"black": #344F5E,
"grey": #E0E0E3,
}
I know there's define() but I'm not sure if that works and if so how I would access the key and the value side.
like
for col in $rf-colors
define('rf-bg-' + col #() {
background-color:
})
Goal is to extend the color pallette and have all classes automatically generated. Maybe I'm using the completely wrong approach.
You can use interpolation with {} and a loop on a hash for $key, $value in $hash:
$my-colors = {
"black": #000,
"white": #fff
}
for $name, $color in $my-colors {
.{$name} {
background-color: $color
}
}
which will output:
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
The define() function is used to define variables.
I have a for loop in SASS which loops through page classes to insert a colour break for each module. For example:
#for $i from 1 through 4 { // the loop
.m0#{$i} .module-title{
background-color: nth($m_col_lvl_01_list, $i);
}
//- end loop
}
Which compiles to:
.m01 .module-title{
background-color: green;
}
.m02 .module-title{
background-color: blue;
}
.m03 .module-title{
background-color: yellow;
}
.m04 .module-title{
background-color: orange;
}
In the task I have at the moment it includes .m00 Is there a way of including 00 in the loop?
I think you can still achieve what you want using 0 in the for loop.
$list: (green, blue, orange, red, yellow);
//loop from 0 to the length of the list which isn't hardcoded
#for $i from 0 to length($list) {
.m0#{$i} .module-title {
//simply add one to the loop index to get the correct list item
background-color: nth($list, $i + 1);
}
}
This compiles to the following CSS
.m00 .module-title {
background-color: green;
}
.m01 .module-title {
background-color: blue;
}
.m02 .module-title {
background-color: orange;
}
.m03 .module-title {
background-color: red;
}
.m04 .module-title {
background-color: yellow;
}
I have this kind of list
$colors : (
(redG, #ff0000, #ffffff),
(blueG, #00ff00, #ff4544),
(greenG, #0000ff, #123456)
);
and I'd like to do something like
a {
background-color: $colors[redG, 1]
color: $colors[redG, 2]
}
Thanx
You could use nested maps along with a function like such:
$colors : (
redG : (
1 : #ff0000,
2 : #fff
),
blueG : (
1 : #00ff00,
2 : #ff4544
),
greenG : (
1 : #0000ff,
2 : #123456
)
);
#function color($color, $position: 1) {
#return map-get(map-get($colors, $color), $position)
}
a {
background-color: color(redG, 1);
color: color(redG, 2);
}
a {
background-color: color(blueG, 1);
color: color(blueG, 2);
}
a {
background-color: color(greenG, 1);
color: color(greenG, 2);
}
Which will return:
a {
background-color: #ff0000;
color: #fff;
}
a {
background-color: #00ff00;
color: #ff4544;
}
a {
background-color: #0000ff;
color: #123456;
}
i think everyone will understand, what i try to to:
#each $num, $mult, $space in ('01', 1, '16px'), ('02', 2, '32px'), ('03', 3, '48px'), ('04', 4, '64px'), ('05', 5, '80px'), ('06', 6, '96px') {
&.item-#{$num} {
right: $sideNavWidth * $mult + $space;
}
}
but the end result for item-01 is: right: "320px16px"; This is ofc invalid... Why Node-Sass dont give me a clean result? What is wrong with my array?
Its Same like:
&.item-01 {
right: $sideNavWidth + 16px;
}
&.item-02 {
right: $sideNavWidth * 2 + 32px;
}
&.item-03 {
right: $sideNavWidth * 3 + 48px;
}
&.item-04 {
right: $sideNavWidth * 4 + 64px;
}
&.item-05 {
right: $sideNavWidth * 5 + 80px;
}
&.item-06 {
right: $sideNavWidth * 6 + 96px;
}
And end Result must be:
.item-01{right:336px}
.item-02{right:672px}
.item-03{right:1008px}
.item-04{right:1344px}
.item-05{right:1680px}
.item-06{right:2016px}
And anyone see a smarter way to do that, what i try to do?
Best regards.
Remove the quotes from the pixel values in your array.
Like this:
$sideNavWidth: 320px;
.e {
#each $num, $mult, $space in ('01', 1, 16px), ('02', 2, 32px), ('03', 3, 48px), ('04', 4, 64px), ('05', 5, 80px), ('06', 6, 96px) {
&.item-#{$num} {
right: $sideNavWidth * $mult + $space;
}
}
}
In the comments you asked for a more efficient way to do this, so I came up with this:
$sideNavWidth: 320px;
.n {
#for $i from 1 through 6 {
$z: '';
#if ($i < 10) { $z: '0'; }
&.item-#{$z}#{$i} {
right: ($sideNavWidth * $i) + (($i * 2) * 8);
}
}
}
I would like to do something like this:
for $num in (1..100)
:scope[md="$num"]
width: $num + '%'
but it gives me this
:scope[md="$num"] {
width: 1%;
}
:scope[md="$num"] {
width: 2%;
}
How can I make $num be replaced in the selector as well?
You have to use interpolation. In the comment Jcl has made a little mistake by not remove the quotes:
STYLUS
for $num in (1..100)
:scope[md={$num}]
width: $num + '%'
OUTPUT
:scope[md=1] {
width: 1%;
}
:scope[md=2] {
width: 2%;
}
:scope[md=3] {
width: 3%;
}
...
If you want the output with quotes you can escape like this:
:scope[md=\"{$num}\"]