@for
Sass
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
CSS
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
(Source: sass-lang.com)
Sass
.sidebar {
/* sidebarのスタイル */
}.onsalesidebar {
@extend .sidebar;
background-color: #FFA500;
}
CSS
.sidebar, .onsalesidebar {
/* sidebarのスタイル */
}.onsalesidebar {
background-color: #FFA500;
}
メモ / Sass
階層イメージ
project/
sample.html
sass/
style.scss
css/
style.css
js/
images/
Users:[project] [ユーザー名]$ mkdir sass Users:[project] [ユーザー名]$ mkdir css Users:[project] [ユーザー名]$ cd sass Users:[project] [ユーザー名]$ echo > style.scss
.scssを.cssにコンパイルする場合
Users:[project] [ユーザー名]$ sass sass/style.scss css/style.css
単一ファイル（.scss）を監視する場合
Users:[project] [ユーザー名]$ sass --watch style.scss style.css
ディレクトリ内の複数ファイル（.scss）を監視する場合
Users:[project] [ユーザー名]$ sass --watch sass:css
変更監視は.scssの変更をSassが自動的にcssに反映するコマンド
