Webサイトコーディングのあれこれ: Sassの便利な記法をまとめて忘備録にしよう

今回はSassの忘備録を準備しましょう。
Sassでコーディングをしていると、
どうしても使用頻度が少ないコードを忘れがちなので
いつでも使えるように自分なりにまとめて一覧を作ってみました。

まずはSassをCSSに変換してくれるサイトにアクセスしブックマークしておきましょう。

http://www.sassmeister.com/

SassがどのようにCSSに変換されるかが確認できます。

上記サイトの左側にSassを記述し、どのようにCSSに変換されるか
確認しながらSaaa忘備録一覧を作っていきます。

【以下からSassコード】

@charset "UTF-8";

/* &で親セレクタを参照 */
/*
.link ←参照される親セレクタ{
background:#000;
a & ←親セレクタを参照する記号 {
    color:#fff;
}
}
*/
.link {
background:#000;
a & {
    color:#fff;
}
}

/* クラスごとに書式を変更 */
ul li {
    line-height:1.4;
    &.first {
        color:#f00;
    }
    &.second {
        color:#ff0;
    }
    &.last {
        color:#0ff;
    }
}

/* ロールオーバー */
ul li {
    line-height:1.4;
    a {
        &:hover {
            text-decoration:underline;
        }
        &:active {
            color:#f00;
        }
    }
}

/* プロパティ名のネスト */
h1 {
    margin: {
        top:10px;
        right:20px;
        bottom:15px;
        left:0;
    }
    border: {
        left:solid 4px #f00;
        bottom:solid 1px #ddd;
    }
}

/* グローバル変数 */
$haba:1200px;
$iro:#fff;

#content-area {
    width:$haba;
    background:$iro;
}

/* 変数を使って文字列を指定 */
$f: "/img/icon/";

ul li {
    .first {
        background:url(#{$f}icon1.png) no-repeat 0 0;
    }
    .second {
        background:url(#{$f}icon2.png) no-repeat 0 0;
    }
    .last {
        background:url(#{$f}icon3.png) no-repeat 0 0;
    }
}

/* ローカル変数 */
div {
    $iro:#000;
    background:$iro;
    border:solid 1px $iro;
}

/* ローカル変数をグローバル変数にする場合 */
div {
    $iro:#fff !global;
    padding:20px;
}

p {
    color:$iro;
}

/* 数式を使った幅指定(300px) 記号の前後に半角スペ必須*/
$space:10px;
$waku:1px;

div {
    width:300px - ($space + $waku) * 2;
    padding:0 $space;
    border:solid $waku #000;
}

/* 割り算の場合は（）で囲む */
div {
width:(300px / 2);
}

/* 変数と数式を使って三等分に分ける */
/* 三等分の数式
(幅 - スペースの幅 * スペースの数) / 分ける数
*/
#nav-area {
    $haba:900px;
    $space:15px;
    width:$haba;
    ul {
        width:$haba;
        position:relative;
        &:after {
            display:block;
            content:"";
            clear:both;
        }
    }
    li {
    float:left;
        width:($haba - $space * 4) / 3;
        margin: {
            left:$space;
        }
    }
}

/* よく使う書式を設定(透過例) */
@mixin touka {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}

a:hover img {
    @include touka;
}

これで一通りのSass一覧ができましたので
適当に名前をつけたフォルダ（コーディングメモ等）を作ってその中にsass.scssファイルを作り
コード一覧をコピーし保存しておきましょう。

Sassには他にも便利な記法がたくさんありますので
使えそうだなという記法を見つけたら都度書き足したり修正していけばいいかと思います。

次回は「CSSの忘備録を作ろう」です(/・ω・)/