Sass（サス）って聞いたことあるんです。
聞いたことがあったんだけど、まぁCSSの新たな効率的な書き方でしょ。くらいしか知りませんでした。なので、独学で学んでみることに。
学んでいる途中でいろんな開発者さんのブログとかも参考にして自分なりにまとめてみました。
Sassとは
そもそもSassって何の略だ。って調べてみると、、、
Syntactically ＝ 構文的な
Awesome ＝ オーサムな
Style Sheet ＝ スタイルシート
まじか。Awesomeとか入れちゃうあたり、自由すぎる。堅っ苦しくない感じ。好き。
Sassの種類
ちなみに、Sassの種類は「SASS」型と「SCSS」型があるみたい。
今回はSCSS型で進めていきます。拡張子も『.css』ではなく、『.scss』となりますので注意。
Sassは入れ子構造
普通のCSS
.qiita {
width: 1280px;
}
.qiita h1{
font-size: 20px;
}
入れ子構造のSass
.qiita {
width: 1280px;
h1{
font-size: 20px;
}
}
このように、クラス名qiitaの中に入れこんで記述できるのです。
具体的なSassの使い方
&でbuttonの反復使用をなくす
.button {
color: white;
opacity: 0.8;
background-color: lightblue;
cursor: pointer;
// ここの"&"で".button"と同じ意味。
&:hover{
opacity: 1;
}
if, while, for 文を使用する
// ===if文===
$number: 10; //変数の定義
p{
@if number > 5 {
color: red;
}@else{
color: green;
}
}
// ===for文===
//変数i が 10~12の間
@for $i from 10 through 12 {
.fs#{$i} { font-size: #{$i}px; }
}
//#{}の中にいれることでconcatenateしなくて良くなる
// 上記だと、.fs10 .fs11 .fs12 というクラスが生成される
// ===while文===
//同じく変数i が 10~12の間
$i: 10;
@while $i <= 12 {
.fs#{$i} { font-size: #{$i}px; }
$i: $i + 1;
}
参考： ドットインストール
関数を使用する
// 変数を定義
$widthSize: 900px;
//関数の定義
@function onethirdSize($length){
@return $length / 3;
}
// 関数を使用
.box-reponsive{
width: onethirdSize($widthSize);
}
これで.box-responsiveのクラスを持つ要素はそのwidthが900pxの3分の1になりました。使い方次第では、非常に有能な関数です。
参考： https://book.scss.jp/code/c4/05.html
用途別にscssファイルを作成する
main.scss というファイルがあったとして、関数とか変数とか全てを同じファイル内に記述していくとぐちゃぐちゃでAwesomeではないファイルが出来上がってしまいます。それを防ぐために関数用のファイルを作成します。
main.scss
_functions.scss ← 関数用のscssファイルを追加
しかし、追加しただけだと連携されていないので、main.scssに適用できるように、@importします。
@import "functions";
Sass の便利な機能
ちょっと覚えておきたい便利な機能を挙げていきます。
変数を使用する
まずSassの最大の特徴が変数を使用できること。例えば、WEBサイト内のテーマ色を変えたい場合。文字にも、ボタンにも、水平線にもテーマ色がついていて、CSSだと全て変更するのが大変！って時ありますよね。
でもSassなら変数を定義しておけば、その変数を変更するだけで一気に全て変えられます。
// 関数theme-colorの定義
$theme-color: #eee;
// h1で変数を使用する
h1{
color: $theme-color;
}
//もしtheme-colorが数値、文字列だったら下記のように+とかで記述することも可能。
h1{
font-size: $theme-color - 2px;
}
こんな感じで記述しておくと、最初の$theme-color変数を変更するだけで全て変更できます。めっちゃ便利。
変数の色ならlighten, darkenを使用しよう
テーマカラーを決めたら、見出しも、文字も、背景も全部まったく同じ色にしたい。とは思わないですよね。やっぱり、ボタンは多少明るくしようか。もしくはhoverしたら、ちょっと暗くしようか。とか思いますよね。
そんな色の明るさ、暗さの調整ができるのがlighten, darkenです。
// 関数theme-colorの定義
$theme-color: blue;
// 明るさを20%アップさせる
div{
background-color: lighten($theme-color, 20%);
}
// hover で逆に暗さを70%アップさせる
a{
color: $theme-color;
&:hover{
color: darken($theme-color,70%);
}
}
こうやっていちいち色自体を定義しなくても、明るさ、暗さを調整できるのは便利です。
さらに詳しい色関係の関数一覧
https://book.scss.jp/code/c8/07.html
@mixin であらかじめスタイルを定義
次に同じようなスタイルを様々な要素に適用したいんだけど、ちょっとずつサイズとか違うのよね。そしたら、毎回同じものを色んなクラスにコピペしなきゃいけない。そんな時は@mixinが便利です。
あらかじめテンプレート的なスタイルを定義しておくことで、そのスタイルを色んなクラスに転用することができるのです。
例えば、サイト内で使用しているボタンに共通するスタイルを定義しておき、細かい所は個々で調整するとコードの反復を最小限に止めることができますよね。
// ここで共通のスタイルを定義しておく。
@mixin contentStyle {
width: 980px;
margin: 0;
border: 1px solid black;
}
// borderとかmargin, widthはcontentStyleを使用したまま、、、
//一つ目のboxは背景をblueに。
.first-content-box {
background-color: blue;
@include contentStyle;
}
//二つ目のboxは背景をorangeに。
.second-content-box {
background-color: orange;
@include contentStyle;
}
共通のスタイルを定義しておくと、細部だけ個々に記述すれば良いから楽ですね！
@extend でスタイルを継承
先ほどの@mixinと似ているのですが、使いようによってはmixinよりも効率的にコーディングできるので追記しておきます。
まずは継承の方法。
// ここで共通のスタイルをクラスで定義しておく。
.contentStyle {
width: 980px;
margin: 0;
border: 1px solid black;
}
// borderとかmargin, widthはcontentStyleを使用したまま、、、
//一つ目のboxは背景をblueに。
.first-content-box {
background-color: blue;
@extend .contentStyle;
}
//二つ目のboxは背景をorangeに。
.second-content-box {
background-color: orange;
@extend .contentStyle;
}
そうほとんど同じ。違いはscssファイルからcssファイルに変換された時にどうなるか。
// @mixinの場合
// それぞれのクラスに割り振られ、includeされます。
.first-content-box {
background-color: blue;
margin: 0;
border: 1px solid black;
}
.second-content-box {
background-color: orange;
margin: 0;
border: 1px solid black;
}
// @extendの場合
// 割り振られるのではなく、共通のクラスが作成されます。
// こちらの方が変換後のcssが綺麗で重複がない。
.first-content-box .second-content-box {
width: 980px;
margin: 0;
border: 1px solid black;
}
.first-content-box {
background-color: blue;
}
.second-content-box {
background-color: orange;
}