Sass/Compass紹介

CSSプリプロセッサSassとフレームワークCompassの簡単な文法紹介です。



従来のCSS開発はプログラミングのようにできないので、重複コードやメンテナンス性はよくない欠点があります。Sassは簡単な文法でCSSを自動的に作成できるようなプリプロセッサです、簡単にいえば開発言語ではなく、C言語のマクロのようなものです。CompassはSassのライブラリのようなものです、少ないコードで素晴らしいCSS効果を簡単に実装できます。

オフィシャルサイト
http://sass-lang.com/
http://compass-style.org/
http://zengrids.com/

＊zengridsはページレイアウト設計のフレームワークです。

Sass文法纏め

１、変数例

$mycolor:#cc11ee;
.div1
{
    color:$mycolor;
}

$side:left;
.div2
{
    border-#{$side}-radius:3px;
}

２、計算処理

body
{
    margin:(14px/2);
    top:50px + 40px;
    padding-right:$var * 10%;
}

３、ネスト

div
{
    h1
    {
        color:blue;
    }
}

span
{
    border:
    {
        color:yellow;
    }
}
＊borderの後ろのコロンは必要不可欠です。

４、コメント

C言語と同じようですが、違いの理解も重要です。

/* This is a block comment. */
コンパイル後のCSSにも入ります。

// This is a line comment.
コンパイル後のCCSには入りません。

５、継承

.class1
{
    border:1px solid red;
}
.class2
{
    @extend .class1;
    font-size:14px;
}

５、Mixin
C言語のマクロに似ます。

@mixin left
{
    float:left;
    margin-left:20px;
}

@includeを使ってmixinを使う
div
{
    @include left;
}

引数指定

@mixin left($value:5px)
{
    float:left;
    margin-left:$value;
}
＊$valueの暗黙値も指定した。

div
{
    @include left(20px);
}

６、カラー関数
Sassは内部的にカラー関数を提供しています。

使用例
lighten(#cc3, 10%) //#d6d65c
darken (#cc3, 10%) //#a3a329
grayscale(#cc3)    //#808080
complement(#cc3)   //#33c

７、インポート
外部ファイルを参照する

@import("path/filename.scss");

８、条件判断

p
{
    @if 1+1==2 {border:1px solid red;}
    
    @if 5<3 {border:2px dotted green;}
    @else {border:5px double blue;}
}

９、ループ処理

@for $i from 1 to 10
{
    .border-#{$i}
    {
        border: #{$i}px solid red;
    }
}

$i:3;
@while $i > 0
{
    .item-#{$i} {width:2px * $i;}
    $i:$i - 1;
}

@each $member in a,b,c,d
{
    .#{$member}
    {
        background-image:url("/img/#{$member}.png");
    }
}

10、関数定義

@function myfunc($a, $b)
{
    @return $a + $b;
}
#sidebar
{
    width: myfunc(3px, 5px);
}