非モテのためのCSS - Ruby女子とあそぼう -
非モテのみなさん、おはようございます。もじばけおでございます。
PHP界隈で非モテを名乗っていた某一番さんがついに婚約されました。
いやおめでたいです。末永くお幸せに！非非モテじゃねーか！！
という私信を冒頭で軽く済ませつつ、今回はSCSSで遊んでみます。
SCSSでできることを抜粋すると、こんな感じみたいです。
- &で親セレクタ参照できる
- 制御構文使える
- if
- for
- each
- while
- @mixinで関数も作れちゃう
- @extendで別のセレクタからスタイルを継承できる
- 監視させて自動でcss生成できるぽい
- オプションで圧縮とかできる
ぶっちゃけ週末PHPerな僕にはLESSでもいいと思いますし、SCSSより手軽なんですが(あんまかわんないけど)、
噂によるとRails3.1からは標準でSCSSが組み込まれてるようです。
話題のRubyistな女子大生モデルと仲良く会話するためにも是非触れておきたいものです。
まさに非モテな僕らのためのCSS！
僕はSinatra派ですけどもちろんSCSS読み込んでつかえます。
まずはインストールから。
gem install sass
これだけ。ちょお簡単ですね。
適当にcss書いていきましょう。
&で親セレクタ参照からはじめます。
- selector.scss
div { a { text-decoration: none; &:hover { text-decoration: underline; font-weight: bold; } } }
こんな感じに書いて
sass selector.scss selector.css
してみると、こんな感じに出力されます。
- 実行結果: selector.css
div a { text-decoration: none; } div a:hover { text-decoration: underline; font-weight: bold; }
うーん。ぱっと見きもいけど実際編集するのこっちじゃないし動けばいいのかなって。
ifとかelseは@mixinで関数作るときに使って、forの中で組み込めばいい気がするから、
一旦とばしてforしてみる。忘れてたから変数も使ってみましょう。
- for.scss
$start: 1; $end: 3; @for $i from $start through $end { .id-#{$i} {width: 80%} }
- 実行結果: for.css
.id-1 { width: 80%; } .id-2 { width: 80%; } .id-3 { width: 80%; }
まぁ普通にfor文書けばループしますよねってかんじ。
whileもそんな感じなので省略。
mixinしてみましょう。
たとえば背景色ごとにフォントの色変えたいならこんな感じ。
- mixin.scss
$bg: '#999999'; @mixin switch-color($bgcolor) { @if $bgcolor == '#000000' { color: #FFFFFF; } @else if $bgcolor == '#999999' { color: #000000; } @else { color: #FF00FF; } } div { background-color: $bg; @include switch-color($bg); }
- 実行結果: mixin.css
div { background-color: "#999999"; color: #000000; }
きっとたぶんこれはこんな感じでつかうんだとおもう。
- for-mixin.scss
@mixin switch-color($num) { @if $num <= 3 { color: #FFFFFF; } @else if $num <= 6 { color: #000000; } @else { color: #FF00FF; } } @mixin switch-bgcolor($num) { @if $num % 2 == 0 { background-color: #000000; } @else { background-color: #999999; } } $start: 1; $end: 9; @for $i from $start through $end { div.foo-#{$i} { width: 100%; height: 20px; line-height: 20px; @include switch-bgcolor($i); .text { width: 4em * $i; @include switch-color($i); } } }
- 実行結果: for-mixin.css
div.foo-1 { width: 100%; height: 20px; line-height: 20px; background-color: #999999; } div.foo-1 .text { width: 4em; color: #FFFFFF; } div.foo-2 { width: 100%; height: 20px; line-height: 20px; background-color: #000000; } div.foo-2 .text { width: 8em; color: #FFFFFF; } div.foo-3 { width: 100%; height: 20px; line-height: 20px; background-color: #999999; } div.foo-3 .text { width: 12em; color: #FFFFFF; } div.foo-4 { width: 100%; height: 20px; line-height: 20px; background-color: #000000; } div.foo-4 .text { width: 16em; color: #000000; } div.foo-5 { width: 100%; height: 20px; line-height: 20px; background-color: #999999; } div.foo-5 .text { width: 20em; color: #000000; } div.foo-6 { width: 100%; height: 20px; line-height: 20px; background-color: #000000; } div.foo-6 .text { width: 24em; color: #000000; } div.foo-7 { width: 100%; height: 20px; line-height: 20px; background-color: #999999; } div.foo-7 .text { width: 28em; color: #FF00FF; } div.foo-8 { width: 100%; height: 20px; line-height: 20px; background-color: #000000; } div.foo-8 .text { width: 32em; color: #FF00FF; } div.foo-9 { width: 100%; height: 20px; line-height: 20px; background-color: #999999; } div.foo-9 .text { width: 36em; color: #FF00FF; }
結構めんどくさいけど慣れたら楽なのかもしれませんね！
ソーシャルゲームでいうなら属性別に背景色と文字色かえるとかすればいいと思います。
なぜこれを最後にもってきたのかは疑問ですが、
extendで継承してみましょう。
- extend.scss
.foo { margin-top: 6px; margin-bottom: 10px; } .bar { @extend .foo; color: #FF0000; }
- 実行結果: extend.css
.foo, .bar { margin-top: 6px; margin-bottom: 10px; } .bar { color: #FF0000; }
ぱっとみやりたいことはできてそうですね！
.fooの後ろに, .barが追加されてます。
これも慣れてきたら結構楽につかえるんじゃないでしょうか。
ちなみに、
- extend_2.scss
.foo { margin-top: 6px; margin-bottom: 10px; } .bar { @extend .foo; color: #FF0000; } .hoge { @extend .foo; }
こんな感じで.hoge内が@extendしてるだけの要素があった場合、
- 実行結果: extend_2.css
.foo, .bar, .hoge { margin-top: 6px; margin-bottom: 10px; } .bar { color: #FF0000; }
単体の.hoge{}が作られないみたいですね。親切！
その他にも便利機能があるみたいです。
今回はいちいちコマンドたたいてscss->cssにしましたが、
自動書き出しも対応しているようです。
# まったくもって無責任ですが今回ためしてません。てへぺろっ。
- ファイル単位
sass --watch style.scss:style.css
- ディレクトリ単位
sass --watch path_to_directory
あとは圧縮。
sass --style compressed style.scss style.css
ばっちりぎゅっと圧縮してくれますよ！
色んな意味でぎゅっとして欲しい僕らに嬉しい機能！！
いかがでしょうか。
たぶん全然網羅できてないんですけど、LESS以外にもこんな選択肢がありますよ。
お手軽にめんどうなことを考えずにネストしたいだけならLESSだとは思いますが、非モテな僕らはそれでいいのでしょうか。
Ruby女子を狙うにしても、ぶっちゃけless-railsなんてライブラリも世の中には確かに存在します。
がしかし。非モテな僕らはきっとモテな人よりも何かアピールできるポイントをつくっておいたほうがいいんじゃないかな(棒読み)
まぁ大切なのはLESSもSCSSもどっちでもかまへんで！くらいの余裕を持った男子アピールができることでしょうね！ぜんぜんCSSかんけいない！！
女子力ならぬ男子力をあげてモテの仲間入りをめざしましょう！
ちなみにSinatraで使いたい人は
require 'sass' get '/style.css' do content_type 'text/css', :charset => 'utf-8' sass :style end
とかしてviewのhamlで%link{ :rel => "stylesheet", :href =>"/style.css" }すればいいと思いますよ。
