それほど便利ではないSass（SCSS）について語る

2015-05-19
CSS

モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。
Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。

使い方によっては、素のCSSよりも分かりにくくなります。
ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。

Sass（SCSS）とは

Sassとは、Syntactically Awesome Style Sheetsの略です。
CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。

実際にブラウザで認識させるには、CSSに変換する必要があります。

Sass: Syntactically Awesome Style Sheets

二つの書き方

Sassには、二つの書き方があります。

インデントでネストを管理し、｛｝や；が必要がない書き方。
拡張子は｢.sass｣
CSSと同じように記述し、Sassの機能を使うことができる書き方。
拡張子は｢.scss｣

CSSと共存できるSCSSの書き方が、主流です。

Sassの環境

コマンドラインやアプリケーションから使うことができます。
Rubyをインストールし、テキストエディタから扱うことが一般的だと思います。

おもな機能

変数、ネスト、ミックスイン、セレクタの継承などがあります。

変数

変数を使うことができます。
演算なども行えます。

SCSS

$maxsize: 960px;

.main{
  width: $maxsize + 30px;
}

CSS

.main {
  width: 990px;
}

ネスト（入れ子）

ネスト（入れ子）にすることで、何度も同じid/classを書かなくても、関連したスタイルをまとめることができます。

SCSS

.nav{
  width: 600px;
 .child{
   width: 100px;
    a{
     color: #ff0;
     &:hover{
       color: #fff;
     }
    }
 }
}

CSS

.nav {
  width: 600px;
}

.nav .child {
  width: 100px;
}

.nav .child a {
  color: #ff0;
}

.nav .child a:hover {
  color: #fff;
}

ミックスイン（mixin）

スタイルを定義し、呼び出すことができます。

SCSS

@mixin border($bdwidth:1px, $color:#666, $radius:4px) {
  border: $bdwidth solid $color;
  border-radius: $radius;
}

.item{
  width: 400px;
  @include border(1px, #999, 5px);
}

CSS

.item {
  width: 400px;
  border: 1px solid #999;
  border-radius: 5px;
}

セレクタの継承（extend）

共通のスタイルをまとめてくれます。

SCSS

%clearfix {
  &:after{
    content: "";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
  }
}

.block{
  @extend %clearfix;
  color: #000;
}

.section{
  @extend %clearfix;
  color: #ff0;
}

CSS

.block:after, .section:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.block {
  color: #000;
}

.section {
  color: #ff0;
}

そのほか

importやコメントは、CSSのものよりも便利になっています。
また、複数の関数が用意されており、自作することもできます。

意外と便利ではない理由

私が感じたことは、以下の五つです。

Sassの混沌化

CSSをきちんと書けない人が、Sassを利用すると混沌としやすいです。
簡単な変数やネストでも、複雑にさせることができます。

BEMやSMACSSのスキル

CSSにBEMやSMACSSといった書き方があります。
日頃から意識していると、Sassを利用しなくても、見やすいCSSが書けます。

ご利用は計画的に

Sassには、多数の機能がありますが、計画的に利用しないと、あとで大変なことになってしまします。
誰でも、視認性の低いソースを触るのは、精神的につらいです。

CSSはプログラムではない

全てでないですが、Sassを使えば、プログラムのように書けます。
しかし、CSSを書く人間の全てが、プログラムを読めるわけではありません。
さらに、今のところSassのプログラム的な記述は、視認性が低いと感じます。

エディタの力

少し前の記事では、Sassならベンダープレフィックスを気にしなくても大丈夫、とあります。
しかし、ベンダープレフィックスだけならSublime Text、Brackets、Atom Editorでは、Autoprefixerなどを使う方が良いです。
他にも、エディタでフォローできる機能がいくつもあります。

postcss/autoprefixer