Skip to content

Instantly share code, notes, and snippets.

@ilicmarko
Last active August 29, 2015 14:19
Show Gist options
  • Save ilicmarko/c6880814bf2c05616953 to your computer and use it in GitHub Desktop.
Save ilicmarko/c6880814bf2c05616953 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
-for(var x=1; x<11; x++)
div
if x == 10
h1 Fixed color
else
h1 :nth-child(#{x})
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
// Just change this variable
$divbg: yellow;
// Function and other stuff
@function coloring($color, $type:"") {
@if (lightness($color) > 50) {
@if $type == "" {
@return #000000;
}
@else{
@return darken($color, $type)
}
} @else {
@if $type == "" {
@return #000;
}
@else{
@return darken($color, $type)
}
}
}
div{
padding: 20px;
font-size: 20px;
margin: 10px 0;
background:$divbg;
}
@for $i from 1 through 9 {
$j: $i * 10;
div:nth-child(#{$i}){
color: coloring($divbg,$j);
}
}
div:nth-child(10){
color: coloring($divbg);
}
div {
padding: 20px;
font-size: 20px;
margin: 10px 0;
background: yellow;
}
div:nth-child(1) {
color: #cccc00;
}
div:nth-child(2) {
color: #999900;
}
div:nth-child(3) {
color: #666600;
}
div:nth-child(4) {
color: #333300;
}
div:nth-child(5) {
color: black;
}
div:nth-child(6) {
color: black;
}
div:nth-child(7) {
color: black;
}
div:nth-child(8) {
color: black;
}
div:nth-child(9) {
color: black;
}
div:nth-child(10) {
color: #000;
}
<div>
<h1>:nth-child(1)</h1>
</div>
<div>
<h1>:nth-child(2)</h1>
</div>
<div>
<h1>:nth-child(3)</h1>
</div>
<div>
<h1>:nth-child(4)</h1>
</div>
<div>
<h1>:nth-child(5)</h1>
</div>
<div>
<h1>:nth-child(6)</h1>
</div>
<div>
<h1>:nth-child(7)</h1>
</div>
<div>
<h1>:nth-child(8)</h1>
</div>
<div>
<h1>:nth-child(9)</h1>
</div>
<div>
<h1>Fixed color</h1>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment