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
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 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;
}
}
This code is breaking my SASS process for some reason..
#for $i from 1 through 100 {
.t-#{$i} {
top: #{$i}%;
}
}
You can change to this:
#for $i from 1 through 100 {
.t-#{$i} {
top: 1% * $i
}
}
From SASS docs:
Here is an example
You can also write like this
#for $i from 1 through 100 {
.t-#{$i} {
top: #{$i + '%'};
}
}
I have a very challenging code for SASS SCSS lovers.
my code and loop challenge:
#for $i from 1 through 8 {
&.-overlay-#{$i} {
#include box-shadow($brand-color-#{$i});
}
}
The mixin ( what inside doesn't matters )
#mixin box-shadow($color: $black) {
box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}
The list of colors ( I do have 8 colors )
$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green; ... so on
The $brand-color-XX variable is passed to the #mixin
What I want to do is, create with #for loop these variations:
.-overlay-1
.-overlay-2
.-overlay-3 ...so on
But that #for is not working at the moment, what do am I missing here?
Regards
M
The #for was working, but you were trying to use variables in a way they're not meant to be used. You can't combine 2 SASS/SCSS variables to make one. You don't have a variable called $brand-color- so the compiler didn't know what to do with that. But you can get the result you want with a list.
DEMO
$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green;
$colors: $brand-color-1, $brand-color-2, $brand-color-3;
#mixin box-shadow($color: $black) {
box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}
#for $i from 1 through length($colors) {
.-overlay-#{$i} {
#include box-shadow(nth($colors, $i));
}
}
You said the result you wanted was, .-overlay-1 .-overlay-2 .-overlay-3 ...so on, so I'm not sure what you were doing with the &. The & is used to refer to the parent class. If you want to nest your created classes, you can do that too...
.cool {
#for $i from 1 through length($colors) {
.-overlay-#{$i} {
#include box-shadow(nth($colors, $i));
}
}
}
...or put them at the same level as the parent...
.cool {
#for $i from 1 through length($colors) {
&.-overlay-#{$i} {
#include box-shadow(nth($colors, $i));
}
}
}
...or create a different class
.cool {
#for $i from 1 through length($colors) {
&-overlay-#{$i} {
#include box-shadow(nth($colors, $i));
}
}
}
I'm working with the SCSS syntax of SASS to create a dynamic grid system but I've hit a snag.
I'm trying to make the grid system completely dynamic like this:
$columns: 12;
then I create the columns like this:
#mixin col-x {
#for $i from 1 through $columns {
.col-#{$i} { width: $column-size * $i; }
}
}
Which outputs:
.col-1 {
width: 4.16667%;
}
.col-2 {
width: 8.33333%;
}
etc...
This works well but what I want to do next is dynamically generate a long list of column classes separated by commas based on the number of $columns chosen - e.g I want it to look like this:
.col-1,
.col-2,
.col-3,
.col-4,
etc... {
float: left;
}
I've tired this:
#mixin col-x-list {
#for $i from 1 through $columns - 1 {
.col-#{$i}-m { float: left; }
}
}
but the output is this:
.col-1 {
float: left;
}
.col-2 {
float: left;
}
etc...
I'm a little stuck on the logic here as well as the SCSS syntax required to create something like this.
Does anyone have any ideas?
I think you may want to take a look at #extend. If you set that up something like:
$columns: 12;
%float-styles {
float: left;
}
#mixin col-x-list {
#for $i from 1 through $columns {
.col-#{$i}-m { #extend %float-styles; }
}
}
#include col-x-list;
It should render in your css file as:
.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
float: left;
}
#extend in the docs.
There's also a way to do what your question is specifically asking for: generate (and use) a list of classes with commas separating them. D.Alexander's response totally works in your situation, but I'm posting this alternative in case there's another use case for someone looking at this question.
Here's a Pen demonstrating: http://codepen.io/davidtheclark/pen/cvrxq
Basically, you can use Sass functions to achieve what you want. Specifically, I'm using append to add classes to my list, separated by commas, and unquote to avoid compilation conflicts with the period in the classnames.
So my mixin ends up looking like this:
#mixin col-x {
$col-list: null;
#for $i from 1 through $columns {
.col-#{$i} {
width: $column-size * $i;
}
$col-list: append($col-list, unquote(".col-#{$i}"), comma);
}
#{$col-list} {
float: left;
}
}
thnx to #davidtheclark here is a more generic version:
#mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') {
$attr-list: null;
#for $i from 1 through $attr-count {
$attr-value: $attr-steps * $i;
.#{$attr}#{$attr-value} {
#{$attr}: #{$attr-value}#{$unit};
}
$attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
}
#{$attr-list} {
//append style to all classes
}
}
Use it like this:
#include attr-x('margin-left', 6, 5, 'px');
//or
#include attr-x('width');
The result looks like this:
.margin-left5 {
margin-left: 5px; }
.margin-left10 {
margin-left: 10px; }
...
.margin-left30 {
margin-left: 30px; }
.width10 {
width: 10%; }
.width20 {
width: 20%; }
...
.width100 {
width: 100%; }