【Sass, SCSSでコーディング】基本的な書き方からメリットを簡単に

man

困ってる人

Sass(SCSS)でわざわざ覚えなきゃいけないのかなぁ?
Sassをメリットって、一体何なんだろう?
Sassでよく使う機能を必要最低限でいいから覚えたい


こんにちは、よろと申します。

今回は「Sass(SCSS)」について、

制作会社さんなどからお仕事を貰う時は「Sass」で、と言われる事も多く、割と必須スキル、

という事で、今回はSassの便利さと使い方について、

とりあえず、最低でもここら辺だけでも押さえておけばいいのでは?という部分を軽く。

【Sass, SCSSでコーディング】基本的な書き方からメリットを簡単に

「Sass」を覚える事自体は、そこまで難しくはないのですが、比較的厄介だと思われるのが環境構築、コンパイルなどの準備や設定。

そこら辺に関してはこちらの記事にも目を通してみるといいかも。

Sass(SCSS)をCSSに変換, コンパイル – gulpの使い方・設定方法【自動化】

もし設定が上手くいかない、もしくはコンパイルとか面倒!もっと簡単な方法はないの?という場合には、

KoalaPreprosをインストールすればOK。

インストールが終わったら、あとはファイルをドラッグ&ドロップするだけで使えるようになるので、とても便利。

という事で、今回は「Sass(SCSS)」の便利さ、実際の書き方や使用方法についてという事で、

CSSではなく、Sass(SCSS)で書く事のメリット

{}で囲む事により他のCSS同士が干渉し辛いので、他のプロパティや値に邪魔されずに済む
・よく使うコードや設定、色を簡単に再利用できる
・Sassを使う事によって記述量を減らせる

具体的に、どんな感じに便利かというと、

例えば、CSSがこんな感じで、もし何か変更があった場合、通常だとクラス名を変える時に3ヶ所書き換える必要がある

それが、SCSSだとこんな感じ。

1ヶ所で済む。

Scssの基本的な書き方はこんな感じで、入れ子構造で書いていくもの。

最初慣れない内は、書き方も面倒だし、逆に読みづらいかもだけど、すぐに慣れるはず。

SCSSの基本的な書き方:&記号

例えば、ボタンを作る時なんかに「hover」や「active」を使う時にも割と便利。

※hover: カーソルが乗っている時の動作
※active: クリックしている間の動作

それが、SCSSだとこんな感じで書ける。

SCSSの基本的な書き方:変数

例えば、こんな感じでよく使う色を変数にしておいて、

どこかに別の場所に保存しておいて、後から呼び出す事が可能。

こんな感じで使う事が出来る。

毎度わざわざ、Twitterの色って何色だっけ? Facebookって何色だったっけ?と、調べる必要がなくなる。

SCSSの基本的な書き方:@mixin, @include

自分が頻繁に使う設定を、@mixinに保存しておいて、@includeで呼び出すという使い方。

例えばこんな感じ。

こんな感じで、よく使う@mixinを外部ファイルにまとめておいて、使う時に@includeで呼び出すという使い方。

という風に、特によく使う機能はこんな感じ。

他にもいろいろな使い方があるので、興味のある方は調べてみるといいかも。

そして次に、Sassで作業をする際にはとても重要な、@import

これに関しては、少し長くなりそうなので、簡単なチュートリアルを別の記事で説明。

【Sass, Scss】@importの使い方 基本の書き方・簡単チュートリアルで練習

最後に

もし、始めの内は慣れずに書くのが難しいという事なら、

一旦まずはCSSで書いてみて、それをSCSSに変換するというのもあり。

その場合は、こちらのサイトとかを使うのもいいかも。

https://css2sass.herokuapp.com/

Sassの使い方としては、自分がよく使うfont-familyのセットを保存しておくのもありだし、

例えば、_font.scssに、この業界のフォントはあれとか、これとか、

_mixin.scssというファイルを作って、mixinをまとめる専用のファイルとして使ってもいいし、

あと、最後に注意点としては、

mixinや変数は使う場所よりも先に書かなくてはいけないという点。

それぞれのファイルの読み込むためには、@importというものを使わなくてはいけないので、

それに関しては、上で紹介した記事から確認してみるのもいいかも。

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール