Sass 入門

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

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

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

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

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

 

Sass の導入

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

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

• Ruby
• node.js + gulp

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

Laravel Elixir の使い方（Sassのコンパイル編）

 

Sass の主な機能

ネスト（入れ子）

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

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

 
Sass（SCSS記法）

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

 

↓（コンパイル）

 
CSS

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

 

変数

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

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

 
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;
}

 

演算

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

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

 
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 を１回で書くことができます。変数と組み合わせることで、１２分割の 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 の基本的な機能については以上です。

 

 

-周辺知識