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

Sassとは

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

SCSS記法とは

SCSS記法とはSassの書き方の1つで、SassにはSCSS記法とSASS記法があり、SCSS記法の方がCSSと互換性があるので使われることが多い。拡張子は.scssにする。

ネスト構造

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

SCSS

div{
  p{
    color: red;
  }
}

親セレクタ参照

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

SCSS

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

ネームスペースネスト

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

SCSS

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

変数

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

SCSS

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

配列変数

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

SCSS

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

グループ変数

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

SCSS

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

継承

インポート

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

SCSS

@import "basic";

継承

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

SCSS

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

文法

条件分岐

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

SCSS

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

繰り返し

スタイルを繰り返す

SCSS

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

繰り返し(配列変数)

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

SCSS

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

演算・色

四則演算

スタイルの中で演算

SCSS

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

文字列結合

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

SCSS

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

明度の調整

ベースの色の明度を調整

SCSS

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

彩度の調整

ベースの色の彩度を調整

SCSS

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

透明度の調整

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

SCSS

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

色相の調整

ベースの色の色相を調整

SCSS

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

色の補色&反転

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

SCSS

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

色を混ぜる

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

SCSS

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

その他

コメントアウト

コメントを残す

SCSS

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

引用符の付け外し

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

SCSS

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

大文字&小文字化

文字列の大文字or小文字化

SCSS

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

絶対値を返す

数値の絶対値を返す

SCSS

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

切り上げを返す

数値の切り上げを返す

SCSS

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

切り捨てを返す

数値の切り捨てを返す

SCSS

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

四捨五入を返す

数値の四捨五入を返す

SCSS

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