Sassの使い方

１. Sassとは

SassとはCSSの機能を拡張した言語です。Sassを利用することで、CSSを効率的に書けるようになります。SassはCSSに非常に似ていますが異なる言語です。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。また、SassにはSASS記法とSCSS記法の2種類の書き方があります。
今回は、SCSS記法について書いていきます。※拡張子も.scssになるので気をつけてください。

２. Sassのメリット

Sassには以下のようなメリットがあります。

• 記述の簡略化ができる
• 同じ値を使い回すことができる
• 引数を使った応用ができる

記述の簡略化ができる

親子関係にあるセレクタを入れ子にして書くことができます。
CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassはネストさせることで、同じ親のセレクタをまとめることができます。
つまり、htmlを書くときのような思考でかけるので、書きやすい。
例えば以下のような感じ。

sample.html

<div class="block">
  <h1 class="title">Hello world</h1>
  <p class="text">Sass is <span>greate!</span>
</div>

sample.scss

.block {
   background-color: #000;
  .title {
    color: #FFF;
    font-size: 70px;
    text-align: center;
  }
  .text {
    font-size: 15px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
    }
  }
}

同じ値を使い回すことができる

変数

Sassでは、変数を使用することができます。
何度も使用する値を変数を定義することで、変数名で何度も使用することができます。
変数を定義するには、$変数名: 値;のように記述します。

sample.scss

$mainColor: #FFEC00;  /* #FFEC00という色をmainColorという変数名で定義する */

mixin

mixinとは、まとまったスタイルを定義することができる機能です。
変数は値を定義するものでしたが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名() {}のように記述します。

sample.scss

@mixin mainContents1 {
  border-radius: 50%;
  margin: 10px;
  text-align: center;
  height: 64px;
  width: 64px;
  background-color: #FFF;
}

こちらのmixinは、@includeで呼び出します。

sample.scss

.main{
 @include mainContents1;
}

一度の定義で使いまわせるので、本当に便利ですよね。

引数を使った応用ができる

先ほど紹介した変数や、mixinを見ると、使いたくなりますよね。
しかし、定義しまくっていると、似たような中身ができてしまいます。
こんな感じ

sample.scss

@mixin mainContents1{
  border-radius: 50%;
  margin: 10px;
  text-align: center;
  height: 64px;
  width: 64px;
  background-color: #FFF; /*  background-colorが#FFFか#EEEかの違い */
}

sample.scss

@mixin mainContents2{
  border-radius: 50%;
  margin: 10px; 
  text-align: center;
  height: 64px;
  width: 64px;
  background-color: #EEE; /*  background-colorが#FFFか#EEEかの違い */
}

記述量は減るのでメリットはあるのですが、もっといい方法でスマートにできます。
そこで出てくるのがみんな大好き引数です。
こんな感じ

sample.scss

@mixin mainContents1($color) { /* 関数 */
  border-radius: 50%;
  margin: 10px;
  text-align: center;
  height: 64px;
  width: 64px;
  background-color: $color; /* (#FFF)や(#EEE)が場合に応じて入る */
}

sample.scss

.main1{
 @include mainContents1(#FFF); /*  #FFFと記述するだけでいい */
}
.main2{
 @include mainContents1(#EEE); /*  #EEEと記述するだけでいい */
}

３. 最後に

sassを最近、progateで復習しましたので、書いてみました。
今度は、今勉強しているLaravelでなんか書きます。