Sass（サス）とは
Bootstrap4からLessを外しSassが正式採用されました。
これからはSassの時代？
Sassは「Syntactically Awesome StyleSheet」の略で、まあすごいスタイルシートという感じ。
入れ子や変数が使える素敵仕様。
これまで、CSSは記述が単純でわかりやすかった代わりに、大規模サイトになると記述量が大量になり管理が大変でした。
私はプロジェクトなんかでエクセルでCSSのセレクタとプロパティをレイアウトごとに管理したりしていましたが、それでも探すのが大変。
Firebugと管理表でサルベージの日々という感じでした。
Sassは、現状でWebページで直接読み込まれるわけではないので、結局CSSにコンパイルするのですが、Sassでの記述はCSSでの記述量をかなり削減してくれる可能性を秘めています。
つまり、小規模や通常のサイトであればSassだけを見ればある程度CSSの内容が理解できるということです。
なぜそんな必要があるかというと、CSSは読んで字のごとくカスケード（連なった）する言語のため、優先順位が存在します。
CSSの優先性については割愛しますが、この優先性を理解しないままでどんどんセレクタを追加していっても思う通りにCSSを記述していることにはならないのです。
つまり、Sassは記述方法が構造化されているため、Sassでの記述を確認すればある程度CSSの優先性も確認できながら記述が進められるのです。
もちろん、そのためにはSassの構造をしっかり理解する必要性はありますが。
Sassの導入方法
SassはRubyベースで稼働するCSSプリプロセッサのため、まずはRubyのインストールから必要になります。
Macの場合はRubyは初期導入されているのですが、Windowsの場合はインストールから必要になります。
http://rubyinstaller.org/
上記URLよりインストーラをダウンロードして実行。
通常はCドライブ直下にフォルダができるはずです。私の場合はCドライブ直下にRuby23-x64というフォルダができていました。
コマンドプロンプトを起動し、Rubyフォルダ内のbinフォルダに移動します。
以下のコマンドを入力し、Sassをインストールします。
gem install sass
と入力するとインストールが開始され、導入完了します。
Sassのコンパイル（CSS化）方法
あとはSCSSファイルを書き、コンパイルすればCSSに変換されるという手順です。
以下のコマンドでSCSSをCSSにコンパイルできます。
sass sass/style.scss:css/style.css
ただ、変更があるたびにコンパイルというのは非常に手間なので自動化することもできます。
sass --watch sass/style.scss:css/style.css
またスタイルシートの記述スタイルを4種類から指定することもできます。
- nested : インデントがネストされた形式
- expanded : 手書きのCSSに近い形式
- compact : セレクタごとに一行にしたコンパクトな形式
- compressed : すべてを一行でまとめた形式
記述方法は以下のような感じになります。
sass style.scss:style.css --style expanded
Sassの特徴1
変数
はっきり言って、もうデザイナー領域は超えている感じはしますが、覚えて使えるようになるとかなり楽です。。
Sassの変数はPHPなどと同じで$の後に定義します。
例）カラーの16進数情報はいちいち覚えていません。一度分かりやすい変数に定義し使いまわすと楽ちんです。
$maincolor:#FF0000;
body{color:$maincolor;}
Sassの特徴2
ネスト（入れ子）
CSSではできなかった入れ子。これで記述量は激減する可能性を秘めています。
ネストには2種類あり、セレクタのネストとプロパティのネームスペースのネストがあります。
セレクタのネスト
Scssでの記述
#main { color: #333;
.contents{ color:#555; }
}
コンパイル後のCSS
#main { color: #333; }
#main .contents { color:#555; }
ネームスペースのネスト
Scssでの記述
#main {
font:{
size: 1.2rem;color: #333;
}
}
コンパイル後のCSS
#main {
font-size: 1.2rem;
color: #333;}
Sassの特徴3
mixinとinclude
分かりやすくいうと、変数のパッケージ版。
という説明をしているサイトが多いのですが、本家のサイトではmixinはベンダープレフィックス部分で引数と合わせて活用するのが良い使い方となっています。
以下本家のソース
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Sassの特徴4
extend
CSSのプロパティを別のセレクタに共有する。こっちのほうが変数パッケージっぽいですね。
私が見たサイトでは、なぜか紹介されていない。というのもSassの正式採用を決めたbootstrapでもextendはほとんど（まったく？）使われていません。
extendとmixinがどうやら今は混同してしまっているようです。
今後使い方仕様がまた変わる可能性大ですね。
ひょっとすると次期バージョンでは廃止でmixinの一本化がありえそう。。
一応使い方は以下
Scssでの記述
.error {
padding: 10px;
border: 1px solid #CCC;}
.error01 {
@extend .error;
color: #F00;
}
.error02 {
@extend .error;
color: #333;
}
コンパイル後のCSS
.error, .error01, .error02 {
padding: 10px;
border: 1px solid #CCC;}
.error01 {
color: #F00;
}
.error02 {
color: #333;
}
Sassの特徴5
演算子
プログラムっぽいけど、あれば便利なのか？使用状況がまだ思い浮かびませんので便利な方法があれば後日紹介します。
Sassの特徴6
制御構文が使える
頭に「@」を付けた命令文が使えます。
こちらも便利な使用状況が思い浮かび次第ということで。
@if
@for
@each
@while
今回は以上です。
0コメント