Sassとは
SassとはCSSの機能を拡張した言語である。Sassを利用することで、CSSを効率的にかけるようになる。SassはCSSに非常に似ているが異なる言語である。CSSを簡潔にかけるだけではなく、CSSの中で編集を使ったり、計算を行うことができたりする。
Sassファイル
Sassは通常のCSSファイルには記述することができない。反対にSassファイルにCSSを記述することはできる。Sassを扱うファイルの拡張子は.sassと.scssの2種類がある。どちらもSassのファイルとなるが記法が大きく異なる。
.sass拡張子
拡張子は .sass
SASS記法を扱うことができる。
SASS記法では波括弧の省略やセミコロンが不要
しかし、CSSの記法との差がありすぎた為かあまり普及しなかった。
.bodypcolor:#333font-size:15pxfont-weight:normalstrongcolor:redfont-weight:bold.scss拡張子
.sassに後に作られたSassファイルが.scssの拡張子ファイルである。
CSSに非常に似た記法(SCSS記法)でSassの機能を使うことができる。今ではこの記法が主流である。
これからの説明はSCSS記法を用いる。
.bodyp{color:#333;font-size:15px;font-weight:normal;strong{color:red;font-weight:bold;}}記述の簡略化
● Sassのネスト構造
ネストさせることで、同じ親のセレクタをまとめることができる。
下記の例で見てみる。
<divclass="block"><h1class="title">Hello world</h1><pclass="text">Sass is <span>great!</span></div>CSSのスタイルで記述する場合
.block{background-color:#000;}.block.title{color:#FFF;font-size:70px;text-align:center;}.block.text{font-size:15px;color:#FFF;}.block.textspan{color:red;font-size:20px;}Sassでセレクタをネストして記述した場合
.block{background-color:#000;.title{color:#FFF;font-size:70px;text-align:center;}.text{font-size:15px;color:#FFF;span{color:red;font-size:20px;}}}プログラムのような処理ができる
Sassでは変数や条件分岐といったプログラムのような処理を記述できる。
● Sassにおける変数
変数の定義の仕方$変数名: 値;
よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなる。
$section-color:rgb(30,30,30);seciton{background-color:$section-color;}複数のCSSファイルを１つにまとめることが可能
Sassではパーシャルという機能を使用して、複数のSassファイルを１つのCSSファイルとしてまとめられる。機能ごとにファイルを分割することができ、CSSを管理しやすくなる。
● パーシャル
パーシャルファイルの作成
ファイル名を_(アンダースコア)から始める。
パーシャルファイルの読み込み@import ファイル名と記述する。
(例)
@import"reset";/* _reset.scssを読み込む */@import"header";/* _header.scssを読み込む */同じ値を使いまわすことができる
Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることもできる。
(例)
$mainYellowColor:#FFEC00;/* #FFEC00という色をmainYellowColorという変数名で定義する */変数を定義してある_variable.scssを読み込むことで、_variable.scssに定義された変数を他のscssファイルで使用可能。
● mixin
まとまったスタイルを定義する機能
mixinの定義の仕方@mixin mixin名() {}.clearfixをよく使用することは多いと思うがその場合は、_clearfix.scss(ファイル名は自由)ファイルに定義しておく。
(例)
@mixincleafix(){&:after{content:'';display:block;clear:both;}}・ mixinの呼び出しは@includeを使用して以下のように書く。
.menu{@includeclearfix();....menu__list{float:left;...}}これで以下のようなsample.scssのコードを同じになる。
.menu{&:after{content:'';display:block;clear:both;}.menu__list{float:left;...}}何度も同じような記述をしているものがあったら、mixinにまとめることを考えた方が良い。