Sassを学んだので基本機能をメモした.
ルールのネスト
ルールをネストで表現できる
.item { p { margin: 0; } }
親セレクタの参照
親セレクタを &
で参照できる
a { background: #eee; &:hover { background: #ccc; } }
プロパティのネスト
プロパティもネストできる
section { border: 1px solid #999 { top-color: #a99; bottom: 0; } }
プレースホルダーセレクタ
CSSへの変換後には直接書き込まれないプレースホルダを %
で使える
%btnBase { text-align: center; text-decoration: none; } .btn { @extend %btnBase; }
変数
$val_name で変数が宣言できる
$red: #cf2d3a; .notes { color: $red; }
演算
四則演算とか剰余とかの演算ができる
.e1 { width: 500px + 80; // 580px width: 500px - 80; // 420px width: 500px * 8; // 4000px width: 500px / 8; // 62.5px width: 20px % 4; // 0px content: "hoge" + fuga; // hogefuga }
基礎関数
色々な関数が用意されている
.e1 { width: abs(-15px); // 絶対値 15px width: round(100px / 6); // 四捨五入 17px; width: ceil(100px / 3); // 切り上げ 34px; width: floor(100px / 6); // 切り下げ 16px; color: rgba(#6a5468, 0.3); // 16進RGB(色キーワード)+alpha値->RGBA rgba(106, 84, 104, 0.3); color: lighten(#000, 30%); // 明度上げる #4d4d4d color: darken(#fff, 20%); // 明度さげる #cccccc color: mix(#000, #fff, 50%); // 中間色求める gray
if文
@ifで if文が使える
$cond: true; @if $cond { .e1 { width: 15px; } }
for文
@for でfor文が使える
@for $value from 1 through 3 { .hoge_#{$value} { margin-bottom: 1px * $value; } }
for-each文
@each でfor-each文が使える
$list: a, b; @each $val in $list { .hoge_#{$val} { content: #{$val}; } }
while文
@while でwhile文が使える
$val: 20; @while $val > 20 { .hoge_#{$val} { content: #{$val}; } $val: $val - 10; }
ミックスイン
@mixin でプロパティの寄せ集めが作れる
@mixin kadomaru($value) { border-radius: $value; webkit-border-radius: $value; } .box { @include kadomaru(3px); } // .box { // border-radius: 3px; // webkit-border-radius: 3px; // }