Hatena::Groupcss

つみきスタイル このページをアンテナに追加 RSSフィード

2013.1.30

[][]CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド 06:53 CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル を含むブックマーク はてなブックマーク - CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル のブックマークコメント

もはやスパムの墓場にすらなってる感じの当グループですが、みなさまいかがお過ごしでしょうか。諸事情によりidと名前が変わった鵜巷です。

世の中の変遷は凄まじいもので、インターネット新時代やらWeb2.0やらもすっかり過ぎ去り、ブラウザついてりゃどこでも動くウェブアプリケーションの時代、HTML5+JavaScriptでなんでも作っちゃう世界がやって来ました。ウェブアプリケーションの開発が活発になったため、CSSによるデザインについても開発効率を向上させるニーズが大きくなりました。CSSって書くのものすごく辛いですもんね。親子関係とか親子関係とか親子関係とか。

というわけで最近流行りのスタイルシートを動的に出力するための言語をやってみようという話。主に使用されているCSSメタ言語は LESS と SCSS がありますが、今回挑戦するのはSCSSです。SCSSを選択した理由は、

  • 出力されるCSSがすっきりまとまっている
  • Mixin(自分で用意できるCSSコードブロック)の仕様が好み(可変長引数とか)

あたりです。LESSのほうがシンプルだしとっつきやすそうですが、のちのち書いてるうちに辛くなりそうなのでやめときました。LESS と SCSS の比較記事はたくさん書かれているので検索してみましょう。

導入

SCSSはCSSではなく、そのままではブラウザに読ませることは出来ないため、SCSSからCSSにコンパイルする作業が必要になります。SCSSを始めるにあたって、まずその仕組を準備しなければいけません。

1. Ruby のインストール
Windows
http://rubyinstaller.org/から実行ファイルをダウンロードしてインストール。インストール時に必ず「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れること
MacOS
最初から入ってるらしい
Linux
わかるだろ
2. Sass のインストール

コマンドプロンプトで

> gem install sass

試してみる

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

上記を style.scss という名前で保存。SCSSを記述するファイルの拡張子は .scss で統一しときましょう。

コマンドプロンプトで

> sass style.scss style.css

と打てば、

.content-navigation {
  border-color: #3bbfce;
  color: #2ca2af; }

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce; }

という内容で style.css が出力されます。インデントが気に入らない場合、

> sass -t expanded style.scss style.css

とすればいつもの感じになります。

> sass -t expanded --watch style.scss:style.css

と打つと、 style.scss の監視を始め、 style.scss を更新するたび style.css を自動で書き換えてくれます。開発するとき便利ですね。

あとはこのへん(http://sass-lang.com/tutorial.html)みて。

日記

SCSSの練習にはてなダイアリー公開デザインをSCSSで書いてみようと思って導入記事かいてみた。ところで、公開デザインの公開者名だけ変更したいんだけどなんか手段ないだろうか。多分なさそうなので新規で公開しなおして古いのを非公開にするかなぁ。

cf.

SinemSinem2013/11/22 01:58You've hit the ball out the park! Inreidcble!

JesuussJesuuss2013/11/23 01:44Just the type of <a href="http://ixewhwrl.com">insgiht</a> we need to fire up the debate.

AslanAslan2013/11/23 13:49Phnoamenel breakdown of the topic, you should write for me too! http://spyrcjhx.com [url=http://craxkr.com]craxkr[/url] [link=http://grxszosnu.com]grxszosnu[/link]

VitoriaVitoria2013/11/25 09:01This article aceeivhd exactly what I wanted it to achieve. http://ibfdyoiw.com [url=http://rjmkgxyj.com]rjmkgxyj[/url] [link=http://gcipqsvrv.com]gcipqsvrv[/link]

keyword

はてなダイアリーの構造

■ はてなダイアリーの構造 はてなダイアリーのデザインの参考にしてください。 ダイアリーの構造 ヘッダの構造 カスタマイズに関するメモ ■ ブックマーク...

box-sizing

■ 注意 Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。 実験的なものなので将来削除される可能性があります。 ■ 用語の簡単な解説 &#...

はてなブックマークの構造

■ はてなブックマークの構造 はてなブックマークのデザインの参考にしてください。 ブックマークページの構造 タグリスト絞り込みの構造 コメント直接編集機能の構...

はてなアンテナの構造

はてなアンテナの構造です 基本の構造 アンテナモード シンプルモード 詳細モード ■ 基本の構造 html body table tbody ...

はてなグループの構造::日記::日記を書くの構造

■ /css.g.hatena.ne.jp/UserID/edit ←はてなグループの構造←はてなグループの構造::日記の構造 ■ ページの構造 html body table //はてなヘッダ h1 div#ha...