This question already has an answer here:
cycling through a list of colors with sass
(1 answer)
Closed 7 years ago.
I have 4 list items that I each need a different background colour on.
I can put my 4 different colour variables in a Sass list and each through them as $color but in the content block of that loop I obviously need to specify which <li> I am talking about using :nth-of-type 1, 2, 3 or 4.
I'm not sure how to specify which <li> I need on each turn of the loop.
Any ideas?
This should do the trick:
$colors: (#000, #F00, #0F0, #00F);
#for $i from 1 through length($colors) {
li:nth-of-type(#{$i}) {
background: nth($colors, $i);
}
}
It produces:
li:nth-of-type(1) {
background: black; }
li:nth-of-type(2) {
background: red; }
li:nth-of-type(3) {
background: lime; }
li:nth-of-type(4) {
background: blue; }
Related
In the sass list, can the index value be represented by a variable?
$colors:#111 #222 #333 #444;
#for $i from 1 through 4 {
:nth-child(#{$i}):after{
background: nth($colors, #{$i});
}
}
in sass nth(colors,index), index can use variables?
Yes. You just have some issues with your syntax, and you haven't defined nth child of 'what'. This example shows how you could apply your sass to list items. This also uses the length of the array to determine the number of loops versus manually setting that to 4 making your code a little more future proof.
$colors: #111 #222 #333 #444;
#for $i from 1 through length($colors) {
li:nth-child(#{length($colors)}n+#{$i}) {
background: nth($colors, $i);
}
}
https://jsfiddle.net/ggwa3bv1/1/
You could use a map instead, https://jsfiddle.net/uyzk15d6/
$colors: (
red: 1,
green: 2,
blue: 3,
orange: 4
);
#each $color, $child in $colors {
li:nth-child(#{$child}n) {
background: $color;
}
}
This question already has an answer here:
SASS: randomly pick background-image from a list
(1 answer)
Closed 7 years ago.
I want to specify an array of colours and then apply the colors randomly to a list.
So far I have it so that the colors will cycle through in order.
How can I randomise it?
Here is the Sass code so far:
$colors: red, orange, yellow, green, blue, purple;
#for $i from 1 through length($colors) {
li:nth-child(#{length($colors)}n+#{$i}) {
background: lighten(nth($colors, $i), 20%);
}
}
li {
list-style: none;
padding: 1em;
}
and the markup:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
Example on Codepen:
http://codepen.io/anon/pen/azbwJm
Edit: Sass introduced a module system. The random() function is transitioning to math.random(). See the documentation for the function and for the module system for more information.
First, I should state a reminder to everyone reading that Sass is precompiled into CSS; you cannot achieve random behavior "at runtime" (i.e. on page load) using Sass.
Sass has a random() function that might interest you:
$colors: red, orange, yellow, green, blue, purple;
$repeat: 20 // How often you want the pattern to repeat.
// Warning: a higher number outputs more CSS.
#for $i from 1 through $repeat {
li:nth-child(#{length($colors)}n+#{$i}) {
background: lighten(nth($colors, random(length($colors))), 20%);
}
}
li {
list-style: none;
padding: 1em;
}
This chooses a random index of your $colors array and uses the associated color.
Note: the documentation states that random($limit) "returns a random whole number between 1 and $limit." This includes $limit as a possible value. As a result, if you use nth($colors, random(length($colors) + 1)), you are liable to get an error for using an index out of bounds.
This question already has an answer here:
Math with interpolated variables?
(1 answer)
Closed 7 years ago.
Trying to do math inside my loop.
#for $i from 1 through length($colors) {
ul li:nth-child(#{$i}) {
z-index: length($colors) - #{$i};
}
}
But what I get in CSS, for example, is:
li:nth-child(2) {
z-index: 8-2;
}
How can I force SASS to do math and get:
li:nth-child(2) {
z-index: 6;
}
Thanks for help!
You are putting the $i value as a string in the z-index property. If you want to calculate the value correctly you should do it:
$length: length($colors)
#for $i from 1 through length($colors) {
ul li:nth-child(#{$i}) {
z-index: $length - $i;
}
}
Also I recommend you to set a variable with the value of length to prevent multiple calls to this function.
Regards.
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
How can I modify the root element of the parent selector chain? (using sass 3.3.x) Something like...
=prepend($prefix)
#at-root .#{$prefix}#{&} // note there is no dot (.) separating it
#content
.foo
.bar
+prepend(baz)
background: red
and return
.baz.foo .bar {
background: red;
}
or even better... an explicit way to target the root element (or even the nth element)?
=prepend($prefix)
&.#{$prefix}
#content
.foo
+prepend("baz")
.bar
background: red
Returns this:
.foo.baz .bar {
background: red;
}
On the right track?
This question already has answers here:
Adding a unit to a number in Sass
(2 answers)
Closed 7 years ago.
I am quiet new to Sass... I want to create some css with percentage values like:
width : 13%;
The value is the result of a sass number operation. Writing this
width : $main-width + "%"
scss code generates this:
width : "13%";
css, what is actually not working because it should be:
width : 13%;
writing
width : $main-width %;
results in
width : 13 "%"
what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?
Think of units in Sass like variables in algebra instead of just concatenating strings.
In algebra:
2x * 3 = 6x
In Sass:
13 * 1% = 13%
Use this approach to do more advanced math.
10px * 3px = 30px*px
But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px
30px*px / 1px = 30px
Hope this helps beyond your original question.
unquote("%") does the trick.
You could try #.
I had a similar problem with a mixin and lists
#mixin p($value, $position: a, $unit: $rhythm-unit){
$vallist: ();
#if length($value) > 1 {
#each $sval in $value {
$sval: 0 !default;
$vallist: append($vallist, #{$sval}#{$unit});
}
padding: $vallist;
} #else{
#if $position == t {
padding-top: $value+$unit;
} #else if $position == r {
padding-right: $value+$unit;
} #else if $position == b {
padding-bottom: $value+$unit;
} #else if $position == l {
padding-left: $value+$unit;
} #else {
padding: $value+$unit;
}
}
}
The problem was
append($vallist, $sval+$unit);
It always added quotes around these values e.g. "1rem" "1.25rem" which is not a correct css syntax.
I replaced it with:
append($vallist, #{$sval}#{$unit});
As you can see i use #-sign with {} and + it not necessary any more.
The very interesting here is that this only appear with lists/append as you can see in my outer else.
You could find it at the sass reference page Division and slash
If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example:
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
Hope it helps