jmblog.jp » webdesign, design

Sass で出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話

Yoshihide — Fri, 12 Aug 2011 05:18:47 +0000

CSS3 のグラデーション（linear-gradient）を以下のように Sass の mixin にして使っています。IEにも対応できるようにしたつもりだったのですが・・・

IE の filter で色を指定する場合、「# + 6桁（#cccccc）」である必要があるため、mixin の引数に「# + 3桁（#cccとか）」を指定した時を考慮して、6桁に変換したものを $ieTopColor, $ieBottomColor という変数にセットするようにしました。

これで、うまく6桁に変換してくれるのですが、Sass の出力スタイルを “compressed” にすると、可能な限り 6桁のカラーコードを 3桁に変換してしまうため、結局意味がないというオチが・・・

何かうまい方法ないかなぁ・・・

続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

Yoshihide — Thu, 12 May 2011 02:34:10 +0000

@mixin を使ったやり方や、@function を使ったやり方を書きましたが、単純に変数を使えばいいんじゃね？というご指摘を Twitter で受けました。そうか。いや、まったくその通りです。

$yui-10px: 77%;
$yui-11px: 85%;
$yui-12px: 93%;
$yui-13px: 100%;
$yui-14px: 108%;
$yui-15px: 116%;
$yui-16px: 123.1%;
$yui-17px: 131%;
$yui-18px: 138.5%;
$yui-19px: 146.5%;
$yui-20px: 153.9%;
$yui-21px: 161.6%;
$yui-22px: 167%;
$yui-23px: 174%;
$yui-24px: 182%;
$yui-25px: 189%;
$yui-26px: 197%;

#main p {
font-size: #{$yui-14px};
}
p.error {
font-size: #{$yui-16px} !important;
}

これでスッキリしました。

続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

Yoshihide — Thu, 12 May 2011 01:49:12 +0000

「YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ」というエントリーで、@mixin を使ったフォントサイズの指定方法を紹介したのですが、Sass 3.1.0 から追加された、@function ディレクティブを使ったほうが、管理しやすいんじゃないかと思い、関数を書いてみました。

使い方は以下のようになります。

body {
font-size: -yui-font-size(10);

head {
font-size: -yui-font-size(12px);
}
}

引数に指定する値ですが、「10」と数字のみでも「10px」と「px」を付けても、Sass側でうまく変換してくれるようです。

@mixin を使った場合に比べて、タイピングする文字数が多いのが難点ですが、次のように !important をつけたい場合など、柔軟なスタイルシートを書けるメリットがあるかと思います。

#main p {
font-size: -yui-font-size(14);
}
p.error {
font-size: -yui-font-size(20px) !important;
}

[追記 2011-05-12]

続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよというエントリーを書きました。

「The 1Kb CSS Grid」をSCSS化してみた

Yoshihide — Tue, 10 May 2011 03:00:35 +0000

CSS フレームワークについて調べていたところ、「どんなCSSフレームワークがあるのか調べてみた一覧と感想 – ふじこのプログラミング奮闘記」で The 1Kb CSS Grid というフレームワークを見つけました。

他の多くのフレームワークには、レイアウトだけでなく、タイポグラフィーやフォーム要素のスタイルなども含まれていますが、The 1Kb CSS Grid はグリッドシステムのみ。コードは至ってシンプルで使いやすい！のですが、ダウンロードの際にグリッドの定義を決めなければならないので、異なる定義が欲しい時に、毎回ダウンロードしなければならず、ちとめんどくさい。

ということで、変数の値を変えるだけでOKなように、SCSS化してみました。

Grid Settings のところにある、3つの変数（$columns, $col_width, $gutter）の値を変えてコンパイルすれば、好きな定義の CSS が手に入りますです。

[追記]

オリジナルの The 1Kb CSS Grid では、.column と .grid_xx を必ずセットで指定しなければならないようです。

たぶんCSS の管理上、クラスを分けてるんでしょうが、HTMLのコードがあまりにも冗長。というわけで、@extend を使ってちょっと変更してみました。

これで、CSS（SCSS）の管理も問題ないし、HTMLもより簡潔に書けます。

YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

Yoshihide — Sun, 24 Apr 2011 09:40:50 +0000

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509 というエントリーを見て、最近 CSS Fonts を SCSS で管理するようになってすごく楽になったので、ご紹介。

_fonts.scss といったような名前で次のような mixin を追加した SCSS ファイルを用意します。

これを style.scss などで include して使います。こんな感じ。

@import "fonts";
header {
h1 {
@include font_15;
}
}

これをコンパイルすると、次のような style.css が生成されます。

/* YUI Fonts.css
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body { font: 13px/1.231 arial, helvetica, clean, sans-serif; *font-size: small; *font: x-small; }

select, input, button, textarea { font: 99% arial,helvetica,clean,sans-serif; }

table { font-size: inherit; font: 100%; }

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; }

header h1 { font-size: 116%; }

「15px にしたい場合は、何％なんだっけ？」とわざわざ確認しなくても直感的に記述できるので、気に入ってます。

[追記 2011-05-12]

続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよというエントリーを書きました。

[追記 2011-05-12]

さらに続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよというエントリーを書きました。

jmblog.jp » webdesign, design

Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話

続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

「The 1Kb CSS Grid」をSCSS化してみた

YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

Sass で出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話