Sass 入門

2021/12/13

少し前まで CSS の記述といえば、style.css のようなファイルに直接スタイルシートを書いていく方法が主流でした。

しかしこれだと、Webサイトが巨大化していくにつれて保守性に欠けてしまいます。

そこで登場したのが Sass や LESS、Stylus といったメタ言語です。

POINT!

Sass や LESS、Stylus は CSS という言語を扱う上位言語としてメタ言語と呼ばれます。

Laravel をインストールすると、ルートに「gulpfile.js」があります。gulpfile.js にはデフォルトで sass のコンパイルが記述されています。そのためか Laravel を使う人は Sass を使う人が多いですね。

チェックBootstrap4 本体のメタ言語が Less から Sass に変わりました。
CSS のプリプロセッサーとしては Sass 一択として考えてもいいかもしれません。

今回は、Sass に焦点を当ててエントリーをします。

 

Sass の導入

Sass はプリプロセッサーを記述する言語です。なので、実際の CSS に書き換えるための作業として「コンパイル」が必要になります。

POINT!

Sass は CSS の文法的処理(プロセス)の前段階として関数や処理を行うためにプリプロセッサーと呼ばれたりします。

コンパイルをする方法としては大きく二つやり方があります。

  • Ruby
  • node.js + gulp

Laravel を使う場合は「node.js + gulp」でコンパイルします。

 

Sass の主な機能

ネスト(入れ子)

例)ボタンとボタンの中のテキストをCSSで書く

⇒ 素のCSSだと毎回、頭に .btn とつける必要があります。Sass だと入れ子で書き、自動付与できます。

 
Sass(SCSS記法)


.btn {
  display: block;
  span {
    display: inline-block;
  }
}

 

↓(コンパイル)

 
CSS


.btn {
 display: block;
}
.btn span {
 display: inline-block;
}

POINT(1)

Sass の記述は二種類あります。
Sass記法・・・インデント型(インデントでネストする)
SCSS記法・・・カッコ型(カッコの中に記述することでネストする)

可読性の点から現在、SCSS記法が主流となっています。

POINT(2)

ネストの記述で記述は楽になりましたが、やりすぎると見通しの悪いコードになってしまいます。ネストに関しては2階層までにしておくのがおススメ。

 

変数

サイト全体の色や数値を先にまとめて書いておき、呼び出すような使い方ができます。

後から修正がはいっても、一括で行えるので便利です。

 
Sass(SCSS記法)


$pjcolor-01: #52B2C4;
$pjcolor-02: #FFFFFF;

.btn {
 background-color: $pjcolor-01;
 span {
  color: $pjcolor-02;
 }
}

 

↓(コンパイル)

 
CSS


.btn {
background-color: #52BC4;
}
.btn span {
color: #FFFFFF;
}

 

演算

コンパイル時の演算が可能になります。

変数と併用することで、12分割していたグリッドを10分割に変更するなどの使い方ができます。

 
Sass


$split-grid: 12;

.col-2 {
  flex: 0 0 100% / $split-grid * 2;
  max-width: 100% / $split-grid * 2;
}

 

↓(コンパイル)

 
CSS


.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

 

ループ処理

@each などを使うことで連続した CSS を1回で書くことができます。変数と組み合わせることで、12分割の CSS を自動出力するような使い方ができます。

繰り返し中に if 文を使って分岐するなども可能です。

 
Sass


$split-grid: 12;

@for $i from 1 through $split-grid {
  .col-$i {
    flex: 0 0 100% / $split-grid * $i;
    max-width: 100% / $split-grid * $i;
  }
}

 

↓(コンパイル)

 
CSS


.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}
.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

/* 3~11まで省略 */

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

 

継承

@extend を使用することでセレクタのスタイルを継承することができます。

継承したうえでスタイルの追加や上書きも行うことができます。


.btn{
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 3px;
  background-color: lightgray;
}

.btn-submit{
  @extend .btn; // .btnのスタイルを継承
  background-color: lightblue;  // スタイルの上書き
  font-size: 1.5em;  // スタイルの追加
}

 

mixin

mixin とは Sass における関数のようなもので、値を渡してスタイルを返します。

「@mixin」の後ろに名前をつけ、任意で引数を使う場合は「$」の後に名前をつけます。

呼び出す際には「@include」の後にmixin名をつけて呼び出します。

 
Sass



@mixin ctabutton($background, $color) {
 background: $background;
 color: $color;
}

.box{
  .button1{
    @include ctabutton(red, white);
  }
  .button2{
    @include ctabutton(#0060e6, #fcfcfc)
  }
}

 

↓(コンパイル)

 
CSS


.box .button1 {
  background: red;
  color: white;
}
.box .button2 {
  background: #0060e6;
  color: #fcfcfc;
}

 

インポート

変数や mixin は、別ファイルにして外部ファイルとして読み込むこともできます。

これは、「style.css」「about.css」のように CSS ファイルを複数持つ場合に、共通で使いまわすことができます。

読み込む際には、「@import」の後にファイルパスを記述します。


@import "./mixins.scss"

 
Sass の基本的な機能については以上です。

フロントエンド おススメ教材(by Udemy)
動画でプログラミング学習!ドットインストール、Schoo、Udemyのどれがいい?
 
Udemyを使ったLaravel学習方法

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。
4.5(4295)

 

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-周辺知識