Sass Color Generator # / %
構造は同じで値が違うCSSクラスをたくさん用意しなくてはいけないケースにおいて、手動で一つずつコピペして記述しているとミスが起こりやすく管理も煩雑になってしまいます。こんなときはSassを使って色やその他の設定を一ヶ所にまとめてしまいたくなります。なりませんかそうですか。 Sassのコレクションを使う Sassで配列を使う場合は()を使って下記のように記述します。 $color-list: (#000, #333, #666, #999, #ccc); これをプログラミング言語のように $color-list[0] などとやりたいところですが、これだとエラーになってしまいます。 nth関数を使う nth関数というlistにアクセスするための関数が用意されていますので、こちらを利用します。 nth($color-list, 1); これで#000が取得できます。インデックスは1番目からです。
はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい(おきたかった)基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル(セレクタ・class)に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列(リスト)を使って
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。 CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。 環境 OSX 10.9.5 Google Chrome 42 Sass 3.4.13 Compass 1.0.3 sourcemapの生成 Sassのコンパイル時にsourcemapを生成させる。 config.rbにsourcemap = trueを追加するだけ。 sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。 環境設定によって振り分けて、以下のように編集する。 これでSassのコンパイル時にCSSのディレクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く