KYO

Sassの基本

2018年8月3日 Sass ,

Sass(サース)を勉強しています。cssの勉強でcodepenとか見ているとsassで書かれたものが時々出てきます。なんか特別な環境とか必要なのかな?と避けていたんですが、どうやら簡単に導入できてしかも、特別環境とかが必要なわけでもないとのことで早速勉強しました!

Sassを使う

cssの上位互換的なやつです。
最終的にはcssに変換します。
ruby環境が必要です。

 

こんなHTMLがあります

 

mainの中に入ったulと、何にも入ってないulです

こんなスタイルにします。

こんなふうになりました。見ての通りネスト構造になっています
これをcssに変換します

こんな感じになりました。
CSSの煩わしい書き方がネストされた書き方で単純化されました。

 

今度はボタンのスタイル

ホバー時にスタイルを変えてみます

sass

cssに変換すると

とな感じになりました

変数とミックスインを使う

html

sass

css

ミックスインを使うことでよく使うような共通のスタイルをパーツ化しておくことができる
変数は演算も行うことができる

 

ミックスインに値を渡す

sass

css

 

if文

Sassではif文も使えます!
これはビックリだけどいまいちどんな場面で使うのか想像できてないw

html

sass

css

結果

if文がcssで使えるってすごい

メソッドとファイルの分割

最後にメソッド(関数)とファイルの分割です

アンダーバーをつけたファイルを読み込んでファイルを分けることができます。

_sub.sass

main.sass

css

htm

結果

 

 

急ぎ足ですが基本的な部分を勉強しましたー!


関連記事