web制作のしおり

日々の学習をアウトプットします。

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が子です。

 

CSSは通常入れ子構造を取ることはできません。

例えば、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はCSSの拡張言語、CSSを便利に楽に早く書ける。
  • セレクタ入れ子で記述できる
  • 疑似要素の指定も入れ子でかけるので、見やすくわかりやすい。

 

今日は新しくSassについて学習しました。

これは面白くなってきましたね。

ただ、毎度新しいこと学ぶ度に思いますが、

つまるところHTMLとCSSの操作なんだなと。

やはり基礎が大切と言う事ですね。

 

では、また。