1. SCSSとは何か

Sass

CSSの大規模開発における問題を解決し、

・保守性

・開発効率

を改善するために開発された、

CSSの拡張言語。

コンパイラでCSSに変換して使う

    table.hl {
      margin: 2em 0;
      td.ln {
        text-align: right;
      }
    }
    
    @mixin table-base {
      th {
        text-align: center;
        font-weight: bold;
      }
      td, th {padding: 2px}
    }
    
    #data {
      @include left(10px);
      @include table-base;
    }

ScssはSassという言語の

「書き方」の一種

SassにはSassとScssという二種類の記法があり、

Scssの方が新しく、かつCSSに近い書き方なので一般的

2. 大規模開発におけるCSSの問題とは何か

1. スタイルの影響範囲が難解

Webサイトの開発が大規模になるにつれて、

CSSファイルも巨大化、複雑化の一途を辿る

定義したセレクタ名を忘れ、

重複させてしまう事故が多発するようになる

.table .table-name {
    color: blue;
}

......2000行後


.table-name {
    color: red;
}

2. 何度も同じセレクタを書く必要がある

子要素にスタイルを適用するために、

上位のセレクタを何度も書く必要がある。

クッソ汚い。

#table .table-name {
    color: blue;
}

#table .table-name tr {
    border: 1px solid #000000;
}

#table .table-name tr td .small-text {
    font-size: 1px;
}

3. 何度も同じスタイルを書く必要がある

似たような記述を何度もしなければいけない

共通クラスに分離する手法もあるが闇

#table .table-name {
    color: blue;
    margin: 10px 0;
    padding: 7px;
}

#table .table-name tr {
    border: 1px solid #000000;
    margin: 5px 1px;
    padding: 5px;
}

#table .table-name tr td {
    font-size: 20px;
    margin: 12px 6px;
    padding: 12px;
}

4. 何度も同じカラーコード、数値を書かなければならない

共通のカラーコードが変わったら？

共通の値が変わったら？

全部書き直し？？？？？

#table .table-name {
    color: #000000;
}

#table .table-name tr {
    border: 1px solid #000000;
}

#table .table-name tr td {
    backgrount-color: #000000;
}

3. Scssで問題解決

1. セレクタのネスト構文

table.hl {
  margin: 2em 0;
}

table.hl td.ln {
  text-align: right;
}

下位要素のセレクタをネストできる

上位要素でネストすれば影響範囲を固定できる

table.hl {
  margin: 2em 0;

  td.ln {
    text-align: right;
  }
}

2. @mixin構文

@mixin table-base($padding) {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
      padding: $padding;
  }
}

#data {
  @include table-base(20px);
}

「@mixin」で定義したスタイルの塊を

何度も呼び出せる

#data th {
  text-align: center;
  font-weight: bold;
}

#data td, #data th {
  padding: 20px;
}

3. @extend構文

.error {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  @extend .error;
  border-width: 3px;
}

mixinと違い、実在するセレクタを呼び出せる

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  border-width: 3px;
}

4. カラーコード、値の変数化

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
}

.border {
  padding: $margin / 10;
  margin: $margin / 20;
  border-color: $blue;
}

カラーコードや値を変数に格納し、使い回せる

値については計算も可能

5. カラーコードの計算

// 基準となるカラーコード
$base-color: #536A97;

// 明度を上げる関数
$bg-color: lighten( $base-color, 40% );

// 明度を下げる関数
$bg-color: darken( $base-color, 15% );

// 彩度を上げる関数
$bg-color: saturate( $base-color, 20% );

// 彩度を下げる関数
$bg-color: desaturate( $base-color, 20% );

明度や彩度を調整する関数を利用し、

ベースとなる色を変えるだけで、

サイト全体の色調を変更することができる

6. @function（自作関数）

@function halfSize($value) {
	@return $value / 2;
}

.boxA { 
	width: halfSize(100px); 
}

関数を作成し、値やカラーコードを出力できる

.boxA {
  width: 50px;
}

6. その他の便利機能

namespace

(font-, margin-) 系スタイルの一括指定

@import構文

外部ファイルを読み込む

関数、変数、@mixin等をファイルに分離可能

etc...

まだまだ山のように機能があります

4. 実際にやってみよう

本日使用するサイト

Sassmeister

http://sassmeister.com/

デザインの現場では

koala

http://koala-app.com/

もっとガッツリ系の

開発現場では

Browserify + gulp + scssify

高難易度だが

Linuxをベースとした開発と親和性が高い