Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Sass 2019.02.12

SCSS記法からSASS記法への移行で効率重視のコーディング

Tags: ,,,
最終更新日:Update

デザインコーディング時には、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コマンドとウェブサービス

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?