サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
tenderfeel.github.io
補完:#{} Sassは補完を行うための構文として#{}を用意しています。 変数に入った文字列は通常は値として認識されてエラーが出てしまうので、そのままだとプロパティの値にしか使用できませんが、 シャープ記号を前に置いた波括弧 #{}と組み合わせることでセレクタやプロパティ名にも使うことができるようになります。 以下はセレクタとプロパティに変数へ代入した文字列を使用するサンプルです。 $name: note; $attr: border; p.#{$name} { #{$attr}-color: blue; } コンパイルすると、変数を使用した所がきちんと文字列に置き換わっています。 p.note { border-color: blue; } #{}を使えばプロパティの値にSassScriptを置くことができます。 とはいえ、変数や関数、数式などをプロパティの値で使うことは普通にできるの
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは1ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 (ついでにかなり加筆修正しています) 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
SassはCSSとよく似ていますが、CSSでは出来ないことが出来ます。 このページでは、使うときに避けては通れない基本中の基本について解説しています。 @import 有効な条件 ファイル名先頭にアンダースコアを付けるルール(partial) 複数指定 変数と文字列補完 @importのネスト コメント 文字コードの指定 Windows環境におけるRuby の外部エンコーディング問題 ネスト プロパティのネスト 親のセレクタを参照する @import CSSも300行を超えてくると分割したくなると思います。 もともとCSSには @import で他のCSSファイルを読み込むことが出来ますが、 Sassの@importはオリジナルよりもちょっと便利になっています。 有効な条件 1. ファイル名に拡張子.cssがついている @import "foo.css"; 2. ファイル名が http:/
Sassファイルの中では数値型の値に記号を使うことで計算をすることができます。 計算で使える記号は+(プラス:足す)、 -(ハイフン:引く)、 *(アスタリスク:掛ける)、 /(スラッシュ:割る)、 %(パーセント:割った余りを求める)です。 次のソースは「#barを#fooより10px大きくする」という指定に足し算を使用したものです。 $width:100px; #foo { width:$width; } #bar { width:$width + 10; } 10足す所で単位を省略していますが、変数$widthに代入した100pxという値が単位つきなので、コンパイルすると110pxという値で出力されます。 数値型には色々な単位をつけることができますが、複数の単位を混ぜて計算することはできません。 前のソースの10足している所にemという単位をつけてコンパイルをしてみると、 #bar
はじめに Sassと愉快な仲間たち 仲間の紹介 Sassがおすすめなたった一つの理由 さくっと手触りを試すには? Sassと愉快な仲間たち 2年前くらいはまだCSS3のモジュールなどは趣味レベルでしか使えないマニアックなものでしたが、スマホが幅を効かせるようになってからというもの、CSSを使う環境は随分と様変わりしています。 ブラウザがLevel3のモジュールに対応するようになると、CSSで出来ることが増えるのと引き換えに表現するための記述はより複雑になりました。 モノによってはプログラミングと言ってもいいくらいのコード量になるのに、プログラミング言語ではないから素のままでは単純な計算すらできません。 Sassはメタ言語(またはプリプロセッサ)と呼ばれるものです。 素では出来ないことを出来るようにして、とにかく便利に楽ちんにしてくれる、一度使ったら手放せなくなるとても便利な道具です。 これ
Sassを使ってみよう 記法と拡張子のルール ディレクトリを作る コンパイル Watchモード 何か書いてみる 記法と拡張子のルール Sassには記法が2種類あって、その名称と同じ拡張子をファイルにつけるのが慣例になっています。 公式サイトのドキュメントなどで大文字で書いてある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 {
このページを最初にブックマークしてみませんか?
『tenderfeel.github.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く