【Sass】SCSS記法チートシート

Sassとは

「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと

ネスト構造

ネスト構造

入れ子構造(HTMLのような形)に記述

div{
  p{
    color: red;
  }
}

親セレクタ参照

親セレクタの名称を参照し記述

a{
  &:hover{
    color: red;
  }
}

ネームスペースネスト

CSSでネームスペースで記述しているもの(font-familyなど)をネスト構造で記述

div{
  font:{
    family: sans-serif;
  }
}

変数

変数

よく使う値を変数でまとめる

$color: red;
p{
  color: $color;
}

配列変数

よく使う値を配列変数でまとめる

$color: red, green, blue;
p{
  color: nth($color, 1);
}
$margin: (sp: 10px, pc: 20px);
p{
  margin: map-get($margin, pc);
}

グループ変数

よく使うスタイルをまとめる

@mixin max-screen($screen-size) {
  @media screen and (max-width: $screen-size) {
    @content;
  }
}
p{
  @include max-screen(560px){
    font-size: 14px;
  }
}

継承

インポート

分割したSCSSファイルをインポートする

@import "basic";

継承

他の場所で使用したスタイルを継承する

.item{
  color: red;
}
.item2{
  @extend .item;
}

文法

条件分岐

条件によってスタイルを変更する

$position: left;
.item{
  @if $position == 'left'{
    position: absolute;
    left: 0;
  }@else{
    position: relative;
  }
}

繰り返し

スタイルを繰り返す

@for $i from 1 through 3{
  .item-#{$i}{
    font-size: 10px * $i;
  }
}

繰り返し(配列変数)

配列変数を使用した繰り返し

$colors: red, green, blue;
@each $color in $colors{
  .item-#{$color}{
    color: $color;
  }
}

演算・色

四則演算

スタイルの中で演算

p{
  font-size: 20px / 1.5;
}

文字列結合

スタイルの中で文字列結合

$hello: 'Hello';
$world: 'World';
p::before{
  content: $hello + $world;
}

明度の調整

ベースの色の明度を調整

$color: red;
h1{
  color: lighten($color, 20%);
}
p{
  color: darken($color, 20%);
}

彩度の調整

ベースの色の彩度を調整

$color: red;
h1{
  color: saturate($color, 20%);
}
p{
  color: desaturate($color, 20%);
}

透明度の調整

ベースの色の透明度を調整

$color: red;
p{
  color: rgba($color, .5);
}

色相の調整

ベースの色の色相を調整

$color: red;
h1{
  color: adjust-hue($color, 45deg);
}

色の補色&反転

ベースの色の補色or反転にする

$color: red;
h1{
  color: complement($color);
}
p{
  color: invert($color);
}

色を混ぜる

ベースの色(2つ)を混ぜる

$color1: red;
$color2: white;
h1{
  color: mix($color1, $color2, 50%);
}

その他

コメントアウト

// 1行コメント
/* 
  複数行コメント(コンパイル後も残る)
*/

引用符の付け外し

文字列の引用符("")の付け外し

$number: "10";
h1::before{
  content: quote(Hello World);
}
p{
  margin: unquote($number) + px;
}

大文字&小文字化

$text1: "hello world";
$text2: "HELLO WORLD";
h1::before{
  content: to-upper-case($text1);
}
p::before{
  content: to-lower-case($text2);
}

絶対値を返す

h1{
  font-size: abs(-20px);
}

切り上げを返す

h1{
  font-size: ceil(20.4px);
}

切り捨てを返す

h1{
  font-size: floor(20.5px);
}

四捨五入を返す

h1{
  font-size: round(20.4px);
}
p{
  font-size: round(14.5px);
}