Scss,Sassについて

date: 2020-08-14

Scss,Sassについて

Scss及びSassとはCSSプリプロセッサの1つ。 Nestの書き方に違いがあるがここではScssについて記述します。

変数宣言

$で変数を宣言できる。

例

$black: #000;
body {
  color: $black;
}

Nest

body {
  p {
    color: blue;
  }

  &:hover {
    color: red;
  }
}

/* コメント */
// コメント

以下のコメントの場合はcssにも残る

/*! コメント */

別のファイルを参照

@importは廃止予定なので@useを使う。

@use 'ファイル名`;

mixin

引数が使え、複数箇所で同じスタイルを使いまわせる。

下の例の場合「.button」の中に「baseButton」の内容が加わる。

@mixin baseButton($borderSize:1px, $borderType:solid, $borderColor:#ccc){
    border:$borderSize $borderType $borderColor;
}
.button{
    @include  baseButton($borderColor:#f90);
}

extend

引数は使えないが複数箇所で同じスタイルを使いまわせる。

下の例の場合「.button, .extend-button」というセレクタで
「.button」の内容が「.extend-button」に反映される。
「button」が残るので注意

.button {

}

.extend-button {
  @extend .button;
}

関数

自作関数

@function 自作関数名($引数){
  @return 戻り値;
}

.button{
  width: 自作関数名(引数);
}

数値に関する関数

floor(1.5)
ceil(1.5)
round(1.5)
abs(1.5)
min(1, 2, 3)
max(1, 2, 3)
percentage(.5)
random(3)

色に関する関数

rgb(100, 100, 100)
rgba(100, 100, 100, .5)
darken($color, 10%) //色を暗くする
lighten($color, 10%) //色を明るくする
mix($color1, $color2, 50%) //2種類の色の間の色を返す
saturate($color, 50%) //彩度を上げる
desaturate($color, 50%) //彩度を下げる
adjust-hue($color, 180deg) //色相の変更
invert($color) //色の反転
grayscale($color) //グレースケール化
complement($color) //補色

その他

nth($lists, 2) //N番目の値を取得

前の記事 Gitについて