Skip to content

Instantly share code, notes, and snippets.

@CosAnca
CosAnca / scss-each-loop-nth
Last active August 29, 2015 14:01
Scss: Each loop with nth usage
//Set Variables
$button-white: #ffffff;
$button-green: #44ca00;
$button-green-dark: #369a12;
$button-blue: #a6d1f9;
$button-blue-dark: #14283e;
$button-gray: #eeeeee;
$button-red: #9e0b0f;
//Create Array
@CosAnca
CosAnca / for-loop-throuh-array.scss
Last active August 29, 2015 14:01
Scss: For loop through array
$nav: #6fc2da #4fb1ce #36aace #1e95b7 #0d7591 #086379 #025163 #004350;
li {
@for $i from 1 through 8 {
&:nth-child(#{$i}) {
background-color: nth($nav, $i);
}
}
}
@CosAnca
CosAnca / each-loop.scss
Last active August 29, 2015 14:01
Scss: Each loop through nth
$category_icons: (0 all #777) (1 videogames #AD0000) (2 boardgames #108C03) (3 dev #AF049B);
@each $icon in $category_icons {
.icon-#{nth($icon,2)} {
background-position: - nth($icon,1)*32px 0;
background-color: nth($icon,3);
}
}
.icon-small {
@CosAnca
CosAnca / each-loop-classes-input.scss
Last active August 29, 2015 14:01
Scss: Each loop through array
$list: one two three four five;
ul {
li {
width:100px;
height:100px;
display:inline-block;
list-style:none;
border:1px solid #eee;
}
}