はてなブックマーク

このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。

Sassファイルの中では数値型の値に記号を使うことで計算をすることができます。 計算で使える記号は+（プラス：足す）、 -（ハイフン：引く）、 *（アスタリスク：掛ける）、 /（スラッシュ：割る）、 %（パーセント：割った余りを求める）です。 次のソースは「#barを#fooより10px大きくする」という指定に足し算を使用したものです。 $width:100px; #foo { width:$width; } #bar { width:$width + 10; } 10足す所で単位を省略していますが、変数$widthに代入した100pxという値が単位つきなので、コンパイルすると110pxという値で出力されます。 数値型には色々な単位をつけることができますが、複数の単位を混ぜて計算することはできません。 前のソースの10足している所にemという単位をつけてコンパイルをしてみると、 #bar

SassはCSSとよく似ていますが、CSSでは出来ないことが出来ます。 このページでは、使うときに避けては通れない基本中の基本について解説しています。 @import 有効な条件 ファイル名先頭にアンダースコアを付けるルール（partial） 複数指定 変数と文字列補完 @importのネスト コメント 文字コードの指定 Windows環境におけるRuby の外部エンコーディング問題 ネスト プロパティのネスト 親のセレクタを参照する @import CSSも300行を超えてくると分割したくなると思います。 もともとCSSには @import で他のCSSファイルを読み込むことが出来ますが、 Sassの@importはオリジナルよりもちょっと便利になっています。 有効な条件 1. ファイル名に拡張子.cssがついている @import "foo.css"; 2. ファイル名が http:/

はじめに Sassと愉快な仲間たち 仲間の紹介 Sassがおすすめなたった一つの理由 さくっと手触りを試すには？ Sassと愉快な仲間たち 2年前くらいはまだCSS3のモジュールなどは趣味レベルでしか使えないマニアックなものでしたが、スマホが幅を効かせるようになってからというもの、CSSを使う環境は随分と様変わりしています。 ブラウザがLevel3のモジュールに対応するようになると、CSSで出来ることが増えるのと引き換えに表現するための記述はより複雑になりました。 モノによってはプログラミングと言ってもいいくらいのコード量になるのに、プログラミング言語ではないから素のままでは単純な計算すらできません。 Sassはメタ言語（またはプリプロセッサ）と呼ばれるものです。 素では出来ないことを出来るようにして、とにかく便利に楽ちんにしてくれる、一度使ったら手放せなくなるとても便利な道具です。 これ

Sassを使ってみよう 記法と拡張子のルール ディレクトリを作る コンパイル Watchモード 何か書いてみる 記法と拡張子のルール Sassには記法が２種類あって、その名称と同じ拡張子をファイルにつけるのが慣例になっています。 公式サイトのドキュメントなどで大文字で書いてあるSASS、SCSSは記法の略称です。 以下は記法を表にまとめたものです。 #main { color: blue; font-size: 0.3em; } #main a { font: { weight: bold; family: serif; } #main a:hover { background-color: #eee; } #main { color: blue; font-size: 0.3em; a { font: { weight: bold; family: serif; } &:hover {

このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。