2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Sassについて書いてみた。

Last updated at Posted at 2016-12-12

この記事はOIC ITCreate Club Advent Calendar 2016 12日目の記事です。

はじめに

ITCreate Club Advent Calendar 2016 12日目を担当させていただきます、@t-kusakabeです。
最近やたらSass書いてる気がする(するだけ)ので、Sassについて少し書いてみようかと思います。

Sassって何?

Sasstとはハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。

(wiki参照)

要するにCSSの上位互換みたいな立ち位置ですかね。

メリット

  • セレクタのネストができる
  • プログラムチックなことができる
  • 複数のcssファイルまとめることができる
  • 変数が使える

使ってみよう。

とりあえずsassを書いてみましょう。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>

  <body>
    <div class='foo'>
      <div class='foo__hoge'>
        <p class='foo__hoge__fuga'>ITCreate</p>
        <p class='foo__hoge__fuga foo__hoge__fuga--piyo'>ITCreate</p>
      </div>
    </div>
    <div class= 'bar'>
      Advent Calendar
    </div>
  </body>
</html>

https://gyazo.com/643d4391187a887dfc9ad9dec040e423

これに適当にCSSを当ててみます。

sample.css
.foo {
  background-color: red;
  height: 300px;
  color: white;
}
.foo__hoge {
  background-color: green;
}
.foo__hoge__fuga {
  font-size: 18px;
}
.foo__hoge__fuga--piyo {
  background-color: blue;
}
.bar {
  margin-top: 10px;
  background-color: red;
  height: 300px;
  color: blue;
}

https://gyazo.com/aca6740dd44e343beb2146c0ccb11ce1

こんな感じになりました。

では、実際にsassで。
sassではセレクタをネストして書くことができるので、

sample.scss
.foo {
  background-color: red;
  height: 300px;

  .foo__hoge {
    background-color: green;

    .foo__hoge__fuga {
      font-size: 18px;

      .foo__hoge__fuga--piyo {
        background-color: blue;

      }
    }
  }
}

.bar {
  margin-top: 10px;
  background-color: red;
  height: 300px;
  color: blue;
}

のようにまとめて書くことができます!
各セレクタの関係がわかりやすくなりましたね!

ここからもっとSassの機能を取り入れてみましょう。

&(アンパサンド)

Sassではこの & がすごい便利です!
親セレクタを参照することができます。

sample.scss
.foo {
  background-color: red;
  height: 300px;
  color: white;

  &__hoge {
    background-color: green;

    &__fuga {
      font-size: 18px;

      &--piyo {
        background-color: blue;

      }
    }
  }
}

.bar {
  margin-top: 10px;
  background-color: red;
  height: 300px;
  color: blue;
}

だいぶスッキリ書くことができました!!!

変数

Sassでは変数を使うことができます!
16進数で色を指定するときや、header、footerなどの幅を変数化することでわかりやすくできます。

sample.sass
$red: red;
$white: white;
$green: green;
$blue: blue;
$foo_height: 300px;
$fuga_font_size: 18px;
$bar_margin_top: 10px;

.foo {
  background-color: $red;
  height: $foo_height;
  color: $white;

  &__hoge {
    background-color: $green;

    &__fuga {
      font-size: $fuga_font_size;

      &--piyo {
        background-color: $blue;
      }
    }
  }
}

.bar {
  margin-top: $bar_margin_top;
  background-color: $red;
  height: $height;
  color: $blue;
}

変数化することで重複する部分を一元管理できたり、マジックナンバー的なものをなくせたりできます。

パーシャル

パーシャルとはCSSファイルを複数に分割することです。
機能ごとなど、複数のCSSファイルに分割することでCSSファイルの肥大化を防ぐことができます。
ファイルを分割するときにはファイル名の先頭に _ をつけます。( _ をつけることで分割されているファイルであることを明示的に示します。)
読み込む側のファイルで @import 'ファイル名'; とすることで呼び出せます。

sample.scss
@import 'variable';
@import 'bar';

.foo {
  background-color: $red;
  height: $foo_height;
  color: $white;

  &__hoge {
    background-color: $green;

    &__fuga {
      font-size: $fuga_font_size;

      &--piyo {
        background-color: $blue;
      }
    }
  }
}
_variable.scss
$red: red;
$white: white;
$green: green;
$blue: blue;
$height: 300px;
$fuga_font_size: 18px;
$bar_margin_top: 10px;
_bar.scss
.bar {
  margin-top: $bar_margin_top;
  background-color: $red;
  height: $height;
  color: $blue;
}

mixin

mixinとはいくつかの記述をまとめることができる機能です。
mixinを利用することで、再利用性が増すため、何度も同じ記述をする必要がなくなります!
@mixin で定義し、 @include で呼び出すことができます。

sample.scss
@import 'variable';
@import 'mixin';
@import 'bar';

.foo {
  color: $white;
  @include mixin;

  &__hoge {
    background-color: $green;

    &__fuga {
      font-size: $fuga_font_size;

      &--piyo {
        background-color: $blue;
      }
    }
  }
}
_bar.scss
.bar {
  margin-top: $bar_margin_top;
  color: $blue;
  @include mixin;
}
_mixin.scss
@mixin mixin {
  background-color: $red;
  height: $height;
}

まとめ

Sassを使うことでより効率的にCSSを書くことができるようになります!
他にもSassには色々な機能があります。
興味を持たれた方は是非一度使ってみてください。

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?