Drkcore

04 03 2013 Sass Tweet

Stylusのように舞い、HamlのようにSass

デザイン力とかCSS力が足りないので今年はそこら辺を強化しようとおもっているんだが、CSS拡張メタ言語のいいところは、先人の知恵をライブラリとして取り込んでコモディティ化できることかなと思っている。

既にhail2u.netでも書かれていた

様々なところで公開されているCSSのエッセンスを取り込んだ自分なりのCSS製作環境を構築するというような利用の仕方もできる。つまりはこれこそが必要とされていたスタイルシート言語ということなのではないか。Sass、そしてSassy CSS (SCSS)

Stylus(そしてnib)は構文が好みなんだけど、ユーザーの層が薄いのでとりあえずはSassに入門してみることにした。

インストール

Rubyはrbenvで入れてあるので

$ gem update --system
$ gem install sass
$ gem install compass

でok

Sassを学ぶ

ちょっと前にズルいStylus書いててStylusの構文というかそういったあたりのmix-inとかは理解しているので、構文はチュートリアルをざっと読めば理解できた。大体似たような構文だけどsigilがperl風味。

StylusがpythonっぽいとするならLESSとかSass(Scss)はperlとかrubyっぽい。そう考えるとsassはインデントでネストを表現するperlみたいな印象を受けるのでちょっと気持ち悪いし、Stylusのほうがスッキリしていて綺麗に見えるのは納得できる。だったらsassじゃなくてscssで書いたほうがいいかなぁとも思う。

次に、CSS Preprocessor Advent Calendar 2012を読めばよい。これでかなり理解が深まるが、特にOOCSSとSassは構造化の観点からCSSを考える上で非常に参考になる。

cssはクラスベースというよりはプロトタイプベースの継承って考えたほうがしっくりくるかもしれんなぁと思った。spineのextendとincludeと似たような感じだしねー。

あとは次のスライドを読めばいいですね。

  • Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ

Emacsの設定

M-x list-packagesからscss-modeをインストールする。

これはデフォルトで保存時にコンパイルが走ってうざいのと、インデントが4文字スペースなのでscss-mode.elを使うの通りに設定を変更しておく。

ちなみにファイルを開くとflymake関連エラーが出るけどそれは直してない。

ProductName Sass and Compass in Action
Wynn Netherland
Manning Pubns Co / 4356円 ( 2013-02-28 )


About

  • もう5年目(wishlistありマス♡)
  • 最近はPythonとDeepLearning
  • 日本酒自粛中
  • ドラムンベースからミニマルまで
  • ポケモンGOゆるめ

Tag

Python Deep Learning javascript chemoinformatics Emacs sake and more...

Ad

© kzfm 2003-2021