Sassの基本的な使い方

f:id:mutsumi-takahashi:20180627170848j:plain こんにちは。デザイナーの高橋です。

半年前ぐらいに、現行のサービスをcssからSassにリファクタリングをしたのですが、 あんなにたくさん書いたコード内容も時が過ぎれば(やや)忘れているという自体に陥っているので 😇
備忘録としてSassの基本的な使い方をまとめてみようと思います。

SASSとSCSS

以下、書き方の違いです。

// SASSの場合
.hoge
  width: 100px
  margin: 0 auto
  p
    padding: 10px
    span
      font-size: 10px

SASSはインデントで依存関係を示します。
簡素に書けるけど、見慣れないと「ん…?」と思うかも…

// SCSSの場合
.hoge {
  width: 100px;
  margin: 0 auto;
  p {
    padding: 10px;
    span {
      font-size: 10px;
    }
  }
}

SCSSは括弧を使い入れ子構造にします。
こっちの方が個人的には分かりやすかなと思います。

という訳で、SCSSを採用しました!
(以下は、SCSS記法を導入した書き方になります。)

ネスト構造

上記の内容の通り、ネスト構造(入れ子構造)で書くことが出来ます。
これで親セレクタを何度も何度も書くようなこととはオサラバです!!
ただ可読性が悪くなるの、ネストしまくるのは避けた方が良いかもしれません。
私たちのチームでは、ネストは基本4階層までというルールを設けました。

変数

数値やカラーコードに名前をつけて定義し、変数名で呼び出せます。
はじめにカラーコードを決めておけばデザインのブレも防げます。

// 変数の定義
$red: #ff6666; 
 
//  呼び出し
div {
  color: $red;
}

mixin

mixinを使ってスタイルの使い回しが出来、さらに引数を使うことが出来ます。
@mixinで定義し、@includeで呼び出します。

@mixin btn($background: #ccc, $color: #333) {
  background: $background;
  color: $color;
}

div {
  .btn1 {
    @include btn;
  }
  .btn2 {
    @include btn(#ff6666, #fff);
  }
}

.btn1には@mixinで定義した初期値が反映されます。  

extend

定義しているスタイルを継承することが出来ます。
@extendで呼び出します。

.hoge_area {
  width: 100%;
  height: 300px;
  background: #ccc;
}

.hoge {
  @extend .hoge_area;
  font-size: 12px;
}

extendは、個人的にはmixinで定義するほどではないけど、 同じようなスタイル書いちゃうな〜って場合のみ使用しています。 (うまい使い方があまり分かっていない…)

ファイル構成

ファイル構成は、こんな感じにしました。

base.scss
 └ _reset.scss
 └ layout
  └ _footer.scss
  └ _header.scss
  └ _main.scss
  └ _sidebar.scss
 └ object
  └ component
    └ _button.scss
    └ _form.scss
    └ _parts.scss
  └ utility
   └ _colors.scss
   └ _mixins.scss
   └ _variables.scss

まとめ

今回は基本的なことをまとめましたが、
もっといろんなことがSassで出来るのでいろいろ試してみたいと思います!
今回、過去に書いた自分のコードを見返していて
気づく部分も多かったので改良していきたいと思いました!

以上です。