今回はSassの使い方について解説していきます。
SassはCSSを効率的に記述するための言語なので、HTML&CSSの基本的な使い方は前提知識として必要です。
・CSSはある程度できるからステップアップしたい
・Sassの基本的な機能が知りたい
・Sassのコンパイルって難しそう...
・Sassの基本的な機能が分かる
・実際によく使う機能や書き方が分かる
Sassは難しいの？
SassとはCSSメタ言語と呼ばれるもので、CSSの機能を拡張し、より効率的に記述することが可能な言語です。
上手く使えればコードの記述量がかなり減るだけでなく、後からの変更に強いコードを書くことができます。
たくさんの機能があり、全てを使いこなすのは確かに難しいですが、必要な機能を数個覚えるだけでかなり効率化できるのでサクッと覚えちゃいましょう。
まずはCSSを今までより効率的に書ける言語という認識でOKです。
Sassの使い方
Sassは.scssまたは.sassの拡張子のファイルに記述します。
ソフトのインストールや特別な設定は必要ありません。
簡単に説明すると、今まではファイル名をstylesheet.cssなどとしていたものをstylesheet.scssに変更するだけでSassを記述することができます。
ただし、HTMLは.scss形式のフォルダを読み込むことができないので、コンパイルという.scssファイルを.cssファイルに変更してあげる作業が必要です。
簡潔に言うと「HTMLがCSSファイルの形式でないと読み込めないから」です。
イメージとしては、
Sassで効率的に記述する→コンパイルすることでSassファイルを元にCSSファイルを自動生成→HTML上では生成されたCSSファイルを読み込む
という感じです。
編集する際はSassファイルで効率的に記述し、実際の読み込みはコンパイルしたCSSファイルを使うという流れですね。
コンパイルに関してはコアラというサービスで簡単に行なえます。
コアラの使い方に関しては以下の記事が参考になります。
Sassの基本的な機能
Sassの基本的な機能を頻出で優先度の高いものから順番に紹介していきます。
ネスト（入れ子構造）
ネストとは入れ子構造のことです。
ネストにも数種類ありますが、ここでは個人的に頻出の2種類を紹介します。
ネストの一番のメリットはコードの記述量が圧倒的に減るということです。
慣れるまでは大変かもしれませんが、慣れたらCSSには戻れないレベルで便利に感じるので頑張りましょう。
セレクタのネスト
セレクタとは、要素名やクラス名などCSSで記述する際に指定する名前のことですね。
これは実際のコードを見たほうがわかりやすいので、以下で確認してみましょう。
<div class="container">
<ul class="main-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>.container{
width: 1080px;
margin: 0 auto;
}
.container ul{
dislpay: flex;
}
.container ul li{
list-style: none;
margin-top: 20px;
}.container{
width: 1080px;
margin: 0 auto;
ul{
display: flex;
li{
list-style: none;
margin-top: 20px;
}
}
}この様に入れ子構造で書くことで、同じセレクタを何度も記述する必要がなくなります。
明らかに記述量が減っているのがわかりますね。
親要素の継承
個人的にセレクタのネストと同じくらいよく使います。
ネスト構造の中で「&」を使うことで親要素を継承できます。
言葉ではわかりにくいのでこれもコードを見てみましょう。
①一つの要素の複数クラスがついている場合の活用方法
<p class="toggle-btn is-active">メニューを開く</p>.toggle-btn{
padding: 10px 30px;
border-radius: 25px;
background-color: red;
&.is-active{
background-color: pink;
opacity: 0.8;
}
}.toggle-btnにはボタンの基本的なスタイルを指定しています。
その中で、&.is-activeとつけることで.toggle-btn.is-activeを指定でき、ボタンの状態によってスタイルを付与しています。
「.toggle-btnをクラス名に持っている」かつ「.is-activeもクラス名に持っている」と考えるとわかりやすいかもしれません。
②クラス名の接頭語を揃えている場合の活用方法
<header class="header">
<div class="header-inner">
<p class="header-inner"><img src="img/logo.png"></p>
</div>
</header>.header{
width: 100%;
height: 90px;
position: fixed;
top: 0;
&-inner{
width: 1080px;
margin-right: auto;
margin-left: auto;
}
&-logo{
width: 200px;
height: 100px;
}
}各セクションなどのひとまとまりごとで、クラス名の最初に共通の語句を入れる記述をすることがあります。
このようなクラス命名を採用している場合は上記の様に簡潔に記述できるようになります。
イメージとしては&-innerだったら.header-inner、&-logoだったら.header-logoのように親要素のクラス名を継承しているという感じですね。
クラス命名の方法などはCSS設計なども関係してくるので、詳しく学びたい人は以下の書籍がオススメです。
パーシャル(partial)
次に紹介するのはパーシャル機能です。
パーシャルとはファイルをいくつかに分けて記述し、管理できる機能のことです。
ファイルを分けることで管理が簡単になるというメリットと、分けたファイルを最終的に一つのファイルにまとめてからコンパイルすることで読み込むCSSファイルは一つだけでいいというメリットがあります。
ファイルを分けたい場合はファイル名の前に_(アンダースコア)をつけるだけです。
例えば、
_about.scss、_top.scss、_access.scssという風にページ毎にファイルを分けて記述したとしましょう。
これを一つのscssファイルに読み込んでいくだけです。やり方は以下の通りです。
@import "about";
@import "top";
@imoort "access";@import "ファイル名";で分けたファイルを読み込んでいます。
この際に先頭に付けた_(アンダースコア)と.scssは省略できます。
後はすべてのファイルを@importしたstyle.scssをコンパイルしたCSSファイルを読み込むだけでOKです。
変数
変数とは色や数値など頻繁に使うものに名前をつけて管理することです。
名前をつけて管理しておくことで再利用が簡単で後からの変更にも強くなります。
変数を使うには「$変数名: 値;」の形で変数を定義し、使いたいところで「$変数名」を使うだけです。
以下の例を見てみましょう。
$main-color: #efefef;
.container {
background-color: $main-color;
}ここでは$main-colorに#efefef(薄い灰色)を定義し、background-colorの値として使っています。
使うのが一回だけでは有り難みがわからないですが、今後同じ値を何度も使うことが予想される場合は変数を定義することで簡単に管理できます。
もし後から変更があった場合でも、定義している部分を変更するだけでいいので簡単ですね。
変数は基本的に好きな名前をつけることができますが、具体的すぎる名前をつけるのはおすすめできません。
例えば、サイトにメインで使われている色がオレンジだからといって、
$orange: #F87218(オレンジ色);と定義して随所で使用したとしましょう。
後の修正でサイトのメイン色を緑に変えたいとなったときに、$orangeのような名前をつけていると、$orange: #00C300(黄緑色);のように変えるしかなく、適切とは言えませんね。
この場合は$main-colorなどの抽象的な名前で管理しておくのが適切です。
最後に
Sassには他にもたくさんの機能がありますが、全部覚える必要は有りません。
まずは、「ネスト、パーシャル、変数」の3つだけでいいので使えるようになると、レベルがぐっと上がります！
Sassをより詳しく学びたい、すべての機能を体系的に知っておきたいという人には以下の書籍がおすすめです。
現場で使われているSassやCSSの知識を学習できます。
