About Sass

CSS拡張言語Sassの基本と機能について

Minoru Hayakawa

12年11月2日金曜日

アジェンダ• CSS拡張言語のメリットとデメリット• CSS拡張言語の種類• Sass,LESS,Stylusについて• Sassのインストール•開発にするにあたって• Sassの機能•まとめ


CSS拡張言語を使うメリット

• メンテナンス性の向上- 冗長な記述の排除、再利用性のあるコードが書ける

• 開発効率向上- mixin,extend,関数,変数,ネスト


• 独自記法の学習コスト• IE９のセレクタ数制限により陥りやすい（4095セレクタが制限）

• クライアント側でCSS修正がはいる場合は双方の確認が必要

CSS拡張言語を使うデメリット（注意点）


CSS拡張言語の種類

Sass LESS Stylus

Ruby

RubyインストールSassインストール

JavaScript

JSライブラリ（クライアントサイド）LESSインストール（サーバーサイド）

Node.js

NodeインストールStylusインストール


Why Sass?


LESS• クライアントサイドかサーバーサイド- クライアントサイド- パフォーマンス的にどうなの？- JavaScript無効環境では使えない- サーバーサイド- LESSがインストールできるか確認する必要がある


Stylus

ようわからん　(｀・ω・´)キリッ

SassとLESSと構文が異なるので、学習コストが高い（多分）


Sass

• ローカルの開発環境だけでコンパイル可能

• Scss記法で学習コスト低減• Compass（Sassフレームワーク）


Sass記法

Scss記法12年11月2日金曜日

SassとScssの記述例(変数)

Sass(.sass) Scss(.scss)

$color: #000000;

#header width: 100%; background: $color;

$color: #000000;

#header { width: 100%; background: $color; }


SassとScssの記述例(ネスト)

Sass Scss

table border-space: 0; th text-align: left;

table { border-space: 0; th { text-align: left; } }


なぜScss記法か

• Sass記法よりも可読性が良い• CSSの記述をそのままSassにできる• 段階的にSassの知識を伸ばしていける


Sassのインストール


• Rubyをインストール（Windowsのみ）• Sassのインストール- sudo gem install sass


開発にあたって


CSS

_symbol.scss

base.scss

style.scss

変数やmixinを定義

基本となるスタイル定義

基本となるスタイル定義


_symbol.scssを用意する理由

• 変数やmixinの管理をしやすくするため• 変数などはscssの上部に記述する必要があるため、参照する度にファイル内で上下に行ったり来たりを避けるため


_symbol.scssの読み込み

CSS

_symbol.scss

base.scss

style.scss


•@importで読み込む

_symbol.scssの読み込み


ScssからCSSにコンパイル


開発ディレクトリに移動

cd /Applications/MAMP/htdocs/sass/css例：


sass --watch style.scss:style.css

※ scssを更新する度に自動でcssファイルをアップデートしてくれるので、再度このコマンドを打つ必要はない

ストップするときは、control+C


Sassの機能


ネスト子孫セレクタを使う場合に用いる



scss


css


&キーワード



•親セレクタの参照&キーワード


• CSSプロパティのネスト記法もある

おまけ


変数


_symbol.scss

style.scss


Mixinプロパティやセレクタの再利用を可能とする機能


_symbol.scss

style.scss

@mixinで定義

@includeで指定


_symbol.scss

style.scss

引数を与える

使う場面で引数に値を指定

style.css


clearfix

_symbol.scss

style.scss


style.css

clearfix


ベンダープレフィックス


style.scss

style.css


Extendあるスタイルを定義したセレクタを継承させる機能


style.scss

style.css

@extendを用いる


Extendの注意点



セレクタまで継承されるので、意図しないスタイルがあてられる可能性がある


プレースホルダーセレクタSass3.2より追加された機能


%で指定。CSSには表示されない


style.scss



Extendをまとめると


• @extendを用いる場合、セレクタのルールを決める

- プレースホルダーセレクタを用いる- 但し、mixinと差別化をどう図るかが必要


関数


• percentage()style.scss

style.css

数値(px)を%に変換


• floor() 小数点を切り捨て

style.scss

style.css

関連：round(),ceil()


• abs() --- 絶対値を取得• quote() --- クォートする• unquote() --- クォートを取り除く• red(), green(), blue() --- RGB形式から値を抜き出す

• alpha(),opacity() --- 透明度を取得• hue(),saturation(),lightness() --- HSL形式から値を抜き出す


• rgb() --- RGB形式に変換• hsl() --- HSL形式に変換• rgba() --- RGBA形式に変換• hsla() --- HSLA形式をRGBA形式に変換• transparentize() --- より透明• opacify() --- より不透明にする• darken() --- 輝度を下げる


• desaturate() --- 輝度を上げる• grayscale() --- グレースケールにする• complement() --- 補色にする• invert() --- 反転色にする• mix() --- 2色の中間色を取得する• type-of() --- 値の型を取得• unit() --- 値の単位を取得

more......


@importでCSSファイルを一つにする

最後に..........


reset.css

base.css

font.css

CSSの@importルールはパフォーマンスの意味合いで最近は使われない、またパフォーマンスの件でも複数のCSSを指定しない傾向にある

style.css


reset.scss

base.scss

font.scss

style.scss

Sassの@importで複数のscssをひとつのCSSとしてコンパイルさせる。複数で開発する場合は、非常に有効。


style.scss


style.css


まとめ


• Sassの場合は、Scss記法のことを指すことがほとんど

• CSSの問題を軽減し、開発効率があがる• Sassの機能をすべて理解する必要はないが・・・・

- MixinやExtendを使ってコードの再利用性を高め、メンテナンス性を上げる

- SassのフレームワークのCompassを使うことにより、より開発効率があがる


おしまい


About Sass

Documents