LoginSignup
177
201

More than 3 years have passed since last update.

@takeshisakuma(takeshi sakuma)

Sassの記法(SCSS構文)

Last updated at Posted at 2020-01-05

scssファイルの拡張子は.scssです。
SCSSのCSSへのコンパイルについてはWeb制作向けnpm-scripts をご参照ください。

※Compassは個人的に使用していないので扱いません。

output-style

SCSSをコンパイルしてCSSにした場合の形式は4種類あります。

元になるSCSS

scss
section {
  background-color: white;

  h1 {
    background-color: black;
    color: white;
  }
}

output-style:nested

css
section {
  background-color: white; }
  section h1 {
    background-color: black;
    color: white; }

output-style:expanded

css
section {
  background-color: white;
}

section h1 {
  background-color: black;
  color: white;
}

output-style:compact

css
section { background-color: white; }

section h1 { background-color: black; color: white; }

output-style:compressed

css
section { background-color: white; }section h1 { background-color: black; color: white; }

ネスト

CSSの継承をネストでまとめられます。

scss
div {
  background-color: gray;

  p {
    padding: 20px;

    span {
      color: red;
    }

  }

}

↓コンパイル

css
div {
  background-color: gray;
}

div p {
  padding: 20px;
}

div p span {
  color: red;
}

子セレクタ、隣接セレクタのネスト

scss
main {

  section {
    padding: 40px;

    +section {
      margin-top: 40px;
    }

    >h1 {
      font-size: 26px;
      font-weight: bold;
    }

  }

}

↓コンパイル

css
main section {
  padding: 40px;
}

main section+section {
  margin-top: 40px;
}

main section>h1 {
  font-size: 26px;
  font-weight: bold;
}

mediaのネスト

scss
section {
  margin: 0 auto;
  width: 1200px;

  @media screen and (max-width:640px) {
    width: 100%;
  }
}

↓コンパイル

css
section {
  margin: 0 auto;
  width: 1200px;
}

@media screen and (max-width: 640px) {
  section {
    width: 100%;
  }
}

&記号(アンパサンド)

疑似クラス

