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;
width: 500px - 80;
width: 500px * 8;
width: 500px / 8;
width: 20px % 4;
content: "hoge" + fuga;
}
基礎関数
色々な関数が用意されている
.e1 {
width: abs(-15px);
width: round(100px / 6);
width: ceil(100px / 3);
width: floor(100px / 6);
color: rgba(#6a5468, 0.3);
color: lighten(#000, 30%);
color: darken(#fff, 20%);
color: mix(#000, #fff, 50%);
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);
}