kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Code School の講義「Assembling Sass」で Sass に入門した

Sass CSS ドットインストール

今まで使う機会がなくて未経験だった Sass に入門した．今さら Sass って言われる気もするけど，最近担当しているプロジェクトでフロントエンド技術の理解が必要になり，幅広く学ぶことにした．最近 Vue.js を学んでいるのも同じ理由だったりする．Sass を学んだメモを残しておこうと思う．

sass-lang.com

"Code School : Assembling Sass" を受講した

最近は動画コンテンツで学ぶことが多くなっていて，今回は「Code School : Assembling Sass」の LEVEL 1 を受講してみた．LEVEL 2 からは有料（毎月 $29）になってしまうので，他のコースも同時並行で受講する場合は払っても十分に効果が得られそう．今回は LEVEL 1 だけでも十分に楽しめた．

www.codeschool.com

  • LEVEL 1 : Foundation
  • LEVEL 2 : Variable
  • LEVEL 3 : Mixin
  • LEVEL 4 : Extend
  • LEVEL 5 : Directive
  • LEVEL 6 : Math + Color
  • LEVEL 7 : Responsive

なお，LEVEL 1 は YouTube にも動画が公開されている．

www.youtube.com

1.1 Sass, Not SASS

  • Sass を作った人って Haml を作った人だったんだ！知らなかった！
  • メタ言語としての「Sass」は「SASS」ではなく「Sass」と表記するのが正しい

1.2 SCSS: Sassy CSS

  • 記法は .scss と .sass がある
  • 一般的には CSS ライクな .scss が普及している

1.3 Commenting

  • Sass のコメント記法は2種類ある
  • /* */ を使うと，コンパイル後にも反映される

1.4 Importing

  • パーシャルテンプレートを作ってインポートすることができる
    • @import を使う
    • テンプレートのファイル名は _ から始める
@import "buttons";

1.5 Nesting Selectors

以下のようにネストした Sass を書く．

.content {
  border: 1px solid #ccc;
  padding: 20px;
  h2 {
    font-size: 3em;
    margin: 20px 0;
  }
  p {
    font-size: 1.5em;
    margin: 15px 0;
  }
}

コンパイルをすると，ネストした構造がフラットに展開される．

$ sass application.scss --style expanded
.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content h2 {
  font-size: 3em;
  margin: 20px 0;
}
.content p {
  font-size: 1.5em;
  margin: 15px 0;
}

また，コロンを使うと，スタイルの名前空間（プレフィックス）を定義できる．

.btn {
    text: {
        decoration: underline;
        transform: lowercase;
    }   
}

例えば，上記のように text: と書いておくと，自動的に展開される．これは便利そう！

$ sass application.scss --style expanded
.btn {
  text-decoration: underline;
  text-transform: lowercase;
}

1.6 The Parent Selector

& を使うと，親のセレクターと合わせることができる．

.content {
  border: 1px solid #ccc;
  padding: 20px;
  .callout {
    border-color: red;
  }
  &.callout {
    border-color: green;
  }
}

&.callout と書くと .content.callout のように展開される．.content .callout と .content.callout の違いは，セレクターが階層で出現するか，同時に出現するかの違いとなる．

$ sass application.scss --style expanded
.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content .callout {
  border-color: red;
}
.content.callout {
  border-color: green;
}

hover などの状態を表現するときに & を1番よく使う．

a {
    color: #999;
    &:hover {
        color: #777;
    }
    &:active {
        color: #888;
    }
}

このように，展開することができる．

$ sass application.scss --style expanded
a {
  color: #999;
}
a:hover {
  color: #777;
}
a:active {
  color: #888;
}

1.7 Nesting Pitfalls

  • ネストしすぎると可読性が悪くなる
  • 3,4階層になったらリファクタリングを検討する

"Sass Basics" を読んだ

「Code School : Assembling Sass」を受講した後は，公式ドキュメントの「Sass Basics」を読みながら他の機能を試した．気になったポイントをザッとまとめる．

sass-lang.com

sass --watch

コンパイル結果を標準出力に表示することもできるけど，アウトプットファイルを指定すると，コンパイル結果を書き出すことができる．さらに --watch を使うと，SCSS を更新したら自動的にコンパイルできるようになる．また，コンパイル時に --style expanded を付けると，カッコの位置なども見やすく表示される．

$ sass --watch app/sass:public/stylesheets
$ sass --style expanded --watch app/sass:public/stylesheets

Mixin

Mixin の考え方が Sass にもあると知れて良かった．

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

上記のように @mixin で Mixin を定義して @include で読み込むことができる．また引数を渡すことができるため，汎用的な Mixin を作ることもできる．

継承

Mixin とは異なり，階層関係が成り立つ場合は継承を使う．

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

"ドットインストール" を見た

最後にドットインストールを見たところ，Code School のカリキュラムにも含まれていた Sass の機能も紹介されていて，参考になった．

  • @for
  • @while
  • @each
  • @function

特に色を変更する関数 lighten() と darken() は非常に便利そうだった．以下のように割合を指定すると，自動的に色を変更してくれる．ただエンジニアの観点だと便利だけど，デザイナーの観点だと計算すると逆に読みにくくなる可能性もありそう．

$color: #ff0000;

p {
  color: lighten($color, 30%);
}

$ sass application.scss --style expanded
p {
  color: #ff9999;
}

ドキュメントを読むと，他にも多くの関数が用意されていた！おおー．

まとめ

  • 今さらながら Sass に入門した
    • 今回は "Code School" と "ドキュメント" と "ドットインストール" を活用した
  • オブジェクト指向のプラクティスを CSS に適用できるのは非常に良かった