scss
.child {
  color: red;

  &:hover {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.child:hover {
  color: blue;
}

疑似要素

scss
.child {
  color: red;

  &::after {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.child::after {
  color: blue;
}

複数クラス

scss
.child {
  color: red;

  &.brother {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.child.brother {
  color: blue;
}

親要素指定

sass
.child {
  color: red;

  .parent & {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.parent .child {
  color: blue;
}

クラス名変更

scss
.child {
  color: red;

  &__modifed {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.child__modifed {
  color: blue;
}

ふくろうセレクタ

scss
.child {
  color: red;

  &+& {
    color: blue;
  }

}

↓コンパイル

css
.child {
  color: red;
}

.child+.child {
  color: blue;
}

コメント

scssのみのコメント

sass
// コメント

scssだけでなくcssにも残すコメント

コンパイル形式がcompressedのときはcssには残りません。

scss
/* コメント */

scssだけでなくcssにも残すコメント

コンパイル形式がcompressedのときもcssに残ります。

scss
/*! コメント */

演算

sass
$boxHeight: 400px;

.box {
    width: 200px + 200;
    height: $boxHeight / 4;
}

↓コンパイル

css
.box {
  width: 400px;
  height: 100px; 
}

変数

よく使う値をあらかじめ変数化しておくと、変更時に一括で変更できます。
色、フォントなどに便利です。

変数名のハイフンとアンダースコア

変数名に含まれるハイフン (-) と、アンダースコア (_) は同じものとして扱われます。
例：$main-color という名前で定義した変数は、$main_color という名前でも参照できます。
(Mixin の名前や関数の名前でも同様)

scss
/* 変数設定 */
$width:500px;
$color:#aa443f;

/* 変数の使用 */
#maincontainer{
  width:$width;
  color:$color;
}

!default

変数にデフォルト値を割り当てます。
(変数が定義されてないか値が null の場合に値が有効になります)

scss
$boxRadius:10px !default;

.box1 {
  $boxRadius: 20px;
  width: 100px;
  border-radius: $boxRadius;
}

.box2 {
  width: 100px;
  border-radius: $boxRadius;
}

↓コンパイル

css
.box1 {
  width: 100px;
  border-radius: 20px; 
}

.box2 {
  width: 100px;
  border-radius: 10px; 
}

変数のデータタイプの判別

sassのデータ型 意味
Number型 数値
Color型 色
String型 文字列
Boolean型 真偽
List型 リスト
Null型 空
scss
$caution:red;

.dataType {
  content: quote("$cautionColorのデータ型は"+type-of($caution));
}

↓コンパイル

css
.dataType {
  content: "$cautionColorのデータ型はcolor"; 
}

関数

関数の自作

自分の好きな関数を定義できます。

scss
@function 自作関数名($引数){
  @return 戻り値;
}
sass
@function Double($value) {
  @return round($value * 2);
}

.box{
  width: Double(300px);
}

数値系

abs()

数値の絶対値を取得します。

scss
$value:-15px;

.box {
  margin: abs($value);
}

↓コンパイル

css
.box {
  margin: 15px;
}

round()

数値の小数点以下を四捨五入します。

scss
$value:15.4px;

.box {
  margin: round($value);
}

↓コンパイル

css
.box {
  margin: 15px;
}

ceil()

数値の小数点以下を切り上げます。

scss
$value:15.1px;

.box {
  margin: ceil($value);
}

↓コンパイル

css
.box {
  margin: 16px;
}

floor()

数値の小数点以下を切り捨てます。

scss
$value:15.9px;

.box {
   margin: floor($value);
}

↓コンパイル

css
.box {
  margin: 15px;
}

色系

rgba()

色に加えて透明度を指定してRGBA形式に変換します。

scss
.box {
  background-color: rgba(red, .3);
}

↓コンパイル

css
.box {
  background-color: rgba(255, 0, 0, 0.3);
}

lighten()

色を明るくします。

scss
.box {
  background-color: lighten(red, 20%);
}

↓コンパイル

css
.box {
  background-color: #ff6666;
}

darken()

色を暗くします。

scss
.box {
  background-color: darken(red, 20%);
}

↓コンパイル

css
.box {
  background-color: #990000;
}

mix()

2種類の色の間の色を抽出します。

scss
.box {
  background-color: mix(red, blue, 50%);
}

↓コンパイル

css
.box {
  background-color: purple;
}

saturate

彩度を上げます。

scss
.box {
  background-color: saturate(gray, 50%);
}

↓コンパイル

css
.box {
  background-color: #c04141;
}

desaturate

彩度を下げます。

scss
.box {
  background-color: desaturate(red, 50%);
}

↓コンパイル

css
.box {
  background-color: #bf4040;
}

adjust-hue

色相の変更ができます。

scss
.box {
  background-color: adjust-hue(red, 180deg);
}

↓コンパイル

css
.box {
  background-color: cyan;
}

invert

色の反転を行います。

scss
.box {
  background-color: invert(red);
}

↓コンパイル

css
.box {
  background-color: cyan;
}

grayscale

グレースケール化します。

scss
.box {
  background-color: grayscale(red);
}

↓コンパイル

css
.box {
  background-color: gray;
}

complement

補色に変更します。

scss
.box {
  background-color: complement(red);
}

↓コンパイル

css
.box {
  background-color: cyan;
}

他

nth()

指定したN番目の値を取得します。

scss
$lists:"red","blue","yellow";

.box {
  background-color: nth($lists, 2);
}

↓コンパイル

css
.box {
  background-color: "blue";
}

インターポレーション (#{})

変数を通常使えないところで使う

sass
$img_directory:"/img/bg/";

.box {
    background-image: url("#{$img_directory}background_box.jpg");
}

↓コンパイル

css
.box {
  background-image: url("/img/bg/background_box.jpg");
}

演算しない

scss
$value1:500px;
$value2:200px;

.box {
  width: #{$value1} - #{$value2};
}

↓コンパイル

css
.box {
  width: 500px - 200px;
}

演算できない場所で演算する

scss
@for $value from 1 to 5 {
  .mt_#{$value * 10} {
    margin-top: $value * 10;
  }
}

↓コンパイル

css
.mt_10 {
  margin-top: 10;
}

.mt_20 {
  margin-top: 20;
}

.mt_30 {
  margin-top: 30;
}

.mt_40 {
  margin-top: 40;
}

アンクォート

""を無くすことができます。

scss
$color:"red";

.box {
  background-color: #{$color};
}

↓コンパイル

css
.box {
  background-color: red;
}

mixinとextend

mixin

mixinを使用することで引数を使用可能です。
mixinでスタイルを定義して、includeで呼び出します。

scss
//mixin作成
@mixin box {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
}


//mixin使用
.box--large {

  //mixinの使用
  @include box;

  //mixinのスタイルの上書き
  width: 200px;
}

↓コンパイル

css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
  width: 200px;
}

引数を使ったmixin

scss
//引数を使ったmixinの作成
@mixin box($width, $height) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}

//mixinの使用
.box--large {
  //mixin使用時に値を代入
  @include box(200px, 200px);
}

↓コンパイル

css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}

引数に初期値を設定する

scss
//引数を使ったmixinの作成
@mixin box($width:200px, $height:200px) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}

//mixinの使用
.box--large {
  //mixinの使用　()は省略可能
  @include box();
}

↓コンパイル

css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}

mixinのスコープ

ルールセット内で書くとその中でしか利用できなくなります。

scss
.parent {
  @mixin box {
    background-color: red;
    width: 200px;
    height: 200px;
   }

   .child {
     //スコープ内なのでコンパイルできる
     @include box;
   }
}

.others {
  //スコープ外なのでmixinが参照できずエラーになる
  @include box;
}

mixinにコンテントブロックを渡す

scss
@mixin border {
  .parent & {
    @content;
  }
}

.child {
  .grandChild {

    @include border {
      border: 1px solid black;
    }

  }

}

↓コンパイル

css
.parent .child .grandChild {
  border: 1px solid black;
}

extend

指定したセレクタのスタイルを継承します。
子孫セレクタ、子セレクタ、隣接セレクタなど複数のパターンで成り立つセレクタには使えません。
※media内ではextendは使用できません。

extend用のクラス

sass
//extend用のクラス作成
.button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

//extendの使用
.button--link {

  //buttonクラスを継承
  @extend .button;

  //buttonクラスのスタイルの上書き
  background-color: blue;

  //スタイルの追加
  font-weight: bold;
}

↓コンパイル

css
.button, .button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }

.button--link { background-color: blue; font-weight: bold; }

extend用のクラスをcssには展開しない場合

.を%に変えると、展開しません。

scss
%button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

.button--link {
  //buttonクラスを継承
  @extend %button;

  //buttonクラスのスタイルの上書き
  background-color: blue;

  //スタイルの追加
  font-weight: bold;
}

↓コンパイル

css
.button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }

.button--link { background-color: blue; font-weight: bold; }

メディアクエリ

ブレイクポイントの変数化

scss
$breakpointMaxSP: 640px;
$breakpointMinTAB: $breakpointMaxSP+1;
$breakpointMaxTAB: 980px;
$breakpointMinPC: $breakpointMaxTAB+1;

mixin作成

scss
@mixin maxScreen($breakPoint) {
  @media screen and (max-width: $breakPoint) {
    @content;
  }
} 

@mixin minScreen($breakPoint) {
  @media screen and (min-width: $breakPoint) {
    @content;
  }
}

@mixin minMaxScreen($minBreakPoint, $maxBreakPoint) {
  @media screen and (min-width: $minBreakPoint) and (max-width: $maxBreakPoint) {
    @content;
  }
}

mixin使用

scss
.box {

  @include maxScreen($breakpointMaxSP) {
    font-size: 16px;
  }

  @include minMaxScreen($breakpointMinTAB, $breakpointMaxTAB) {
    font-size: 18px;
  }

  @include minScreen($breakpointMinPC) {
    font-size: 20px;
  }

}

↓コンパイル

css
@media screen and (max-width: 640px) {
  .box {
    font-size: 16px;
  }
}

@media screen and (min-width: 641px) and (max-width: 980px) {
  .box {
    font-size: 18px;
  }
}

@media screen and (min-width: 981px) {
  .box {
    font-size: 20px;
  }
}

制御構文

each

配列の要素に対して繰り返し処理を実行する

scss
@each $変数名 in リスト{
  //スタイルなど
 }
scss
$boxList: box1,box2,box3,box4;

@each $box in $boxList {

  .body-#{$box} {
    background-image: url(/img/bgimg_#{$box}.jpg);
  }

}

↓コンパイル

css
.body-box1 {
  background-image: url(/img/bgimg_box1.jpg); }

.body-box2 {
  background-image: url(/img/bgimg_box2.jpg); }

.body-box3 {
  background-image: url(/img/bgimg_box3.jpg); }

.body-box4 {
  background-image: url(/img/bgimg_box4.jpg); }

if

条件分岐

scss
$isSubpage:true;

@if $isSubpage {
  .box {
    background-color: red;
  }
}

↓コンパイル

css
.box {
  background-color: red;
}
scss
$pageType:1;

@mixin boxBackgroundColor {
  @if $pageType==1 {
    background-color: red;
  }

  @else if $pageType==2 {
    background-color: blue;
  }

  @else {
    background-color: gray;
  }

}

.box {
  @include boxBackgroundColor;
}

↓コンパイル

css
.box {
  background-color: red;
}
ifで使える比較演算子 意味
A==B AとBが同じ
A>B AはBより大きい
A<B AはBより小さい
A>=B AはB以上
A<=B AはB以下
A!=B AとBは等しくない
ifで使える論理演算子 意味
and かつ
or または
not 否定

while

forより複雑な繰り返し処理を行えます。

scss
@while 繰り返しを継続する条件 {
  //スタイルなど
  //繰り返し方法を指定
}

```:scss
$value:100;

@while $value>0 {
  .mt#{$value} {
    margin-top: $value;
  }

  $value:$value - 10;
}

↓コンパイル

css
.mt100 {
  margin-top: 100; }

.mt90 {
  margin-top: 90; }

.mt80 {
  margin-top: 80; }

.mt70 {
  margin-top: 70; }

.mt60 {
  margin-top: 60; }

.mt50 {
  margin-top: 50; }

.mt40 {
  margin-top: 40; }

.mt30 {
  margin-top: 30; }

.mt20 {
  margin-top: 20; }

.mt10 {
  margin-top: 10; }

for

繰り返し処理を行えます。

for～through

throughは終了の数値を含みます。

scss
@for $変数名 from 開始の数値 through 終了の数値{
  //スタイルなど
}
scss
@for $value from 1 through 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
   }
}

↓コンパイル

css
.box_1 {
  margin-bottom: 50px;
}

.box_2 {
  margin-bottom: 100px;
}

.box_3 {
  margin-bottom: 150px;
}

.box_4 {
  margin-bottom: 200px;
}

.box_5 {
  margin-bottom: 250px;
}

for～to

toは終了の数値を含みません。

scss
@for $変数名 from 開始の数値 to 終了の数値{
  //スタイルなど
}
scss
@for $value from 1 to 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
  }
}

↓コンパイル

css
.box_1 {
  margin-bottom: 50px;
}

.box_2 {
  margin-bottom: 100px;
}

.box_3 {
  margin-bottom: 150px;
}

.box_4 {
  margin-bottom: 200px;
}

デバッグ

CSSには何も出力せずに、Terminalに値を出力できます。

debug

scss
// src/scss/style.scssの1行目に書いた場合
@debug "debug test";

↓コンパイル

terminal
src/scss/style.scss:1 DEBUG: debug test

warn

scss
// src/scss/style.scssの1行目に書いた場合
@warn "debug test";

↓コンパイル

terminal
WARNING: debug test
         on line 1 of src/scss/style.scss

モジュールシステム

他の.scssファイルの内容を読み込む機能です。
_で始まるSCSSファイルは個別のCSSファイルを生成しません。(パーシャル)

import

将来的に廃止予定です。

名前空間を持ちません(グローバル)
(変数、関数、mixinはどのファイルからもアクセスできる)
↓
依存モジュールの把握が困難です。

css

// _button.scssファイルをインポート
@import "_button.scss"; 

// _button.scssファイルをインポート(拡張子省略)
@import "_button";

 //複数scssファイルのインポート(拡張子省略)
@import "_button","_box","_text";

//glob(objectフォルダの中のscssを全てインポート)
@import "object/*.scss"

use

importを置き換える機能です。
ファイル単位で名前空間を持ちます
(変数、関数、mixinは読み込んだファイル内でしかアクセスできません)
↓
依存モジュールの把握が容易です。

種類 書き方
変数 <namespace>.<variable>
関数 <namespace>.<function>
mixin <namespace>.<mixin>

importの挙動(useとの比較用ファイル)]

サンプルファイル 内容
main.scss _var.scssと_sub.scssを読む
_var.scs 変数を定義
_sub.scss _var.scssで定義した変数を使う
main.scss
@import "var";
@import "sub";
_var.scss
$mainColor:"red";
_sub.scss
html {
  background-color: $mainColor;
}

↓コンパイル

main.scss
html{
  background-color:"red"
}

useの挙動

importと置き換えただけの場合

サンプルファイル名 内容
main.scss _var.scssと_sub.scssを読む
_var.scss 変数を定義
_sub.scss _var.scssで定義した変数を使う

_var.scssで定義した変数を_sub.scssで使えないのでコンパイルでエラーになります。

main.scss
@use "var";
@use "sub";
_var.scss
$mainColor:red;
_sub.scss
html {
  background-color: $mainColor;
}

↓コンパイル

エラー

importをuseに変更して、名前空間も指定した場合

サンプルファイル名 内容
main.scss _sub.scssを読む
_var.scss 変数を定義
_sub.scss _var.scssを読み込み、_var.scssで定義した変数を使う

_var.scssで定義した変数を_sub.scssで使えるのでコンパイルできます。

main.scss
@use "sub";
_var.scss
$mainColor:red;
_sub.scss
@use "var";

html {
  background-color: var.$mainColor;
}

↓コンパイル

main.css
html{
  background-color:red
}

useの名前空間

名前空間の名前はデフォルトではファイル名になりますが、任意の名前をつける事も可能です。

as

独自の名前空間を持たせられます。

サンプルファイル名 内容
main.scss _sub.scssを読む
_var.scs 変数を定義
_sub.scss _var.scssを読み込み、_var.scssで定義した変数を使う
main.scss
@use "sub";
_var.scss
$mainColor:red;
_sub.scss
@use "var" as v;

html {
  background-color: v.$mainColor;
}

↓コンパイル

main.css
html{
  background-color:red
}
as *

名前空間の指定をせずに呼び出せるようになります。(グローバル)

サンプルファイル名 内容
main.scss _sub.scssを読む
_var.scss 変数を定義
_sub.scss _var.scssを読み込み、_var.scssで定義した変数を使う
main.scss
@use "sub";
_var.scss
$mainColor:red;
_sub.scss
@use "var" as *;

html {
    background-color: $mainColor;
}

↓コンパイル

main.css
html{
  background-color:red
}
as *のエラー

同じ名前の変数、関数、mixinが読み込まれるとバッティングしてエラーになります。

サンプルファイル名 内容
main.scss _sub.scssを読む
_var.scss 変数を定義
_var2.scss 変数を定義
_sub.scss _var.scssと_var2.scssを読み込み、_var.scssと_var2.scssで定義した変数を使う
main.scss
@use "sub";
_var.scss
$mainColor:red;
_var2.scss
$mainColor:blue;
_sub.scss
@use "var" as *;
@use "var2" as *;

html {
  background-color: $mainColor;
}

↓コンパイル

エラー

useのdefault

方式 !defaultフラグを持った変数を上書きするとき
import 変数をグローバルに定義する必要がある
use ファイル読み込み時にwithを使って変数を上書きできる(グローバルな名前空間を汚染しない)
font.scss
$fontSizeNormal: 1rem !default;
$lineHeightNormal: 1.5 !default;

@mixin textLarger () {
  font-size: $fontSizeNormal * 2;
  line-height: $lineHeightNormal* 1.5;
}
main.scss
@use "font" with (
  $fontSizeNormal: 1.6rem,
  $lineHeightNormal: 1.6
);

.textLarge {
  @include font.textLarger();
}

↓コンパイル

main.scss
.textLarge{
  font-size:3.2rem;
  line-height:2.4;
}

プライベート

名前が「-」か「_」ではじまる変数、関数、mixinはプライベートになります。
変数、関数、mixinは宣言されたファイル内でしかアクセスできません。

サンプルファイル名 内容
main.scss _sub.scssを読む
_var.scss 変数を定義
_sub.scss _var.scssを読み込み、_var.scssで定義した変数を使う
main.scss
@use "sub";
_var.scss
$_mainColor:red;
_sub.scss
 @use "var";

 html {
     background-color: var.$mainColor;
 }

↓コンパイル

エラー

forward

useでは、CSS フレームワークなどで変数や関数が見えなくなってしまいます。
ほかのモジュールの変数、関数、mixinを読み込んでエクスポートできます。

useとの違い

forwardを宣言しているファイル内ではそのモジュールのメンバーを参照できません。

サンプルファイル名 内容
main.scss _sub.scssと_var2.scssを読み込み(@use)、_var2.scssで定義した変数を使う
_var.scss 変数を定義
_var2.scss 変数を定義
_sub.scss _var.scssを読み込み(@use)、_var2.scssを読み込み(@forward)、_var.scssで定義した変数を使う(_var2.scssの変数は使えない)
main.scss
@use "sub";

p {
  color: sub.$subColor;
}
_var.scss
$mainColor:red;
_var2.scss
$subColor:blue;
_sub.scss
@use "var";
@forward "var2";

html {
  background-color: var.$mainColor;
}

↓コンパイル

main.css
html {
  background-color: red
}

p {
  color: blue
}

show

どのメンバーをエクスポートするかを選べます。
※それ以外のメンバーはエクスポートされません

main.scss
@use "sub";

p {
    color: sub.$subColor;
}
_var.scss
$mainColor:red;
_var2.scss
$subColor:blue;
_sub.scss
@use "var";
@forward "var2" show $subColor;

html {
  background-color: var.$mainColor;
}

↓コンパイル

main.css
html {
  background-color: red
}

p {
  color: blue
}

hide

プライベートにしたいメンバーを除外できます。

main.scss
@use "sub";

p {
  color: sub.$subColor;
}
_var.scss
$mainColor:red;
_var2.scss
$subColor:blue;
_sub.scss
@use "var";
@forward "var2" hide $subColor;

html {
  background-color: var.$mainColor;
}

↓コンパイル

エラー

177
201
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
177
201