0%

Programmingプログラミングナレッジ

Posted:2019.02.12

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】