全部読む]]> Sassで楽する

cssを書くときに楽をしたい。変数とか使いたいし数値の計算したいし。関数みたいなものが使えたら楽なのに、と思っていたらSassでできた。使ってみたらすごく便利だった。

インストール

Sassのサイトにも書いてあるとおり

$ gem install sass

これだけ。

使い方

$ sass --watch hoge.scss:hoge.css

ターミナルでこういう命令をすると、hoge.scssが変更されるたびにhoge.scssがhoge.cssにコンパイルされる。

$ sass --watch sass:css

と書くと、sassフォルダに入っている.scssが全部cssフォルダに.cssとしてコンパイルされる。

$ sass --watch sass:css -t compressed

と書くとminifyされた状態でcssが出てくる。 超便利。

こういうCSSを作るとする

例えばメインコンテンツ部分が600px、サイドバーが300px。その間に20pxの隙間がある。clearifxでfloatの解除。 これをもっと楽に書きたい。

body {
    color: #000;
    background-color: #FFF;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
#wrapper {
    width: 920px;
}
#wrapper .content {
    float: left;
    width: 600px;
}
#wrapper .navigation {
    float: right;
    width: 300px;
}
.button {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#wrapper .button {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

Scss

$content: 600px;
$navigation: 300px;
$space: 20px;

@mixin radius($radius: 5px) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
}

body {
    color: #000;
    background-color: #F00;
}
a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}
.button {
    @include radius;
}
#wrapper {
    width: $content + $navigation + $space;

    .content {
        float: left;
        width: $content;
    }
    .navigation {
        float: right;
        width: $navigation;
    }
    .button {
        @include radius(10px);
    }
}

.clearfix {
    zoom: 1;

    &:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }
}

変数が使えるし数値の足し算とかできるしすごく便利。 書き方による部分がかなりある（参考にならないサンプルで申し訳ない）けれど、ブロックごとに分けられるし複数人で同じファイルを更新するとかそういう場合に助かると思う。

全部読む]]> Webフォントとして使えるアイコンセットを作りました。名前はWeb Icon Fonts。IE6にも対応しています。

Webフォント？

サーバーにあるフォントファイルを読み込んで表示する方法です。なので閲覧者の環境にそのフォントがインストールされていなくても問題ありません。 最近のブラウザではだいたい表示出来るので素敵です。

ライセンス

ライセンスはOFL。wikipediaのSIL Open Font Licenseに日本語でライセンスの解説が載ってます。

使い方

Web Icon Fontsにも書いてあるけれど、基本的な使い方はCSSで@font-faceを指定して、font-familyで使います。

CSS

@font-face{ 
    font-family: 'WebIconFonts';
    src: url('webiconfonts.eot');
    src: url('WebIconFonts.eot?') format('eot'),
         url('WebIconFonts.woff') format('woff'),
         url('WebIconFonts.ttf') format('truetype');
}

.icon {
    font-family: 'WebIconFonts';
}

HTML

<span class="icon">F</span> Facebook

これでこんな感じで表示される。

F Facebook

気になる人は

アイコンを表示するために意味のないテキストをソースに書くことが嫌な人はCSSのcontentを使うやり方がおすすめです。

.icon_facebook:before {
    font-family: 'WebIconFonts';
    content: 'F';
}

<span class="icon_facebook">Facebook</span>

Facebook