Sass
Sassメモ：!default を使った変数定義
$kabegami: "../img/kabegami.png" !default; Sassで変数定義をする時 !default を設定しておくことで、Sass記述中に変数値の変更をできるようになり…Sassメモ：rgba()値を簡単に出す
.box { background: rgba(255,255,102,0.5); } rgba()を使った色指定は簡単に半透明も含められるので便利ですが、16進数の色コードに慣れているとRGB値で書くのは結構手間です。…Sass：for文で一定パターンのCSSを生成する
下記のような一定パターンのCSSを量産したい時にSassのfor文が役に立ちます。 .fs10 {font-size:10px;} .fs11 {font-size:11px;} .fs12 {font-size:12p…Sass：@functionで関数を作る
Sassには多数の標準関数がありますが、不足があれば自分で作れます。 基本形は下記の記法。 @function 関数名($引数) { @return 処理; } 例えば下記の例。 @function boxWidth($…Sass：@extend でCSSクラスを統一しよう
あるCSSクラスをベースに、右詰めや左詰めなどバリエーション違いのクラスを作りたいというケースに @extend は使えます。 下記はSass記法例。 .box { width: 300px; height: 200px…Sassメモ：@mixin と @include でCSSプロパティを楽に統一しよう
似たようなスタイルのパターン違いを作る時など、同じプロパティを書くのは手間なので @mixin と @include で楽しましょう。下記はSass記法例。 @mixin boxSize() { width:200px;…Sassメモ：変数を使って値を統一しよう
変数を設定しておくことで、CSSの値の統一性を取れます。下記はSass記法例。 $gray: #999; $red: #f00; $blue: #00f; .red { color: $red; } .error { c…