Sassで計算する時は丸め込みを忘れずに といったタイトルに反して自分も結構丸め込みを忘れがちですが… 例えば下記のような例だと、widthの値が小数点以下になるのが明確です(161.8px) $size: 100px; $goldretio: 1.618; .… ゴトーハック2014.03.24 6,145
【SASS】partialのパスは相対パスであれば辿れる @import "mixins"; と書いていたパスも @import "../../themes/default/sass/mixins"; と相対パスで記述することで、別階層に… Yukimi Satoハック2014.03.24 2,301
画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する そもそも「Data URI」って何?って話ですが、例えば下記の画像。 実はスマホでGmailを表示した際に使われているアイコン画像なのですが、画像のリンクを開いたURLを見てください。外部に存在する画像を参照しているので… ゴトーハック2014.03.20 918
ベンダープレフィックスが面倒な人に贈る、常用Compass(Sass)ミックスイン 「-webkit-」「-moz-」といったベンダープレフィックス付きで複数書かなければならないCSSプロパティは面倒ですよね。Compassミックスイン使って楽しましょう。 @include border-radius(… ゴトーハック2014.03.20 570
Sassの応用:importを活用してファイル分割管理する クロスドメインの関係で、全く同じ内容のCSSをほんの一部だけ書き換えて別のファイルに分離させるなんて事がありました。 普通ならばCSSの二重管理になるので避けるべきですが、SassでCSSを出力していれば若干の工夫で楽に… ゴトーハック2014.03.04 2,628
CSS3:ロードアイコンパターン2 表示サンプルはこちら。IEは10以上で正常表示可能。http://jsdo.it/goto_jp/drYc HTMLは下記のみです。 <span class='icon2'></sp… ゴトーハック2014.02.21 275
CSS3:ロードアイコンパターン1 表示サンプルはこちら。IEは10以上で正常表示可能。http://jsdo.it/goto_jp/xVRa HTMLは下記のみです。 <span class='icon'></spa… ゴトーハック2014.02.19 192
Sassメモ:if文で分岐 Sass記法内ではif文を使うことができます。 $value: false; .box { @if $value { margin: 0; } @else { margin: 10px; } } 上記の場合、CSSでは下… ゴトーハック2014.02.18 817
Sassメモ:ネストの中で親要素セレクタを含める .box { background-color:#ccc; .child { color:#09c; } .parent & { margin:10px 0; } } 上記の「.parent &」のように… ゴトーハック2014.02.17 1,657