sassの機能
sassで出来ること
入れ子(ネスト)にできる
style.scss
header { width: 100%; height: 100px; background: #B6E3F4; h1 { text-align: center; } }
style.css
header { width: 100%; height: 100px; background: #B6E3F4; } header h1 { text-align: center; }
メデイアクエリーもネストで記述する事で、見通しが良くなります。
style.scss
body { background: #F00; @media (max-width:640px) { background: #000; } }
style.css
body { background: #F00; } @media (max-width: 640px) { body { background: #000; } }
変数が使える
style.scss
$point-pc: 1240px; $point-tablet: 960px; $point-lsp: 768px; $point-sp: 480px;
関数で繰り返し等の処理が出来る
style.scss
@for $i from 1 through 8 { $width: percentage(1 / $i); .col#{$i} { width: $width; } }
style.css
.col1 { width: 100%; } .col2 { width: 50%; } .col3 { width: 33.33333%; } .col4 { width: 25%; } .col5 { width: 20%; } .col6 { width: 16.66667%; } .col7 { width: 14.28571%; } .col8 { width: 12.5%; }
@mixinと@include を使ってスタイルを定義して、後で呼び出せる
style.scss
$point-pc: 1240px; $point-tablet: 960px; $point-lsp: 768px; $point-sp: 480px; @mixin pc { @media (max-width:$point-pc) { @content; } } @mixin tablet { @media (max-width:$point-tablet) { @content; } } @mixin lsp { @media (max-width:$point-lsp) { @content; } } @mixin sp { @media (max-width:$point-sp) { @content; } } body { background: #aaa; } @include pc { body{ background: #000; } } body{ @include tablet { background: #f00; } } body{ @include lsp { background: #0F0; } } body{ @include sp { background: #00F; } }
style.css
body { background: #aaa; } @media (max-width: 1240px) { body { background: #000; } } @media (max-width: 960px) { body { background: #f00; } } @media (max-width: 768px) { body { background: #0F0; } } @media (max-width: 480px) { body { background: #00F; } }
@importを使って複数のファイルを同時に読み込む
@import "_import1-1.scss"; @import "_import2-2.scss"; @import "_import3-3.scss";