I'm trying to write looped mixin that iteratively increases the saturation of a background-color. Here's the latest mixin code:
#mixin generateBackgroundSteps($cell-count, $color) {
#for $i from 0 through $cell-count - 1 {
$percent: (5 * $i) + "%";
$new-color: saturate($color, $percent);
&[setting-id="#{$i}"] {
background-color: $new-color;
}
}
}
No matter how I've altered this, the produced css just keeps looking like this:
.rubric-design .rubric .create-new-criteria .create-criteria-initial-
settings .create-criteria-setting[setting-id="2"] {
background-color: saturate(#90afc8);
}
Maybe it's the way I'm forming $percent. It must be something obvious!
Try using percentage function.
percentage function in SCSS
$percent: percentage((5 * $i) / (5 * $cell-count));
#mixin generateBackgroundSteps($cell-count, $color) {
#for $i from 0 through $cell-count - 1 {
$percent: percentage((5 * $i) / (5 *$cell-count));
$new-color: saturate($color, $percent);
&[setting-id="#{$i}"] {
background-color: $new-color;
}
}
}
Related
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 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 a sass mix-in for my angular to do list, that lightens the color of the app as you go, 1 being dark blue, 50 being white.
How can I go about making the hover make each item's background 50-60% darker?
My mixin:
#mixin shades-of-blue ( $count, $startcolor ) {
#for $i from 0 through $count {
$background-color: lighten( $startcolor, $i + $i );
.tasks:nth-of-type(#{$i}) {
background-color: $background-color;
}
}
}
#include shades-of-blue( 50, #2d89ef);
You should probably be using mix instead of lighten/darken, otherwise everything is white at around 26.
#mixin shades-of-blue ( $count, $startcolor ) {
#for $i from 0 through $count {
$background-color: mix(white, $startcolor, $i + $i);
.tasks:nth-of-type(#{$i}) {
background-color: $background-color;
&:hover {
background-color: mix(black, $background-color, 50);
}
}
}
}
#include shades-of-blue( 50, #2d89ef);
You can try it out here: http://sassmeister.com/
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%;
}
}
}
I'm using Thomas Macdonald's sass version of bootstrap (bootstrap-sass)
I'm trying to not embed Bootstrap classes (i.e. span7 or span10) in my html as described in here.
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
in bootstrap-sass the only sass mixin that I know is available to apply the "span7" class to my div is with #include makeColumn(7);
This works for fixed grid but not for a fluid grid. I need these columns to be fluid and responsive.
#Thomas Macdonald answered the question on StackOverflow with a mix-in that he created called makeFluidColumn
How to use twitter bootstrap with bootstrap-sass in rails app?
but it is not included anymore in the latest mixin file as is also mentioned per this github issue:
https://github.com/thomas-mcdonald/bootstrap-sass/issues/191
Is there something else that I need to do? I need to be able to change the span as a mixin because I am trying to change the number of columns that a div spans depending on viewport size through media queries.
I ended up rolling my own #mixin.
so instead of using bootstrap's #include makeColumn(i); i can do #include col(i) to apply a width of i number of columns to a div or other element. Just include this SCSS file
/*=VARIABLES - GRID
------------------------------------------------*/
$columns: $gridColumns; //from bootstrap/_variables.scss
$column-width: $gridColumnWidth; //from bootstrap/_variables.scss
$gutter-width: $gridGutterWidth; //from bootstrap/_variables.scss
$max-width: $columns * ($column-width + $gutter-width);
/*=VARIABLES - FONTS
------------------------------------------------*/
$font-base: $baseFontSize; //from bootstrap/_variables.scss
$font-base-line-height: $baseLineHeight; //from bootstrap/_variables.scss
$font-base-line-height-half: $font-base-line-height / 2;
$font-base-percentage: (($font-base / 16px) * 100) + 0%;
/*MIXINS
------------------------------------------------*/
#mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) {
float: left;
margin-left: percentage($gutter-width / $container-width);
width: percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2)) / $container-width);
border-width: $border;
padding: em($padding, $font-base) percentage($padding / $container-width);
}
/*FUNCTIONS
------------------------------------------------*/
#function em($target, $context: $font-base) {
#if $target == 0 { #return 0 }
#return $target / $context + 0em;
}
#function perc($width, $container-width: $max-width) {
#return percentage($width / $container-width);
}
#function lh($amount: 1, $context: $font-base) {
#return em($font-base-line-height * $amount, $context);
}
#function heading-line-height($size) {
$line-height: $font-base-line-height;
$match: false;
#while $match != true {
#if $size == $line-height {
$match: true;
} #else if $size < $line-height {
$match: true;
} #else if $size > $line-height {
$line-height: $line-height + $font-base-line-height;
} #else {
$match: true;
}
}
#return ($line-height / $size) + 0em;
}