cube1192のブックマーク / 2012年8月13日

cube1192 id:cube1192

2012年8月13日のブックマーク (3件)

Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込みカラム幅の変更カラムの入れ替え SCSSで完結することの意義まとめ最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
cube1192 2012/08/13
sass
リンク
(S)CSSの書き方メモ
HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ！　というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.google apis.com/css?family=Pacifico"); @import "va
cube1192 2012/08/13
sass
リンク
jmblog.jp – 背景色に応じて最適な文字色を自動判定する SCSS mixin を書いてみた
- 4 users
- jmblog.jp
- 学び
Sass、そしてSassy CSS (SCSS) を読んで、俄然 SCSS に興味が出て、新しいプロジェクトで試しています。「CSS でこう書けたらいいのになぁ」という記法をサポートしていて、ものすごく便利です。特に mixin で関数を用意すると非常に強力。というわけで、表題のような mixin を書いてみました。まぁ、そんな大げさなものでもないですが。 @mixin suitable-text-color($bgcolor) { @if lightness($bgcolor) < 50 { color: #fff; } @else { color: #000; } }
cube1192 2012/08/13
sass
リンク
- 2012年8月16日
- 2012年8月13日
- 2012年8月10日