officeFITPlus blog

ファイナンシャルプランナー資格を持つエンジニアのお金やIT関連の備忘録
2023-03-21

Sass（Scss）記述方法まとめ

CSS
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ファイルが生成されない
  • 用途やモジュール単位でファイルを分割しチーム開発や管理をしやすくする
    • 変数や定数を定義
    • ベンダープレフィックスを定義
    • 各コンポーネント別にファイルを分割 な

CSS