2018.02.08 CSSをSass(サス)で書く〜要素をネストする〜

東京開発チームの深尾です。

まだまだ寒い日が続きますが、あとひと月ちょっとで桜が咲くと思うと
気持ちだけでも暖かくなります。

今日はSassの書き方の特徴である要素のネストについて書きます。

CSSだと要素を何度も書かなければいけないのに対し、
ネストできるので記述量が減り、且つ視覚的にも見やすくなる利点があります。

具体的に我が社のホームページで見て見ましょう。

 

↓小さくて見にくいですが  div.content-wrapper という要素があります。     

 

デベロッパーツールでCSSのファイルを確認するとこのように

赤ワクで囲んでいるところがclassName=content-wrapperの記述です。

css

            

 

このCSSをSassのscss記法で書くとこのようになります。↓

.content-wrapperの記述が1回で済みます。構造も見やすくなっているでしょうか?

scss

 

ちなみにSassの記法には2種類あって
①sass記法(拡張子が.sass  )
②scss記法(拡張子が.scss)

今は②scss記法が主流のようです。上の例もscss記法

css をscssに変換してくれるサイトがあるので興味のある方は見て見てください。
ピンクが基調のおしゃれ可愛いページです。

https://www.sassmeister.com

では今日のところはこの辺りで・・・