プログラミングの学習においてProgate（プロゲート）を使っています。

HTMLやCSSの学習は有料部分含め全て終えたわけですが、最後に残っていたのがSass。

なんとなくのイメージはCSSの上位版というか効率的にCSSを書けるもの。具体的にどんな事ができるかはぼんやりしていたので何が出来て何が良いのかをまとめてみます。

SassにはSASS記法とSCSS記法の2種類の書き方がある

プロゲートではSCSS記法で学習するみたいですがググって見たところそれぞれの特徴はこう。

①SASS記法

{}などの括弧を使わずインデントのみで階層構造を書く記法。セミコロンも無しなんて凄くスピーディーに書けそうですね！

div
    margin: 0 auto
    a
        color: red

②SCSS記法

こっちはCSSと同じっぽい？と思いきやdivの中にaがある！階層構造になっているわけですね。

どちらかというとこっちのSCSSが主流らしいです。

div {
    margin: 0 auto;
    a {
        color: red;
    }
}

参考: SassとSASSとSCSSの違いについて | UX MILK

ふと気づいたけどはてなブログのシンタックスハイライトには「sass」はあるけど「scss」は無いんですねぇ。

Sassで書くメリット

前述部分でもう分かってしまいましたね。いちばん大事な部分。「入れ子構造で短く書ける」というところ。

そしてもう一つに「変数が使える」こと。要は一度書いたスタイルを名前で呼び出して再利用できるということですね。

書いた後の修正が楽

.header {
  width: 100%;
}
.header ui {
  padding: 10px;
}
.header ui li {
  font-size: 15px;
}

などと書いたあとに.headerのセレクタ名を変更したいという場合にCSSの場合は3箇所を編集する必要がある。

でもSCSSの書き方なら1箇所だけを編集すればOK。

.header {
  width: 100%;
  ui {
    padding: 10px;
    li {
      font-size: 15px;
    }
  }
}

変数を使ってスタイルを使い回す

普通のCSSで文字の色を指定する場合

h1 {
  color: red;
}
p{
  color: red;
}
a{
  color: red;
}

SCSSで変数を使って書く場合

$main-color: red;
h1 {
  color: $main-color;
}
p{
  color: $main-color;
}
a{
  color: $main-color;
}

こうすることによってクラス名の修正の時同様に変数$main-colorの値を変えるだけで一挙に各要素の文字色を変更可能です。

ここまででも十分便利っぽいですが他にもいろいろあるみたい。

SCSSで出来ること

mixinでコードを一括で読み込む

$main-colorの時の例ではプロパティの値のみを変数として格納して利用していましたが、mixinではプロパティをまるごと変数にできるイメージ。

@mixin 変数名 {
  ここにCSS
}

のようなかんじです。

読み込みは@include 変数名;でOK。以下の例ではカードっぽいデザインをmixin化して使いまわしています。

@mixin card {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px #ccc;
}

.main-card {
  @include card;
  width: 50%;
}
.sub-card {
  @include card;
  width: 25%;
}

mixinに引数を渡して値を代入する

前述のカードスタイルの例ではwidthをメインとサブで分けて記述していますが、このwidthの値を引数として渡すよう書き換えるとさらに短く簡潔に書くことができます。

@mixin card($wsize) {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px #ccc;
  width: $wsize;
}

.main-card {
  @include card(50%);
}
.sub-card {
  @include card(25%);
}

@mixin card($wsize)とすることで引数として受け取った値を自動的に$wsizeという変数に格納します。

.main-cardでは50%が引数として渡される
$wsizeに50%が代入される
width: $wsize;はwidth: 50%;となる

のような流れでCSSが読み込まれます。ここまでくるとかなりプログラミングって感じがしてきますね。

関数を使って動的に色を生成する

Sassには関数がある。引数を渡すと計算後の値が返ってくるというあれができる。

例として出てきたのは色の生成。色を暗くする関数darken、色を明るくするlighten、透明度を指定する関数rgbaの3つがでてきました。

//redを10%暗く
.dark-red {
  color: darken(red, 10%)    
}
//redを10%明るく
.light-red {
  color: lighten(red, 10%)    
}
//redを50%透明に
.skeleton-red {
  color: rgba(red, 0.5)    
}

これを使えば基準の色を元にhover色やactive色を生成できるのでメインカラーだけ指定すればそれらしいカラーセットが作れそうですね。

importで外部ファイルを読み込む

CSSでもimportはありますが、SCSSでは読み込まれる側のファイル名の先頭に「_」（アンダーバー）を付ける必要があるようです。

そして読み込む時は「」と「.scss」を省略してOKらしい。「variables.scss」というファイルを作って読み込むとすると

@import "variables";

で読み込むことができる。で、これができると何が良いのかというと読み込み元の変数をそのまま使えるようになること。そして、_variables.scssファイルに変数を全てまとめて記述しておくと設定ファイルのような使い方ができる。

$main-color: #d00;
$sub-color: lighten($main-color, 20%);
$font-color: white;

@import "variables";
h1 {
  background-color: $main-color;
  .tag {
    background-color: $sub-color;
    color: $font-color;
  }
}

このようにstyle.scssはテンプレートとして触らないようにして、_variables.scssさえ変更すればデザインが変わるようなことができます。

プロゲートでのお勉強部分はここらへんまででした。その先は実践的な内容で目標物があって、それと同じにするにはどう書くでしょう的な問題。

最近は仕事でもマテリアライズフレームワークを使っているため、CSSをガシガシ書く時間が減っていたのですがSCSSで書きたくなってきました。

次にページ製作をやるときもしくはリファクタリングするときには使ってみようと思います。

自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

Sassで何ができて何が良いのかProgateで勉強しながらまとめてみた