CSS拡張言語Sassの基本と機能について
Minoru Hayakawa
12年11月2日金曜日
アジェンダ• CSS拡張言語のメリットとデメリット• CSS拡張言語の種類• Sass,LESS,Stylusについて• Sassのインストール•開発にするにあたって• Sassの機能•まとめ
12年11月2日金曜日
CSS拡張言語を使うメリット
• メンテナンス性の向上- 冗長な記述の排除、再利用性のあるコードが書ける
• 開発効率向上- mixin,extend,関数,変数,ネスト
12年11月2日金曜日
• 独自記法の学習コスト• IE9のセレクタ数制限により陥りやすい(4095セレクタが制限)
• クライアント側でCSS修正がはいる場合は双方の確認が必要
CSS拡張言語を使うデメリット(注意点)
12年11月2日金曜日
CSS拡張言語の種類
Sass LESS Stylus
Ruby
RubyインストールSassインストール
JavaScript
JSライブラリ(クライアントサイド)LESSインストール(サーバーサイド)
Node.js
NodeインストールStylusインストール
12年11月2日金曜日
Why Sass?
12年11月2日金曜日
LESS• クライアントサイドかサーバーサイド- クライアントサイド- パフォーマンス的にどうなの?- JavaScript無効環境では使えない- サーバーサイド- LESSがインストールできるか確認する必要がある
12年11月2日金曜日
Stylus
ようわからん (`・ω・´)キリッ
SassとLESSと構文が異なるので、学習コストが高い(多分)
12年11月2日金曜日
Sass
• ローカルの開発環境だけでコンパイル可能
• Scss記法で学習コスト低減• Compass(Sassフレームワーク)
12年11月2日金曜日
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; }
12年11月2日金曜日
SassとScssの記述例(ネスト)
Sass Scss
table border-space: 0; th text-align: left;
table { border-space: 0; th { text-align: left; } }
12年11月2日金曜日
なぜScss記法か
• Sass記法よりも可読性が良い• CSSの記述をそのままSassにできる• 段階的にSassの知識を伸ばしていける
12年11月2日金曜日
Sassのインストール
12年11月2日金曜日
• Rubyをインストール(Windowsのみ)• Sassのインストール- sudo gem install sass
12年11月2日金曜日
開発にあたって
12年11月2日金曜日
CSS
_symbol.scss
base.scss
style.scss
変数やmixinを定義
基本となるスタイル定義
基本となるスタイル定義
12年11月2日金曜日
_symbol.scssを用意する理由
• 変数やmixinの管理をしやすくするため• 変数などはscssの上部に記述する必要があるため、参照する度にファイル内で上下に行ったり来たりを避けるため
12年11月2日金曜日
_symbol.scssの読み込み
CSS
_symbol.scss
base.scss
style.scss
12年11月2日金曜日
•@importで読み込む
_symbol.scssの読み込み
12年11月2日金曜日
ScssからCSSにコンパイル
12年11月2日金曜日
開発ディレクトリに移動
cd /Applications/MAMP/htdocs/sass/css例:
12年11月2日金曜日
sass --watch style.scss:style.css
※ scssを更新する度に自動でcssファイルをアップデートしてくれるので、再度このコマンドを打つ必要はない
ストップするときは、control+C
12年11月2日金曜日
Sassの機能
12年11月2日金曜日
ネスト子孫セレクタを使う場合に用いる
12年11月2日金曜日
12年11月2日金曜日
scss
12年11月2日金曜日
css
12年11月2日金曜日
&キーワード
12年11月2日金曜日
12年11月2日金曜日
•親セレクタの参照&キーワード
12年11月2日金曜日
• CSSプロパティのネスト記法もある
おまけ
12年11月2日金曜日
変数
12年11月2日金曜日
_symbol.scss
style.scss
12年11月2日金曜日
Mixinプロパティやセレクタの再利用を可能とする機能
12年11月2日金曜日
_symbol.scss
style.scss
@mixinで定義
@includeで指定
12年11月2日金曜日
_symbol.scss
style.scss
引数を与える
使う場面で引数に値を指定
style.css
12年11月2日金曜日
clearfix
_symbol.scss
style.scss
12年11月2日金曜日
style.css
clearfix
12年11月2日金曜日
ベンダープレフィックス
12年11月2日金曜日
style.scss
style.css
12年11月2日金曜日
Extendあるスタイルを定義したセレクタを継承させる機能
12年11月2日金曜日
style.scss
style.css
@extendを用いる
12年11月2日金曜日
Extendの注意点
12年11月2日金曜日
12年11月2日金曜日
セレクタまで継承されるので、意図しないスタイルがあてられる可能性がある
12年11月2日金曜日
プレースホルダーセレクタSass3.2より追加された機能
12年11月2日金曜日
%で指定。CSSには表示されない
12年11月2日金曜日
style.scss
12年11月2日金曜日
12年11月2日金曜日
Extendをまとめると
12年11月2日金曜日
• @extendを用いる場合、セレクタのルールを決める
- プレースホルダーセレクタを用いる- 但し、mixinと差別化をどう図るかが必要
12年11月2日金曜日
関数
12年11月2日金曜日
• percentage()style.scss
style.css
数値(px)を%に変換
12年11月2日金曜日
• floor() 小数点を切り捨て
style.scss
style.css
関連:round(),ceil()
12年11月2日金曜日
• abs() --- 絶対値を取得• quote() --- クォートする• unquote() --- クォートを取り除く• red(), green(), blue() --- RGB形式から値を抜き出す
• alpha(),opacity() --- 透明度を取得• hue(),saturation(),lightness() --- HSL形式から値を抜き出す
12年11月2日金曜日
• rgb() --- RGB形式に変換• hsl() --- HSL形式に変換• rgba() --- RGBA形式に変換• hsla() --- HSLA形式をRGBA形式に変換• transparentize() --- より透明• opacify() --- より不透明にする• darken() --- 輝度を下げる
12年11月2日金曜日
• desaturate() --- 輝度を上げる• grayscale() --- グレースケールにする• complement() --- 補色にする• invert() --- 反転色にする• mix() --- 2色の中間色を取得する• type-of() --- 値の型を取得• unit() --- 値の単位を取得
more......
12年11月2日金曜日
@importでCSSファイルを一つにする
最後に..........
12年11月2日金曜日
reset.css
base.css
font.css
CSSの@importルールはパフォーマンスの意味合いで最近は使われない、またパフォーマンスの件でも複数のCSSを指定しない傾向にある
style.css
12年11月2日金曜日
reset.scss
base.scss
font.scss
style.scss
Sassの@importで複数のscssをひとつのCSSとしてコンパイルさせる。複数で開発する場合は、非常に有効。
12年11月2日金曜日
style.scss
12年11月2日金曜日
style.css
12年11月2日金曜日
まとめ
12年11月2日金曜日
• Sassの場合は、Scss記法のことを指すことがほとんど
• CSSの問題を軽減し、開発効率があがる• Sassの機能をすべて理解する必要はないが・・・・
- MixinやExtendを使ってコードの再利用性を高め、メンテナンス性を上げる
- SassのフレームワークのCompassを使うことにより、より開発効率があがる
12年11月2日金曜日
おしまい
12年11月2日金曜日
Top Related