美味しいご飯を食べて、十分な睡眠が出来れば幸せです。
こんにちは、キイチです。
好きなご飯食べて、ウトウトし始めた時に眠れたら体は休まります。
しかし、そうはいかせてもらえないのが現代社会です。
私は空腹と眠気のピーク時は、相当感じが悪くなるそうで、家族によく指摘されます。
しかも、自分では気が付きません。
そんな自分を直したいと思うこともありますが、気が付かないので直せません。
そして、そんな不器用な自分が可愛くもあります。
これも矛盾でしょうか。
Sassについて
タイトルで「察し」とダジャレに使っていますが、正しくは「サス」「サース」と読むようです。OTL
WEBページのコーディングをしているとCSSを使うことは当たり前になってます。
HTMLで大まかなレイアウトをして、CSSでスタイルを決めて、Javascriptで仕掛け等を作ったりと大枠にはそんな内容で所謂ホームページを作っています。
更に、スタイルを作っているCSSを組むためのSassというものがあります。
使い始めは、なんでCSSが直接書けるのにわざわざ遠回りをしているのかと、本末転倒かと、それこそ矛盾を感じておりました。
しかし、始めにRubyだの一緒にCompassだの設定をすませておけば、あとは便利。
細かい設定等の説明は端折ります。
ここからはほぼ自分用です。
パーシャルファイル
_variable.scss
// ファイル名の先頭に_（アンダースコア）にするとコンパイルされない。
インポート
@import url('example.scss');
@import 'example';
// ※拡張子を省略できる
@import url('variable.scss');
@import 'variable';
// ※パーシャルファイルは_（アンダースコア）はいらない
入れ子構造（ネスト）
section {
margin-bottom: 40px;
h1 {
font-size: 24px;
}
div {
padding: 10px;
p {
line-height: 1.8;
}
}
}
&（アンパサンド）
入れ子で指定するとセレクタや擬似クラスを参照できる。section {
&.class {
color: red;
}
&#id {
color: blue;
}
ul {
li {
&:first-child {
color: yellow;
}
}
}
}
変数
$から始まる。英数と「_」アンダースコア「-」ハイフンが使える。$m: 1rem; // 変数の宣言
p {
font-size: $m; // 使用時
}
インターポーレーション
参照の補完機能
例：変数にパスを指定されている場合$imgDir: '../image/';
#content {
background: url(#{$imgDir}bg.jpg);
}
演算
四則演算が可能
※cssでcalcがあるためそんなに使わないかも$main: 600px;
$side: 360px;
#main {
width: $main + $side;
aside {
width: ($main + $side + 40px) / 2;
}
}
mixin
スタイルをまとめて指定できる。
下記は例として、リンクにロールオーバーした時の透明度を変更するもの。// ベンダープレフィックス
$prefixset: -webkit-, -moz-, -ms-, -o-, '';
// 透明度の設定
@mixin opacity ($val) {
// $prefixsetで指定している配列の分、繰り返し設定する
@each $prefix in $prefixset {
#{$prefix}filter: opacity($val);
}
// IE用
$opacityIE: $val * 100;
filter: alpha( opacity=$opacityIE );
}
// 使用時
a:hover {
@include opacity (0.5);
}
まとめ
まとまりません。
ここまで集めてみましたが、書ききれません。
自分用なのでこだわらなくても良いのですが、自分であとから見ても多分、分かりづらい。
これも直してきます。
cssの書き方一つとっても便利にはなっていますが、あれやこれやと手をつけると覚えることでいっぱいになって使う機会をなくしてしまうので、慎重に。