デザインコーディング時には、Sassを使うことがほとんどなのですが、このSassには「SCSS記法」と「SASS記法」の2つの書き方があります。そのうちよく使われるのが「SCSS記法」で、CSSに近い書き方でシェアも多く、情報も充実しており読みやすいというメリットがあるのですが、もう一方の「SASS記法」でコーディングすることで、より効率的かつスピーディーに作業を進めることが期待できます。  

【基本的なSASS記述方法】

SCSS記法とSASS記法ではパッと見ると大きな違いがいくつかあります。慣れるまでは違和感を感じるかもしれませんが、ずっとSCSS記法で記述していると、ある程度イメージはしやすいのではないでしょうか。では実際のコードでSCSS記法とSASS記法の違いを見ていきます。

// SCSS
.scss {
 div {
  margin: 0 auto;
  p {
   font-size: 1em;
  }
 }
}

// SASS
.sass
 div 
  margin: 0 auto
  p
   font-size: 1em

  こうして見ても分かる通り、波括弧{}がありません。また値の終わりに記述するセミコロン;も省略できます。これだけでかなりスッキリした印象がありますね。また、波括弧が無くなる代わりに入れ子はインデントで表記する形になります。   この記述はPythonやPugなどの書き方に近く、普通のCSSとはかなり異なるので慣れるまでは少し大変かもしれません。ただかなり省略できることになるので、スピードアップは間違い無いですね。またこれからPythonやPugなどを触る場合にはちょうど良さそうですね。  

【mixinやinclude】

また、SASS記法ではもう一つ大きな違いがあります。それはmixinとincludeです。SCSS記法ではお馴染みの@をつけて文字で表記する形ですが、SASS記法ではmixinは「=」で、includeは「+」で表現する形になります。一気にプログラミングっぽくなりますね。

// SCSS
@mixin screen-desktop {
 @media screen and (min-width: $bp-lg-min) and (max-width: $bp-lg-max) {
  @content;
 }
}
@include screen-desktop {
 div {
  width: 100%;
 }
}

// SASS
=screen-desktop
 @media screen and (min-width: $bp-lg-min) and (max-width: $bp-lg-max)
  @content
+screen-desktop
 div
  width: 100%

  このように記述ルールで見ると大きな違いがあるのですが、数でいうとそこまで多くないので実際に移行するとなった場合でもそんなにハードルは高くないのではないでしょうか。コーディングをもっと効率的に、スピードアップを目指している場合は是非チャレンジしてみるのもいいのではないでしょうか。ちなみにSCSS記法で作成したファイルは拡張子が「.scss」でSASS記法で作成したファイルは「.sass」の拡張子になるので注意が必要です。  

scssファイルとsassファイルの変換

SCSS記法とSASS記法の相互手動変換は「sass-convert」というツールを使用します。これはRubyでSassをインストールしている場合は含まれているようです。下記コマンドで「sass-convert」があるか確認します。コマンド実行後にパスが表示されていればOKです。

$ which sass-convert
/usr/local/bin/sass-convert

  もしインストールされていない場合には下記コマンドでSassごとインストールしていきます。

$ gem install sass

  scssファイルとsassファイルの変換はこのインストールしたsass-convertコマンドを使って変換していきます。

$ sass-convert [INPUT_FILE] [OUTPUT_FILE]

  例えばこんな感じでそれぞれのファイルを変換します。

// SCSS → SASS
$ sass-convert before.scss after.sass

// SASS → SCSS
$ sass-convert before.sass after.scss

  いかがでしょうか、SCSS記法に慣れている場合でも、より効率的かつスピーディーにコーディングを行う上でSASS記法を採用するのも選択肢としてはありなのではないでしょうか。   （参考にさせて頂いたサイト） SassとSCSSを変換するsass-convertコマンドとウェブサービス