今回はsassのこんな書き方できるぜ！を紹介・・の前に。
ガチガチの記事って読む気起こらないし、書いてて面白くないので
私が思ってることも書いていきます。もはやブログです。
なぜ言語やツールのサイトはめっさオシャレなのか？これ思いませんか？
サイトを見てください。
オシャレでしょう？
これがトップに嫌いな食べ物の納豆が出てきたらやる気なくしますよね。(納豆好きな人すいません。)
とにかく可愛かったりシャレたもん見るとやる気がわくと思うんですよね。
だから勉強する・・・素晴らしいビジュアル設計だ。本題いきます。
ネスト(入れ子)
sassの事調べたらどこでも見ます、ネスト。なので見すぎてもういいかな感ありますね。
私の復習の兼ねて書くんでお好みでどうぞ。
先にHTMLを書きます。
<div class="container">
<div class="content">
<p class="text">適当です。</p>
</div>
</div>
一つのcontainerの中にcontentとtextが入ってますと。
cssだと、
.container {
width: 940px;
}
.content {
width: 500px;
margin: 0 auto;
}
.text {
color: red;
}
これでもいいじゃんと思いますが(私は思った。)サイトを作るのにものすごい量のセレクタやプロパティを使うと何百行にもなって、『このクラスどこの塊のだっけ・・・』『親セレクタどこだっけ・・・』ってなるんです。もうストレスです。
なので見やすく、メンテナンス性を高めるためにネストを使います！
.container {
width: 940px;
.content {
width: 500px;
margin: 0 auto;
.text {
color: red;
}
}
}
{}の中に{}、また{}というのがネストです。3階層くらいにしておくのがいいそうです。
でも場合によっては入り組んだ方がいいとかなんとか。どっちだ。臨機応変でいきましょう。
これをコンパイルすると
.container {
width: 940px; }
.container .content {
width: 500px;
margin: 0 auto; }
.container .content .text {
color: red; }
そのまんま。でも一個一個{}で区切るより分かりやすくなった・・・よね？
プロパティもネストで書けるんですよ！
.container {
background: {
image: url(image/a.png);
repeat: no-repeat;
size: cover;
}
}
.container {
background-image: url(image/a.png);
background-repeat: none;
background-size: cover; }
そしてもっと活用するために『&』を使います。
.content {
width: 300px;
height: 300px;
background-color: white;
&:hover {
background-color: red;
}
}
コンパイルすると、
.content {
width: 300px;
height: 300px;
background-color: white; }
.content:hover {
background-color: red; }
&を使うと親セレクタを参照して擬似クラスをつけられます。こう書けば見やすい！
余談ですが、&使ってcss設計のBEMがいい感じに書けるとどっかで見たんですが・・・情報お持ちの方ご教授願います・・・。
変数
数学アレルギーが・・大丈夫、名前に惑わされないで！
例えばサイトを作る時に白黒赤を使うとして、後から全部の色を変えたくなった時。
.container {
width: 940px;
background-color: #000;//黒
.content {
width: 500px;
margin: 0 auto;
background-color: #fff;//白
.text {
color: #ff0;//赤
}
}
}
//↓こうしたい！
.container {
width: 940px;
background-color: #184ba3;//青
.content {
width: 500px;
margin: 0 auto;
background-color: #ffff00;//黄色
.text {
color: #000;//黒
}
}
}
これだけだとカラーコードをちょっと変えれば問題ないですが、サイトを作るとこんなのじゃすまない。
あっちもこっちも変えて変えて変えて・・・やってられん！
こうしましょう。
$basecolor: #000;//ベースカラー
$assortcolor: #fff;//アソートカラー
$accsentcolor: #ff0;//アクセントカラー
.container {
width: 940px;
background-color: $basecolor;//黒
.content {
width: 500px;
margin: 0 auto;
background-color: $assortcolor;//白
.text {
color: $accsentcolor;//赤
}
}
}
『＄名前: 値; 』のように変数にして、あっちもこっちにも『＄名前』を入れます。こうすると後で変えたいーとなっても
変数にしたとこをいじればOK!コンパイルした際変数の行が消えてちゃんとカラーコードになります。
でも思う、サイト全体の色統一したいわけじゃない・・・エリアとかブロックごとにベースカラー変えたいねん・・・だったら！
.container {
$basecolor: #000;
$assortcolor: #fff;
$accsentcolor: #ff0;
width: 940px;
background-color: $basecolor;
.content {
width: 500px;
margin: 0 auto;
background-color: $assortcolor;
.text {
color: $accsentcolor;
}
}
}
ルールセットの中に変数を入れちゃいます。中に書くと外には適用されないので、エリアごとにプロパティ変えたい時こうしましょう。
mixin
美味しそうな名前ですね。よく使うプロパティをまとめて定義するsassのとんでも機能さん。
mixをまとめているMixinライブラリというものがあり、またオシャレなサイトが拝めます。
ライブラリの使い方はまた今度・・・(使ってない)
@mixin base {
width: 800px;
height: 300px;
background-color: #000;
}
.content_top {
@include base;
}
.content_under {
@include base;
}
@mixin 名前 {}←の中に使い回すプロパティを書きます。その呼び出しに使うのが、
@include。コンパイルしたらなるほどとなるはず！
.content_top {
width: 800px;
height: 300px;
background-color: #000; }
.content_under {
width: 800px;
height: 300px;
background-color: #000; }
なるほどとなりましたか？推理どおりだと気持ちいいですよね。
じゃあ次、引数を入れてみよう！数学(ry まぁさっきやった変数を使って変更を簡単にしましょうということです。
@mixin content ($width,$height) {
width: $width;
height: $height;
}
.content__box {
@include content (300px,200px);
}
見てのとおりなんで賢いみなさんにはコンパイル結果だけほいっと。
.content__box {
width: 300px;
height: 200px; }
結構時間かけて記事書いてるんで疲れてきました・・・まだ使い方あるんですけどね。
@mixinでめっさ使うもの・・・その名も『ベンダープレフィックス』！！！
???という方は以下参照！
この説明すんごい考えたんですが、こちらのブログさんが分かりやすく説明してくださってました。
みんながみんな進化に追いつけるわけじゃない・・・誰かが救いの手を差し伸べてくれても、結局は自分が追いつかなきゃいけない・・・いつかどのブラウザも対応してくれるだろう。(適当)