[B! SCSS] love0hateのブックマーク

ネストを覚えた人のためのSassの便利な使い方

11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }

love0hate 2014/01/03

リンク

sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog

こんにちは。年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す

love0hate 2013/03/09

SCSS

リンク

Sass(Scss) Memo: @if | Culture27

今回は@ifについてです。 @if、@else if、@elseが使えます。こんな感じ。 Scss $var1: aaa; @if $var1 == 'bbb' { /* A:$var1 が bbb の場合に出力される */ } @else if $var1 == 'ccc' { /* B:最初の条件を満たさず、$var1 が ccc の場合に出力される */ } @else if $var1 == 'aaa' { /* C:2つの条件を満たさず、$var1 が aaa の場合に出力される */ } @else { /* D:それ以外の場合に出力される */ }

love0hate 2013/03/09

SCSS

リンク

Sass - チュートリアル

この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストールまず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート非