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

CSS

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

2019年01月07日 8:00 

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

こんにちは、hgmです。

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

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

 

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

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

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

———————–

 

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

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

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

 



Sassとは?

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

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

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

 

Sassのメリット

 

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

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

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

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

 

記述方法

 

SCSS記法

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

 

SASS記法

拡張子は.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

Mac

 

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

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

 

コンパイルの設定

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

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

手動でコンパイルする

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

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

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

 

自動でコンパイルする

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

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

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

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

 

まとめ

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

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

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

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

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

 

関連記事

この記事を書いた人

アバター

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!