Sassの基本とVueへの導入方法を解説

Web

Sassとは

Sassは、一言でいうとCSSをめっちゃ書きやすくるために拡張した言語です。

Syntactically Awesome Style Sheetsの略らしく、 Googleさんで翻訳すると「文法的に素晴らしいスタイルシート」となります。

それくらい豊富な機能が追加されており、自分でCSSを書く場合には欠かせないものとなっています。

Sassを使用する場合はWebpackなどによりコンパイルする必要があります。 ここではVueCLIで使用することを目的に話を進めていきます。

Sassの記法

次のHTMLとCSSを例に考えてみます。

<div id="app">
  <h1>My App</h1>
  <ul class="list">
    <li class="list__item">First Item</li>
    <li class="list__item">Second Item</li>
    <li class="list__item">Third Item</li>
  </ul>
</div>
#app {
  margin: 0;
  padding: 0;
}
#app h1 {
  font-size: 20px;
  font-weight: normal;
}
#app .list {
  list-style: none;
  padding: 5px;
}
#app .list__item {
  border-bottom: 1px solid #ccc;
  padding: 2px 5px;
}
#app .list__item:hover {
  background-color: #f6f6f6;
}

Sassには SCSSSASS の二つの記法があります。

SCSS記法

例をSCSSで記述すると次のようになります。

#app {
  margin: 0;
  padding: 0;
  h1 {
    font-size: 20px;
    font-weight: normal;
  }
  .list {
    list-style: none;
    padding: 5px;
    &__item {
      border-bottom: 1px solid #ccc;
      padding: 2px 5px;
      &:hover {
        background-color: #f6f6f6;
      }
    }
  }
}

セレクタ{}で入れ子にすることで子要素を指定することができます。 プロパティの指定方法は大きくはCSSと変わりはありません。 &については後述します。

SASS記法

例をSASSで記述すると次のようになります。

#app
  margin: 0
  padding: 0
  h1
    font-size: 20px
    font-weight: normal
  .list
    list-style: none
    padding: 5px
    &__item
      border-bottom: 1px solid #ccc
      padding: 2px 5px
      &:hover
        background-color: #f6f6f6

SCSSとは違い、子要素はインデントで指定します。 またプロパティの指定では、末尾のセミコロン;が不要(つけるとエラー)になり、 コロン:直後にはスペースが必要になります。

SCSSの方がCSSに近いため親しみやすいですが、コード量はSASSの方が少ないのでスッキリ見えます。 次からの説明ではSCSSを中心に説明していきます。

Sassの機能

変数定義

通常のCSSでも変数を扱うことはでき、次のように:rootに設定することが多く、 呼び出し時にはvar()を使用します。

:root {
  --main-bg-color: pink;
}
body {
  background-color: var(--main-bg-color);
}

上記をSassで書き換えると次のようになります。

$main-bg-color: pink;

body {
  background-color $main-bg-color;
}

宣言も呼び出しもSassの方がよりシンプルになります。

スタイルの集約

Sassでは共通するスタイルをまとめて記載することができます。 具体的には次のようにすることができます。

span {
  border-top: 1px dotted black;
  border-left: 1px solid red;
  border-bottom: 2px dotted blue;
  border-right : 1px solid green;
  border-radius: 5px
}
span {
  border: {
    top: 1px dotted black;
    left: 1px solid red;
    bottom: 2px dotted blue;
    right: 1px solid green;
    radius: 5px
  }
}

その他にもfonttransitionなどいくつものプロパティがあるものは上のようにまとめることができます。

ネスティング

最初の例でも示したように、Sassでは親子関係がより視覚的にわかりやすくなります。 そしてより簡略化するために&を利用します。

もう一つ例を見てみましょう。

<ul class="menu">
  <li class="menu__item">
    <a href="/hoge">HOGE</a>
  </li>
  <li class="menu__item">
    <a href="/fuga">FUGA</a>
  </li>
  <li class="menu__item menu__item--active">
    <a href="/hage">HAGE</a>
  </li>
</ul>
.menu {
  display: flex;
  list-style: none;
  width: 100%;
}
.menu__item {
  border: 1px solid #ddd;
  flex: 1;
  text-align: center;
}
.menu__item > a {
  background: #333;
  display: block;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.4s;
}
.menu__item > a:hover {
  opacity: 0.8;
}
.menu__item.menu__item--active > a {
  background: teal;
  cursor: default;
  opacity: 1;
}

これをSassで書き換えてみましょう。

.menu {
  display: flex;
  list-style: none;
  width: 100%;
  &__item {
    border: 1px solid #ddd;
    flex: 1;
    text-align: center;
    > a {
      background: #333;
      display: block;
      color: #fff;
      text-decoration: none;
      transition: opacity 0.4s;
      &:hover {
        opacity: 0.8;
      }
    }
    &#{&}--active {
      > a {
        background: teal;
        cursor: default;
        opacity: 1;
      }
    }
  }
}

&によって共通する文字(menuなど)が省略されていることが分かります。 &とはどういう意味なのでしょうか。

アンパサンド(&)

&はアンパサンドといい、自身のセレクタを表します。

では&の具体的な使用例を見てみましょう。

疑似クラス・疑似要素

疑似クラスや疑似要素を表現する場合によく使用します。

a {
  &:hover { //→ a:hover
    //・・・
  }
}

クラス名の連結

上の例でもあるように&はクラス名を連結することができるため、BEMと相性が良いです。

.menu {
  &__item {  //← .menu__item
    //・・・
  }
}

この場合、.menu .menu__itemにはなりません。このようにする場合には次のようにします。

.menu {
  #{&}__item {  //← .menu .menu__item
    //・・・
  }
}

#{&}.menu .menuとなるため上の結果になります。

では上の例であるような.menu__item.menu__item--activeとするためにはどのようにすればよいのでしょうか。

これは次のように&#{&}を使用します。&#{&}.menu__item.menu__itemを表します。

.menu {
  &__item {
    &#{&}--active { //← .menu__item.menu__item-active
      //・・・
    }
  }
}

親セレクタの指定

&は前方にもセレクタを指定することができます。

.container {
  .wrapper & { //← .wrapper .container
    //・・・
  }
}

インポート

通常のCSSでもファイルのインポートは可能です。

@import url("src")

Sassでも同様に@importによってファイルのインポートが可能です。 ただし、読み込むファイルの名前に少しルールがあり、先頭にアンダーバー(_)を付けます。 例えばカレントディレクトリにある_reset.scssを読み込む場合は次のようにします。

@import 'reset'

ミックスイン

Sassでは共通する部分をミックスインを作成することで簡略化することができます。 @mixinで定義でき、呼出には@includeを使用します。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { 
  @include transform(rotate(30deg)); 
}
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

VueCLIへの導入

Sassを利用するためにはsass-loadernode-sassをインストールします。

$npm install sass-loader node-sass

あとはスタイル部分にlangを追加するだけです。

<style lang="scss">
</style>
<style lang="sass">
</style>

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました