Skip to content

Instantly share code, notes, and snippets.

@king-panda
Last active August 29, 2015 14:21
Show Gist options
  • Save king-panda/b328394611a7e28f4eb3 to your computer and use it in GitHub Desktop.
Save king-panda/b328394611a7e28f4eb3 to your computer and use it in GitHub Desktop.
【Sass】配列を@each文でリストとして出力 ref: http://qiita.com/kingpanda/items/f63a536ab76ba9f2f507
ul li:nth-child(1):before {content: "Curtis Wilbur";}
ul li:nth-child(2):before {content: "John S McCain";}
ul li:nth-child(3):before {content: "Fitzgerald";}
ul li:nth-child(4):before {content: "Lassen";}
ul li:nth-child(5):before {content: "McCampbell";}
ul li:nth-child(6):before {content: "Mustin";}
・Curtis Wilbur
・John S McCain
・Fitzgerald
・Lassen
・McCampbell
・Mustin
// 配列
$values: Curtis Wilbur, John S McCain, Fitzgerald, Lassen, McCampbell, Mustin;
$key: index($values, $value);
nth($values, $index_key)
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul{
@each $value in $values {
$key: index($values, $value);
li:nth-child(#{$key}):before{
content: '#{nth($values, $key)}';
}
}
}
// 配列
$values: Curtis Wilbur, John S McCain, Fitzgerald, Lassen, McCampbell, Mustin;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment