30.Sassって何だ? ~イカしたスタイルシート、CSSの上位互換~
本日からSassの学習に入っていきます。
どうやら楽しそうな内容です。
まず、Sassとは何なのでしょうか?
Sassとは
お決まりの略語説明から入っていきます。
Sassとは「Syntactically Awesome Style Sheets」の頭文字です。
スタイルシートといえば、CSS。もちろんSassと大いに関連があります。
Sassを使う目的は一言で言うと「CSSをより楽に書くため」です。
Sassで書いた内容が、最終的にCSSとして出力される。そんなイメージです。
Sassはscssファイルとして保存され、実際のページで使用する際はcssを出力(コンパイル)して使う必要があります。
SassにはCSSではなかった変数やメソッドが存在します。
色々な処理や書き方が追加されたCSSくらいの捉え方で良いと思います。
(拡張言語というそうです。)
なにやら便利そうな匂いがしてきますね。
早速やっていきましょう。
入れ子で書く
HTMLの親子関係覚えていますか?
確認の為に1つ例を出しておきます。
<div>
<p></p>
</div>
このような形でdiv要素で囲まれたp要素。
この場合、divが親で、pが子です。
例えば、testクラスの中のp要素やa要素を指定する場合は
.test p{
スタイル内容1
}
.test a{
スタイル内容2
}
のようにセレクタ部分で該当要素を指定する必要がありました。
しかしSassであれば、
.test{
p{スタイル内容1}
a(スタイル内容2)
}
このように書くことができます。
あくまでSassファイル(拡張子.scssファイル)の記述内容です。
このSassファイルをCSSファイルに変換すると
最初の例で出した通り、
.test p{
スタイル内容1
}
.test a{
スタイル内容2
}
このように記述されて、ファイル出力されるわけです。
結果物が同じでも、かかる時間はSassの方が少ないですよね。
あと、見やすさや手直しのしやすさもSassの方が良いと思います。
疑似要素も入れ子で書ける
個人的にはこれ、わかりやすくていいなと思いました。
それが疑似要素を子要素のように記述できるです。
疑似要素とは:hoverとか::afterとかですね。
今回はaタグを例に出して比較確認します。
通常のCSSでは
a{
スタイル内容1
}
a:hover{
aにマウスが乗った時のスタイル内容
}
とわざわざ分けて記述する必要がありました。
これがSassであれば
a{
スタイル内容1
&:hover{
aにマウスが乗った時のスタイル内容
}
}
このように、&を使って疑似要素:hoverを入れ子構造のように書くことができます。
floatを解除する為の記述もこれを使えば
&::after{
content : "";
clear : both;
display : block;
}
上記の塊をクラスの中に入れることで実現できます。
そして思いませんか…?
こうした塊が1行で書けたら、もっと便利じゃないか…
その機能あります。
それはまた次回ということで。
今日のまとめ
今日は新しくSassについて学習しました。
これは面白くなってきましたね。
ただ、毎度新しいこと学ぶ度に思いますが、
つまるところHTMLとCSSの操作なんだなと。
やはり基礎が大切と言う事ですね。
では、また。