こんにちは、ヨロと申します。
今回は「Sass(SCSS)」について、
制作会社さんなどからお仕事を貰う時は「Sass」で、と言われる事も多く、割と必須スキル、
という事で、今回はSassの便利さと使い方について、
とりあえず、最低でもここら辺だけでも押さえておけばいいのでは？という部分を軽く。
Sass、SCSSでコーディング｜基本的な書き方やメリットを簡単
「Sass」を覚える事自体は、そこまで難しくはないのですが、比較的厄介だと思われるのが環境構築、コンパイルなどの準備や設定。
そこら辺に関してはこちらの記事にも目を通してみるといいかも。
Sass(SCSS)をCSSに変換, コンパイル – gulpの使い方・設定方法【自動化】
もし設定が上手くいかない、もしくはコンパイルとか面倒！もっと簡単な方法はないの？という場合には、
「Koala」や「Prepros」をインストールすればOK。
インストールが終わったら、あとはファイルをドラッグ＆ドロップするだけで使えるようになるので、とても便利。
という事で、今回は「Sass(SCSS)」の便利さ、実際の書き方や使用方法についてという事で、
CSSではなく、Sass(SCSS)で書く事のメリット
・{}で囲む事により他のCSS同士が干渉し辛いので、他のプロパティや値に邪魔されずに済む
・よく使うコードや設定、色を簡単に再利用できる
・Sassを使う事によって記述量を減らせる
具体的に、どんな感じに便利かというと、
例えば、CSSがこんな感じで、もし何か変更があった場合、通常だとクラス名を変える時に３ヶ所書き換える必要がある
// CSS
.menu {
width: 800px;
}
.menu ul {
font-size: 0px;
}
.menu li {
font-size: 0px;
}
それが、SCSSだとこんな感じ。
// SCSS
.menu {
width: 800px;
ul {
font-size: 0px;
li {
font-size: 0px;
}
}
}１ヶ所で済む。
Scssの基本的な書き方はこんな感じで、入れ子構造で書いていくもの。
最初慣れない内は、書き方も面倒だし、逆に読みづらいかもだけど、すぐに慣れるはず。
SCSSの基本的な書き方：＆記号
例えば、ボタンを作る時なんかに「hover」や「active」を使う時にも割と便利。
※hover: カーソルが乗っている時の動作
※active: クリックしている間の動作
// 通常のCSS
.button {
// ここに内容を書いていく
}
.button:hover {
// ここに内容を書いていく
}
.button:active {
// ここに内容を書いていく
}
それが、SCSSだとこんな感じで書ける。
// SCSSの基本的な書き方 - &記号
.button {
// ここに内容を書いていく
&:hover {
// ここに内容を書いていく
}
&:active {
// ここに内容を書いていく
}
}SCSSの基本的な書き方：変数
例えば、こんな感じでよく使う色を変数にしておいて、
どこかに別の場所に保存しておいて、後から呼び出す事が可能。
// ここで変数に、色情報を格納しておいて、
$Twitter: #00acee;
$Facebook: #3b5998;
↓
.twitter-btn {
background-color: $Twitter; // ここで呼び出す
}
.facebook-btn {
background-color: $Facebook; // ここで呼び出す
}こんな感じで使う事が出来る。
毎度わざわざ、Twitterの色って何色だっけ？ Facebookって何色だったっけ？と、調べる必要がなくなる。
SCSSの基本的な書き方：@mixin, @include
自分が頻繁に使う設定を、@mixinに保存しておいて、@includeで呼び出すという使い方。
// @mixin, @include
@mixin 〇〇 {
// ここに内容を書いていく
//
//
//
}
↓ そして@includeを使って、@mixinに保存した設定を呼び出す ↓
.クラス名 {
@include 〇〇; /* ここで@mixin ○○をいつでも呼び出すことが出来る */
}例えばこんな感じ。
// SCSSの基本的な書き方：@mixin, @include
@mixin aaa { // 普段、頻繁に使う設定
width: 300px;
height: 300px;
}
↓
↓
↓
.box-1 {
@include aaa; // ここでaaaを呼び出す
background-color: red; // ここで追加で色を変えたり
}
.box-2 {
@include aaa; // ここでaaaを呼び出す
background-color: green; // ここで追加で色を変えたり
}
.box-3 {
@include aaa; // ここでaaaを呼び出す
background-color: yellow; // ここで追加で色を変えたり
}こんな感じで、よく使う@mixinを外部ファイルにまとめておいて、使う時に@includeで呼び出すという使い方。
という風に、特によく使う機能はこんな感じ。
他にもいろいろな使い方があるので、興味のある方は調べてみるといいかも。
そして次に、Sassで作業をする際にはとても重要な、@import
これに関しては、少し長くなりそうなので、簡単なチュートリアルを別の記事で説明。
【Sass, Scss】@importの使い方 基本の書き方・簡単チュートリアルで練習
最後に
もし、始めの内は慣れずに書くのが難しいという事なら、
一旦まずはCSSで書いてみて、それをSCSSに変換するというのもあり。
その場合は、こちらのサイトとかを使うのもいいかも。
https://css2sass.herokuapp.com/
Sassの使い方としては、自分がよく使うfont-familyのセットを保存しておくのもありだし、
例えば、_font.scssに、この業界のフォントはあれとか、これとか、
_mixin.scssというファイルを作って、mixinをまとめる専用のファイルとして使ってもいいし、
あと、最後に注意点としては、
mixinや変数は使う場所よりも先に書かなくてはいけないという点。
それぞれのファイルの読み込むためには、@importというものを使わなくてはいけないので、
それに関しては、上で紹介した記事から確認してみるのもいいかも。
終わり。
Sassをメリットって、一体何なんだろう？
Sassでよく使う機能を必要最低限でいいから覚えたい