はじめに
フロント実装を学んでいく上で、Sassを用いておりますので、用語等を中心に整理していきます。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。
Sass(サス)とは
- cssを効率的に書く言語（cssを拡張した言語）
- cssの中で変数を使え、計算を行うことができる。
- Sassファイル
- cssファイルに記述はできない
- Scssファイルにcssを記述することはできる。
- Sassを扱うファイルの拡張子は２種類
- sass拡張子（SASS記法を用いるが、cssの記法と差があり、普及しなかった。）
- scss拡張子（cssの記法によく似たSCSS記法)
Sassのメリット
- 記述の簡略化
- プログラムのような処理
- 複数のcssファイルを1つにまとめることができる
- 同じ値を使い回すことができる
記述の簡略化
- CSSをネスト（入れ子）して記述できる。
- 親要素を複数記述しなくてもよくなった。
プログラムのような処理
- 変数や条件分岐といったプログラミング処理ができる
qiita.scss
$変数名:値;//例）ピクセル数やカラーコードなどを何度も使用する値を変数定義$section-color:rgb(30,30,30);section{background-color:$section-color;}複数のcssファイルを1つにまとめることができる
パーシャル
- 複数のSassファイルを1つのCSSファイルとしてまとめることができる。
- また、パーシャルを使えば、機能ごとにファイルを分割し、管理することができる。
パーシャルファイル作成方法
- ファイル名を _ から始める。(例えば、reset.scss)
_reset.scss
//処理を記載する。- パーシャルファイルを別ファイルで読み込む。
qiita.scss
@import"reset";同じ値を使い回すことができる
変数を用いる。 ($変数名: 値;)
- 例）FFEC00という色をmainYellowColorという変数名で定義する。
color.scss
$mainYellowColor:#FFEC00;mixin
- まとまったスタイルを定義することができる。
- 変数は値を定義するものだったが、mixinはスタイルを定義するもの。
qiita.scss
//mixinを定義@mixinmixin名(){}//mixinを呼び出す。@include例）.clearfoxをよく使うので、パーシャルファイルを作成し、ファイル内にmixinを定義する。
_clearfix.scss
@mixinclearfix(){&:after{content:'';display:block;clear:both;}}&(アンパサンド) とは
- コードを簡易にできる。
_sample.scss
//例）_sample.scssにmixinを呼び出す。.menu{@includeclearfix();....menu__list{float:left;...}}//例２）mixinを使わなければ・・・冗長になる。.menu{&:after{content:'';display:block;clear:both;}.menu__list{float:left;...}}さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。