悪あがきプログラマー

悪あがきを続けていきたい技術と書評なブログです。トレタでiOSエンジニアやってます。

ドットインストールのSass/SCSS入門をやってみた

先日のドットインストールのBackbone.js入門をやってみた - 悪あがきプログラマーに引き続きSass/SCSS入門をやってみました。
Sass/SCSS入門 (全15回) - プログラミングならドットインストール

環境構築

ディレクトリを作ります。

sass_lessons/css/
sass_lessons/scss/

sassのインストール

Rubyは入っていることが前提です。

$ gem install sass

SassをCSSに変換する

SassをCSSに変換する

$ sass scss/main.scss:css:main.css

SassをCSSに自動変換する

$ sass --style expanded --watch scss:css

style expanded はデフォルトでは出力CSSはネストされるのですが、それを平らに戻してくれるオプションです。

watch scss:css は自動変換するディレクトリを監視するオプションです。scssディレクトリを監視してcssディレクトリに出力します。

ソース

すみません、ドットインストールまんまです。個人的に見やすいように並べただけです。まずかったら消すので言ってください。
Sass/SCSS入門 (全15回) - プログラミングならドットインストール

#04 入れ子構造を使ってみよう

main.scss

/* comment */
/*
comment
comment
*/

// comment

#main {
    width: 90%;
    p {
        font-size: 16px;
        a {
            text-decoration: none;
            &:hover {
                font-weight: bold;
            }
        }
    }
}

main.css

/* comment */
/*
comment
comment
*/
#main {
  width: 90%;
}
#main p {
  font-size: 16px;
}
#main p a {
  text-decoration: none;
}
#main p a:hover {
  font-weight: bold;
}
#05 変数を使ってみよう

main.scss

// 変数:データにつけるラベル
// データ型(数値、文字列、真偽、色、リスト)
// + - * /
 
$baseFontSize: 14px;
 
#main {
    width: 90%;
    p {
        font-size: $baseFontSize;
        .sub {
            font-size: $baseFontSize - 2px;
        }
    }
}

main.css

#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}
#main p .sub {
  font-size: 12px;
}
#06 文字列を扱ってみよう

main.scss

// 変数:データにつけるラベル
// データ型(数値、文字列、真偽、色、リスト)

$imgDir: "../img/";

#main {
    width: 90%;
    background: url("#{$imgDir}bg.png");
    p {
        font-size: #{12 + 12}px;
    }
}

main.css

#main {
  width: 90%;
  background: url("../img/bg.png");
}
#main p {
  font-size: 24px;
}
#07 色を扱ってみよう

main.scss

// 変数:データにつけるラベル
// データ型(数値、文字列、真偽、色、リスト)
 
$brandColor: rgba(255,0,0,0.9);
 
// lighten darken
 
#main {
    width: 90%;
    p {
        color: lighten($brandColor, 30%);
        font-size: 14px;
    }
}

main.css

#main {
  width: 90%;
}
#main p {
  color: rgba(255, 153, 153, 0.9);
  font-size: 14px;
}
#08 @if文を使ってみよう

main.scss

// データ型(数値、文字列、真偽、色、リスト)
// 条件分岐 @if @else
// == != < > <= >=
 
$debugMode: true;
$x: 10;
 
#main {
    @if $debugMode == true {
        color: red;
    } @else {
        color: green;
    }
    p {
        @if $x > 20 { color: yellow; }
    }
}

main.css

#main {
  color: red;
}
#09 @for, @while文を使ってみよう

main.scss

// ループ
// @for
// @while

// .fs10 { font-size: 10px; }

@for $i from 10 through 14 {
    .fs#{$i} { font-size: #{$i}px; }
}

$i: 10;
@while $i <= 14 {
    .fs#{$i} { font-size: #{$i}px; }
    $i: $i + 1;
}

main.css

.fs10 {
  font-size: 10px;
}

.fs11 {
  font-size: 11px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}

.fs10 {
  font-size: 10px;
}

.fs11 {
  font-size: 11px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}
#10 リストを扱ってみよう

main.scss

// リスト(似たようなデータをまとめて管理)
 
// $animals: cat, dog, tiger;
 
@each $animal in cat, dog, tiger {
    .#{$animal}-icon { background: url("#{$animal}.png"); }
}

main.css

.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}
#11 #12 関数を使ってみよう

main.scss

// 関数
 
$totalWidth: 940px;
$columnCount: 10;
 
@function getColumnWidth($width, $count) {
    // $columnWidthを計算
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}
 
.grid {
    float: left;
    width: getColumnWidth($totalWidth, $columnCount);
}

main.css

.grid {
  float: left;
  width: 85px;
}
#13 ファイルを分離させてみよう

main.scss

// 関数
 
@import "settings";
@import "functions";
 
.grid {
    float: left;
    width: getColumnWidth($totalWidth, $columnCount);
}

_settings.scss

$totalWidth: 940px;
$columnCount: 10;

_functions.scss

@function getColumnWidth($width, $count) {
    // $columnWidthを計算
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

main.css

.grid {
  float: left;
  width: 85px;
}
#14 @mixinを使ってみよう

main.scss

// mixin
 
@mixin round($radius:4px) {
    border-radius: $radius;
}
 
.label {
    font-size: 12px;
    @include round(10px);
}

main.css

.label {
  font-size: 12px;
  border-radius: 10px;
}
#15 @extendを使ってみよう

main.scss

// @extend (継承)
 
// .errorMsg
// .warningMsg
 
.msg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color: white;
}
 
.errorMsg {
    @extend .msg;
    background: red;
}
 
.warningMsg {
    @extend .msg;
    background: orange;
}

main.css

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

まとめ

Sass/SCSSを初めて使ってみたわけですが、これは一度使ったら手放せない感があります。
個人的にはネストとかlightenがとても便利に使えそうです。