I want generate classes like grid-col-1, grid-col-md-1, grid-col-lg-1, grid-col-2, grid-col-md-2, grid-col-lg-2...
So, I have created this mixin to do it:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
$selector: 'grid-col-';
#if $type { $selector: $selector + $type + '-' + $i; }
#else { $selector: $selector + $i; }
.#{$selector} { width: $i/$grid-columns*100%; }
}
}
But I still think the code a bit repetitive. Is there a smarter way to make the condition that adds the type in the selector name?
You can make things more compact by using the if() function:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
.#{'grid-col-' + if($type, $type + '-', '') + $i} {
width: $i / $grid-columns * 100%;
}
}
}
Related
Below is some sass Im trying out, The css generated is correct, Im just trying to reduce my mixin duplication. The two mixins genProps and genPropsAmp are exactly the same except that the Amp mixin uses the & to prefix the rule with &. I tried to just add another var to the original mixin $amp: false and prefix my rule with an if so it became #if $amp {&}.#{$class}-... but that didnt work nor did trying to have it as an interpolation. Is there away of conditionaly placing the ampersand so I can just reuse the one mixin?
SASS:
$max_size: 0;
$sub_suffixes: '', 'q', 'h', 't';
$sub_divs: '', '.25', '.5', '.75';
#mixin genProps($class, $props, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
#for $i from 0 through $max_size {
#each $sub_suffix in $sub_suffixes {
.#{$class}-#{$i}#{$sub_suffix} {
#each $prop in $props {
#{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
}
}
}
}
}
#mixin genPropsAmp($class, $props, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
#for $i from 0 through $max_size {
#each $sub_suffix in $sub_suffixes {
&.#{$class}-#{$i}#{$sub_suffix} {
#each $prop in $props {
#{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
}
}
}
}
}
.root{
#include genProps(f, font-size, a);
#include genPropsAmp(m, margin);
}
CSS:
/* without amp */
.root .f-0 {font-size: var(--a-0);}
.root .f-0q {font-size: var(--a-0q);}
/*...*/
/* with amp */
.root.m-0 {margin: var(--r-0);}
.root.m-0q {margin: var(--r-0q);}
/*...*/
You can use a ternary operator: if($amp, "&", "")
#mixin genProps($class, $props, $amp, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
#for $i from 0 through $max_size {
#each $sub_suffix in $sub_suffixes {
#{if($amp, "&", "")}.#{$class}-#{$i}#{$sub_suffix} {
#each $prop in $props {
#{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
}
}
}
}
}
#mixin genProps($class, $props, $amp: false, $val_prefix: r, $max_size: $max_size, $sub_suffixes: $sub_suffixes) {
#for $i from 0 through $max_size {
#each $sub_suffix in $sub_suffixes {
#if $amp {
&.#{$class}-#{$i}#{$sub_suffix} {
#each $prop in $props {
#{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
}
}
} #else {
.#{$class}-#{$i}#{$sub_suffix} {
#each $prop in $props {
#{$prop}: var(--#{$val_prefix}-#{$i}#{$sub_suffix});
}
}
}
}
}
}
this is the best Iv got so far, not great as theres still a lot of duplication in the if elses but at least I only have one mixin now
I have a condition in scss, but I want to remove my value, how can I remove that value in scss? I put some code in bellow and also with image too
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 12 {
#for $j from 12 through 1 {
.#{$color-sp}-#{$i} {
width: $j;
}
}
}
I put some link to know my result :
https://www.sassmeister.com/gist/3d049565b0be28429f7d3803baf1bcb1
You can achieve that with an if statement
$color-sp: color-sp;
$width: 100%;
$max: 12;
$min: 1;
$j: $max;
#for $i from $min through $max {
#{$color-sp}-#{$i} {
width: $j;
}
$j : $j - 1;
}
I have made a condition in scss but when I compile, the result cannot appear in css file, I hope anyone can help me to solve my problem, I put code in the bellow :
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $color-sp == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $color-sp == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
I think you have to put if condition on $i instead of $color-sp. Check below code it will produce two classes .
try it on https://www.sassmeister.com/
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $i == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $i == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
And more optimized code for creating classes is below:
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
.#{$color-sp}-#{$i} {
width: $width / $i;
}
}
I have a problem with the nesting of SAS to make multiple selections, nose much about it, I hope you can help me and understand (because I do not write very good English).
SASS mixin:
#mixin data($x) {
$sel: &;
$collector: ();
#for $i from 1 through length($sel) {
$s: nth($sel, $i);
$last: nth($s, -1);
#if str-slice($last, -1) == "]" {
// if is just the bare attribute with no value, $offset will be -1, otherwise it will be -2
$offset: -1;
$current-x: $x;
#if str-slice($last, -2) == '"]' {
// this attribute already has a value, so we need to adjust the offset
$offset: -2;
} #else {
// no attribute value, so add the equals and quotes
$current-x: '="' + $x + '"';
}
$last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset);
$collector: append($collector, set-nth($s, -1, $last), comma);
} #else {
// following line will append $x to your non-attribute selector
$collector: append($collector, selector-append($s, $x), comma);
// the following line will not change your non-attribute selector at all
//$collector: append($collector, $s, comma);
}
}
#at-root #{$collector} {
#content;
}
}
SASS:
[data-content] {
#include data("content") {
background: black;
}
}
Output:
[data-content="content"] {
background: black;
}
The problem is I can not nest more than one item, for example does not work:
[data-content] {
#include data("content", "menu") {
background: black;
}
}
Output:
[data-content="content"],
[data-content="menu"] {
background: black;
}
Any way to solve?
You can always do something like this if you don't mind having to specify your selectors instead of passing them through as variables.
[data-content="content"], [data-content="menu"]{
#include data() {
background: black;
}
}
I have this code;
#each $viewport, $viewport-val in $viewport-vars {
// Classes only apply once certain breakpoint is triggered.
#include media-query(nth($viewport-val, 1)) {
$_cols: nth($viewport-val, 2);
#while $_cols > 1 {
#for $i from 1 through $_cols {
#if $i == $_cols {
.pull-#{$viewport}-1/0 {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
} #else {
.pull-#{$viewport}-#{$i}-#{$_cols} {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
}
}
$_cols: $_cols - 1;
}
}
}
Where I have this line .pull-#{$viewport}-#{$i}-#{$_cols}, I would like to add slash in the classname like so, #{$i}/#{$_cols}
Unfortunately this throws an error, does anyone know why?
B