scss記述の基本
特定要素の指定: &要素名
.tablewrap {
width: 100%;
&--red{
color: red;
}
@include sp {
ul &.,
ol &. {
width: 80%;
}
}
}
※「ul &.」と後ろにつけることで親要素の指定も可能
よく使うスタイルを定義: @mixin mixin名($引数名:初期値){スタイル指定}
@mixin base-font($size:16px, $weight:400, $color:var(--text-color)) {
font: {
size: $size;
weight: $weight;
}
color: $color;
}
※繰り返し使用するスタイルをひとまとめにできる
呼び出しは @include mixin名
外部からmixinにプロパティと値を渡す: @content
@mixin sp {
@media screen and (max-width:767px) {
@content;
}
}
※@includeでmixinを呼び出した場所にスタイルを展開することができる
ファイルの読み込み: @import "ファイル名"
アンダーバーと拡張子は省略可能
scss関数
色に関する関数
rgb($red, $green, $blue) | rgb値を16進数のカラーコードへ変換 |
mix($color1,$color2,$weight) | 2色を混ぜる |
lighten($color, $amount) | 明度を上げる |
darken($color, $amount) | 明度を下げる |
saturate($color, $amount) | 彩度を上げる |
desaturate($color, $amount) | 彩度を下げる |
grayscale($color) | グレースケールに変換 |
complement($color) | 補色を返す |
invert($color) | 色を反転する |
fade-out($color, $amount) transparentize($color, $amount) | 透明度を上げる |
fade-in($color, $amount) | 透明度を下げる |
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) | 色の指定をまとめて行う |
数値に関する関数
round($value) | 四捨五入 |
ceil($value) | 切り上げ |
floor($value) | 切り捨て |
abs($value) | 絶対値 |
min($x,$y,$z) | 最小値を返す |
max($x,$y,$z) | 最大値を返す |
リストを操作する関数
length($list) |
リストの項目数を返す
border-top:length(#ccc 1px solid);
border-top:3;
|
nth($list, $n) |
指定したリストのn番目の値を返す
padding:nth(10px 5px 15px 8px, 3);
padding:15px;
|
append($list1, $val) |
リストの最後に値を追加する
$font:arial,helvetica;
font-family:append($font, sans-self, comma)
|
zip($list1,$list2) | 複数のリストを多次元リストにまとめる |
その他開発時に知っておきたいSassのお作法など
- scssファイルの先頭にアンダースコアを付けておくと、コンパイル後にCSSファイルが生成されない
-
用途やモジュール単位でファイルを分割しチーム開発や管理をしやすくする
- 変数や定数を定義
- ベンダープレフィックスを定義
- 各コンポーネント別にファイルを分割 な