【コーダー必見！】CSS言語・Sassのメリットと使い方

こんにちは、hgmです。

新年明けましておめでとうございます！

本年もゆにメモを宜しくお願い申し上げます✨

本日から仕事始めの方が多いのではないでしょうか？

お正月はゆっくり過ごせたのでまだお休みモードの私ですが、

少しずつ仕事モードに切り替えながら、今年も突っ走っていきたいと思います。

———————–

さて、今回はSassのメリットと使用方法をご紹介させていただきます。

以前から周りの方にも勧められていたのですがなかなか深く調べる事ができなかったのですが、

今回は難しい表現をせず自分なりに理解した事を紹介させていただきます！

Sassとは？

Sassは「Syntactically Awesome StyleSheet」の略で、意味としては「構文的に最高のスタイルシート」という意味だそうです。

CSSプリプロセッサの一種で、CSSをよりプログラミングに近い形でコーディングすることができます。

※ちなみに読み方ですが、「サス」が一般的で、正式には「サース」のようです。

Sassのメリット

入れ子（ネスト）や変数の使用で見やすく、管理しやすくなる

通常のCSSだと同じ記述を何回もしてしまったり、レスポンシブサイトだとメディアクエリを使用するため、なかなか見やすくならず、結果管理しづらくなりますよね・・・。

しかし、Sassを使用することで入れ子形式で記述ができ、関数が使えるため入力する手間も省けます。

コーディングスピードが上がること間違いなし！

/* 入れ子 */
div{
  p{

  }
}


/* 関数 */
$red = #ff0000;
p{
  color: $red;
}

記述方法

SCSS記法

div{
  margin: 0 auto;
  p{
    font-size: 16px;
    line-height: 30px;
  }
}

拡張子は.scssの形式で、記述はCSSと同じ括弧{}が使えるため、私はこちらの方が使用しやすいかなと思います。
入れ子構造をうまく使いこなせば、あとは通常のCSSと同じ記述でOKなので覚える事が少ないので、スムーズに移行できますね！

SASS記法

div
  margin: 0 auto
  p
    font-size: 16px
    line-height: 30px

拡張子は.sassの形式で、記述が非常に簡単なため、シンプル・コンパクトにコーディングができます。
SASS記法ではインデントで依存関係を示し、セミコロンは省いて記述します。

（例）div の margin: 0 auto の後ろの「;」は入れません。

また、コロンの後に半角で空白を入れるようにしましょう。

インストール方法

1.Rubyをインストールする（Macユーザーはスキップしてください）

SassはRubyというオブジェクト指向スクリプト言語で動くので、まずはRubyをインストールしましょう。

ちなみにMacを使用している方は標準でRubyが入っているので、ここはスキップしていただいて大丈夫です。

・Rubyインストール

https://rubyinstaller.org/downloads/

2.Sassをインストールする

本題のSassをインストールします。

Windowsの方はコマンド プロンプト、Macの方はターミナルを使用しインストールを行います。

1.下記のコマンドを入力後、Enterを押しインストールを行います。

Windows

gem install sass

Mac

sudo gem install sass

2.インストール後、下記のコマンドでバージョン情報を確認しましょう。

sass --version

バージョン情報が正しく表示されていれば、インストール完了です。

コンパイルの設定

Sassを記述できる環境は整いましたが、SassをCSSに変換（コンパイル）する必要があります。

コンパイルするには、手動または自動でできます。

手動でコンパイルする

コマンド プロンプトまたはターミナルで、CSSファイルのあるディレクトリまで移動し、下記のコマンドを入力します。

sass ファイル名.scss:ファイル名.css

これで、SCSSにコンパイルされます。

SCSSファイルがなければ新しくファイルが生成され、すでにファイルが存在する場合は上書きされます。

自動でコンパイルする

ファイルが編集されて更新されると、CSSが自動的に出力されるので、1回設定をすれば大丈夫です。
先ほどのコマンドに「–watch」をつけるだけです。

コマンド プロンプトまたはターミナルで、CSSファイルのあるディレクトリまで移動し、下記のコマンドを入力します。

sass --watch ファイル名.scss:ファイル名.css

これで、SCSSにコンパイルされます。

こちらもSCSSファイルがなければ新しくファイルが生成され、すでにファイルが存在する場合は上書きされます。

まとめ

Sassのメリット・使用方法についてご紹介させていただきました。

以前ネットで流し読みしていたときは「設定が面倒臭そうだな〜・・・」とか、

難しいことを新しく覚えないといけないと勝手に思い込んでいたのですが、

詳しく調べてみると難しい事は無く、むしろ簡単だし使いこなせば便利だという事が分かりました！

現在弊社ではSassでの記述はほとんど使用していないため、これを機に社内で相談し、試験的に使用後、検討したいと思います！