• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

CSSを書くならSassで書こう

2018-03-12 by mocurot コメントを書く

Sass(サースもしくはサス)はSyntactically Awesome StyleSheetsの略で、「構文的で素晴らしいスタイルシート」のような意味合い。
CSSに条件分岐やループなどのプログラミング的要素を加えたもので、SASS記法とSCSS記法をサポートしている。

Sassを使えば、CSSの使い回し部分をの置き換え、CSSの簡略化、CSSファイルの実行速度を上げる、などさまざまな恩恵が得られるのである。
そして世界中で最も使用されていると思われるCSSプリプロセッサがSass。
CSSを書くならSassで書くことをおすすめする。

SCSS記法でSassを書く

リリース当初のSassは波括弧を使わず、インデントでネストを表現していたSASS記法がのみをサポートしていたが、Sass3.0からSCSS記法がサポートされた。
SCSSはSassy CSSの略で、「魅力的なCSS」 みたいな意味。ブロックの書式の構文でCSSと完全互換である。

SASSとSCSSの記法の違いは以下のような感じだ。
(Sassのコンパイルに関しては次回。)

SASS記法でネスト

ul
  margin: 1em
  li
    padding-left: 1em

※インデントでネストを表現

SCSS記法でネスト

ul{
  margin: 1em;
  li{
    padding-left: 1em;
  }
}

※波括弧のブロックの書式でネストを表現

Sassをビルドする

ul{
  margin: 1em;
}
ul li{
  padding-left: 1em;
}

※出力結果はどちらも同じ。

SassはSASS記法とSCSS記法をサポートしているため、「SASS?」「SCSS?」と混乱することもしばしば。
SassをSCSS記法で書くのが一般的で、共有されているSassはほぼSCSS記法で書かれている。リソースの共有やレッスン系はSCSS記法がベースとなるので、これからSassを覚えるならSCSS記法一択。注意しよう。

Sassのメリット

複数のブラウザをサポートする案件では、CSSプリプロセッサを利用して規則的なCSSのベンダープリフィクスを付与する機会も多い。ほかにも記述の簡略化や部品化、再利用など得られる恩恵は多岐にわたる。

メリットの一部

  • 条件分岐やループなどのプログラミング的要素
  • ネスト(入れ子)による記述の簡略化
  • コードの部品化・再利用
  • ファイルの分割、分割したファイルの結合
  • ベンダープリフィクスを含むミックスイン

次回「 Sassの初期設定〜コンパイル」


まとめはこちら : CONTENTS

関連

Filed Under: Sass 関連タグ:CSS, SASS, SCSS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方
    ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン