まだ CSS で消耗してるの？ Sass使いなよって記事

ブログを運営するにあたってCSSでのカスタマイズをかなり行うようになった一方で、CSSの管理方法に困っていました。

新たにデザインしたCSSは style.css にどんどん書き込んでいたのですが、順番も気にせずに追記し続け挙句ごちゃごちゃな状態に。

そんなある日、CSSについて調べてみると Sass というものがあることを知りました！便利そう！と思い、Sass を使ってみたのでレビューしてみたいと思います。

Sassとは

「Sass（サス、サース）」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。

https://udemy.benesse.co.jp/design/web-design/sass.html

とのこと。

また、Sassの記法は２パターン存在します。

SASS記法について

SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。

SASS記法で書かれたSassファイルの拡張子は「.sass」です。

SCSS記法について

SCSS記法の特徴は、書き方がCSSに似ていることです。CSSのようにネストを使用するため、CSSに触れたことのある人なら直感的に書くことができます。そのため、SCSSのほうが一般的に普及しています。

ファイルの拡張子は「.scss」になります。

わたしはSCSS記法で開発を行っています。

下準備

Visual Studio Codeで開発することを想定し、コンパイルを一括で行ってくれるプラグイン「Easy Sass」をインストールします。

インストール手順などはここでは割愛。

ファイルの準備

下記の通りにファイルを準備しました。

.
├── main.scss
└── scss
    ├── _body.scss
    ├── _config.scss
    ├── _footer.scss
    └── _header.scss

「_body.scss」のようにファイル名の先頭にアンダーバーをつけることでファイル保存時のコンパイルの対象から外れます。

Sassを書いてみた

例えば、main.scss に下記のように Sass を書いてみます。

body {
    #main {
        background-color: red;
        padding: 20px 30px;
    }
}

実装後ファイルを保存すると自動的に main.css と main.min.css が生成されます。

VS Codeにインストールした Easy Sass が保存をきっかけにコンパイルしてくれるのは本当に便利。

main.css の中身を確認してみましょう。

body #main {
  background-color: red;
  padding: 20px 30px;
}

CSSが生成されている〜〜

というわけでこのままワードプレスに読み込んでしまうことができてしまうのです。

すごい！！

便利！！

簡単！！

変数も使えるよ！！

例えば、main.scss は下記のようにします。

@import "scss/_config.scss";

body {
    #main {
        background-color: $color;
        padding: 20px 30px;
    }
}

続いて _config.scss には下記の通り実装したとします。

$color: orange;

main.css の中身を確認してみましょう。

body #main {
  background-color: orange;
  padding: 20px 30px;
}

_config.scssの方で定義したカラーが展開されています。つまり、共通して使う色などは変数にしておくことで、後で変更する際も一括で変更ができるため効率的です。

@mixin（ミックスイン）とは？

@mixin（ミックスイン）とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能。

つまり、関数みたいなの。関数みたいなものといったのは引数を渡すことも可能なため。

例えば、main.scss には下記のように実装します。

@import "scss/_config.scss";

body {
    #main {
        background-color: $color;
        padding: 20px 30px;
    }
}

h1 {
    color: $color;
    font-size: 30px;
    @include sp {
        font-size: 12px;
    }
}

h2 {
    color: $color;
}

_config.scss には下記のように実装し、ファイルを保存します。

$color: orange;

@mixin sp {
    @media screen and (max-width: 768px) {
        @content;
    }
}

main.css を確認すると下記のようにコンパイルされた結果が反映されます。

body #main {
  background-color: orange;
  padding: 20px 30px;
}

h1 {
  color: orange;
  font-size: 30px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 12px;
  }
}

h2 {
  color: orange;
}

さくっとレスポンシブデザイン対応も可能になります。

まじで便利！！

おわりに

Sassは使わない理由が見つからないほど便利です。

CSSの記述がわかればSassでの実装は容易なはずなので、より効率的な開発実現を目指してSassもしっかりと使いこなしていきたいと思います。