すぐに使えるSCSS入門

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Sass/Compass

Sass/Compass知ってるいるし
がっつり使ってるよという方どれぐらいいますか?

本日のお題目

そんな方にはちょっと物足りないかもしれませんが、
今回は大きく分けてこの5つについて紹介します。

  1. SCSS/Compassを利用するための環境
  2. Sass・SCSS
  3. 設定ファイル
  4. Compass
  5. SCSS/Compassの応用

1,Sass/SCSSって?

1.1,Sassとは

簡単に言うと、
CSS3になってさらに覚えることの増えた
CSSコーディングの手間を省くいてCSSを楽しくするツール

Sass makes CSS fun again.
SassはCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。

1.2,SassとSCSSって?

ちなみにSassには2つの構文があります。
SCSS(Sassy CSS)とSass(インデント構文)です。

拡張子の違い

Sassは.sassという拡張子、SCSSは.scssという拡張子を持ちます。
お互いにSass-convertコマンドラインツールを使うことで変換もできるし、どちらの構文で書かれたとしてもインポートできます

2,先に、環境について

2.2,その他のGUI

その他にもいろいろなツールがあるので興味があれば使ってブログに書いてくれれば読みに行きます。

2.3,CUIでさくっと

コマンドライン

ターミナル

  • コマンドプロンプト (Windows)
  • ターミナル (Mac)

エディタ

SublimeText2

  • Sublime Text 2 (Win, Mac)
  • Coda (Mac)
  • WebStorm (Win, Mac)

3,Sass・SCSSの機能紹介

3.1,Sass・SCSSの機能

CSSだけではできない便利な機能があります。
素のCSSを書いている時って、「この値使い回しできたら良いなー」とか物足りないことありますよね。

  • ファイルをまとめる
  • 変数
  • 宣言ブロックのネスト
  • Mixins
  • 継承

3.2,すぐに使える

SCSSはCSSの構文がそのまま使えます。

CSS

		div {
		    width: 100px;	
		}
		
		div a {
		    color: red;
		}
		

SCSS

		div {
		    width: 100px;
			
		    a {
		        color: red;
		    }
		}
		

すぐに使いたいという方は.cssファイルの拡張子を.scssに変えるだけで、すぐに始められます。

3.3,別のSass・SCSSファイルを読み込む

Sass・SCSSではCSSの「@import」のように別のファイルを読み込むことができます。

拡張子は自動判別してくれるので記述する必要はありません。

SCSS

			@import "../modules/clearfix"
			

Output CSS

/* *****************************
 *
 * html5doctor.com Reset Stylesheet
 * v1.6.1
 * Richard Clark - http://richclarkdesign.com
 *
 **************************** */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
			

3.4,ちなみに・・・

CSSでは「@xxx」を宣言と言いますが、
SassやSCSSでは「@xxx」をディレクティブと呼ぶそうです。

さっき教わりました!

3.5,変数

変数は「$」を使って定義します。
色コードやサイズってけっこう使い回すので、変数に入れておくと変更があった時に便利です。

SCSS

			$MAX_CONTENT_WIDTH       : 960px;
			$KEY_COLOR               :  #222;
 
			#header {
        		    width         : $MAX_CONTENT_WIDTH;
		            background    : $KEY_COLOR;
			}
			

Output CSS

			#header {
			    width: 960px;
			    background: #222222;
			}
			

3.6,変数を使った補完

#{$hoge}」を使い変数をセレクタやプロパティに使うことができます。

SCSS

			$PREFIX_TYPES:  -webkit-, -moz-, -ms-, -o-, '';
			@mixin custom-border-radius( $num ) {
                            @each $prefix in $PREFIX_TYPES {
                                #{$prefix}border-radius: $num;
                            }
                        }
                        
                        .vars {
                            @include custom-border-radius( 5px );
                        }
			

Output CSS

.vars {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
			

3.7,変数へのデフォルト値の指定

変数に「!default」が指定されている場合、変数に値が入っていれば値が適用されず、値が入っていなければ!defaultの値を指定するようになります。

SCSS

$width  : 1000px !default;
$height : 600px  !default;

$width  : 100px;
.wrapper
{
    width  : $width;
     height : $height;
}
			

Output CSS

.wrapper {
  width: 100px;
  height: 600px;
}
			

ただ、セレクタをネストしすぎるとパフォーマンスに影響するので気をつけましょう。

3.8,親セレクタの指定

関連して、宣言ブロック内から親を指定できます。

SCSS

			#header {
        		    #siteID {
                	        font-size   : 200%;
                	        font-weight : bold;
        		    }
        		    
        		    &.current #siteID {
        		    	...        		    
        		    }
        		    
			}
			

Output CSS

			#header #siteID {
  			    font-size: 200%;
  			    font-weight: bold;
			}
			#header.current #siteID {...}
			

3.9,Mixins

MixinsはJavaScriptの関数に似たものです。

SCSS

			$MAX_CONTENT_WIDTH       : 960px;
 
			@mixin center-layout($margin_top: 0, $margin_bottom: 0) {
        		    margin   : $margin_top auto $margin_bottom auto; //引数を上下に指定
        		    width    : $MAX_CONTENT_WIDTH; //変数を指定
			}
 
			#header {
        		    @include center-layout(); //引数なしでデフォルト値を指定
			}
  
			#container {
        		    @include center-layout( 20px ); //上マージンのみ引数に指定
			}
			

Output CSS

			#header {
			    margin: 0 auto 0 auto;
			    width: 960px;
			}

			#container {
			    margin: 20px auto 0 auto;
			    width: 960px;
			}
			

3.10,HTMLの複数クラス指定

CSSだけだとこんな風にHTMLに複数のクラス指定をしてやってました。

CSS

			.item {
			    line-height : 150%;
			    color       : #333;
			}
 
			.item.blue {
    			    color       : blue;
			}
			

HTML

			<ul>
			    <li class="item">A</li>
			    <li class="item blue">B</li>
			</ul>
			

3.11,SCSSを使った便利な継承

SCSSの場合、「@extend」を使って簡単に他の宣言ブロックを継承することができます。

SCSS

.list {
    margin     : 20px 0 0 0;
 
    .item {
        list-style      : none;
        font-size       : 100%;
    }
}
 
.floatList {
    @extend .list;
 
    .item {
        width           : 300px;
        float           : left;
        font-size       : 90%;
    }
}
			

Output CSS

.list, .floatList {
  margin: 20px 0 0 0;
}
.list .item, .floatList .item {
  list-style: none;
  font-size: 100%;
}
.floatList .item {
  width: 300px;
  float: left;
  font-size: 90%;
}
			

3.12,継承:SCSSを使った元のクラスを省いた継承

%」を使って「placeholder selector」宣言することで、
そのクラスは読み込み専用になります。

SCSS

%list {
    margin     : 20px 0 0 0;
        
    .item {
        ...
    }
}
 
.floatList {
    @extend %list;

    .item {
        width           : 300px;
        float           : left;
        font-size       : 90%;
    }
}
			

Output CSS

.floatList {
  margin: 20px 0 0 0;
}
.floatList .item {
  width: 300px;
  float: left;
  list-style: none;
  font-size: 90%;
}
			

3.13,地味に便利なコメント

SCSSには3つのコメント記述方法があります。

/* */」って入力するのめんどくさいですよね。でもSCSSなら「//」コメントが使えます。

SCSS

//単一行コメント
 
/*
複数行コメント
*/
 
/*!
エクスクラメーション・マーク「!」付きコメント
*/			

Output CSS(コメントなし)

/*
エクスクラメーション・マーク「!」付きコメント
*/
			

エクスクラメーション・マーク「!」付きコメントについては次で詳しく。

4,選べるアウトプットモード

4.1,コメントの制御

設定ファイルかGUIでEnvironmentを指定します。選べるのはこの2つの指定。

  • development
  • production (コメントなし)

ただし、先ほど紹介したエクスクラメーション・マーク「!」付きコメントはproductionにしても残ります。
ライセンスなどの記述に必要です。

4.2,CSSのアウトプットスタイル

SCSSには4つのアウトプットスタイルが用意されています。

:nested

.list {
  margin: 20px 0 0 0; }
  .list .item {
    list-style: none;
    font-size: 100%; }
			

:expanded

.list {
  margin: 20px 0 0 0;
}
.list .item {
  list-style: none;
  font-size: 100%;
}
			

:compact

.list { margin: 20px 0 0 0; }
.list .item { list-style: none; font-size: 100%; }
			

:compressed

.list{margin:20px 0 0 0}.list .item{list-style:none;font-size:100%}
			

5,どの環境でも知っておきたいコンフィグ設定

5.1,コンフィグ設定って?

Sass/Compassのコンパイルを制御するための設定ファイルです。
config.rbというファイルを作成して、以下のような項目を書きます。

サンプルのconfig.rb

http_path = 'http://nonakaryuichi.github.com/cutandslice_me_sample/'
sass_dir = 'scss'
css_dir = 'css'
images_dir = 'images'
output_style = :nested
line_comments = false
	

5.2,主な設定項目

けっこう制御できる項目が多いです。
詳しくは記事を読んでね。

設定ファイルを知っておこう – 番外編

項目 説明
sass_dir コンパイルするSCSSが入ったフォルダ
css_dir コンパイル後のCSSが入るフォルダ
relative_assets CompassのURLsヘルパーが返すパスを相対パスか絶対パスのどちらにするか設定します。
http_stylesheets_dir サーバー上に置くCSSファイルを入れたディレクトリを指定します。
http_stylesheets_path サーバー上に置くCSSファイルを入れたディレクトリへのフルパスを指定します。

とかとか。

6,Sassをより便利にするCompass

6.1,Compassとは?

compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。

機能が豊富すぎて使い切れていません。
使ってみて便利だなーと思った定番の機能を紹介します。これ便利ですよ!ってのがあれば教えてください。

  • リセットCSS
  • CSS3 Mixins(互換性考慮)
  • CSSの記述を効率化する各種ヘルパー

6.2,Compassを使うには?

先ほど紹介した環境でほとんど利用できます。
とりあえず使いたい時のおまじない。

	@import "compass";
	

もっと細かい読み込み方法はこちらを見てね。
Compass Core Framework

6.3,リセットCSS

用意されているMixinsを利用するだけでリセットCSSができあがる。
いろんなリセット用スタイルが用意されています。(Reference

SCSS

			@import "compass";
			@include global-reset;
			

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
		

6.4,CSS3 Mixins

CSS3のブラウザ互換性を考慮した上でCSSをアウトプットしてくれます。

SCSS

			@import "compass";
 
			.border_radius
			{
        			@include border-radius( 3px );
			}
			

Output CSS

			.border_radius {-
				webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-ms-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
			}
			

6.5,グラデーションを試す

わかりやすい例としてグラデーションを試してみます。

SCSS

.css3_mixin {
    @include background-image( linear-gradient( #fafafa, #eee ) );
}
			

Output CSS

.css3_mixin {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(#fafafa, #eeeeee);
  background-image: -moz-linear-gradient(#fafafa, #eeeeee);
  background-image: -o-linear-gradient(#fafafa, #eeeeee);
  background-image: linear-gradient(#fafafa, #eeeeee);
}
			

6.6,CSSの記述を効率化する各種ヘルパー

ごめんなさい。全部試しきれていません。今度試してブログに書きます。

Color Stops Helper グラデーション指定 リンク
Color Helper 色関連、明度、乗算など リンク
Constant Helpers ポジションに関するアウトプット リンク
Cross Browser Helpers Prefix リンク
Display Helpers displayプロパティ操作用関数 リンク
Font Files Helper Font Face Mixinで利用 リンク
Image Dimension Helpers プロジェクトの画像ディレクトリを元に画像の横幅、縦幅を返す リンク
Inline Data Helpers 画像やフォントファイルをCSSに直接埋め込みます リンク
Math Helpers 数学関数 リンク
Selector Helpers 複雑なネストされたセレクタの操作 リンク
CSS Sprite Helpers 画像をマージし、背景画像のポジションを自動設定するCSS Sprite機能 リンク
URL Helpers パス指定の共通化や環境に合わせたパス指定を可能にする リンク

6.7,Compassに似たMixinsライブラリ

bourbon

Compassは巨大なMixinsの塊のようなものですが、もっとシンプルに使いたい場合はbourbonがオススメ。

Bourbon

7,Sass/Compass応用編

7.1,IEハック

できれば 使いたくないけど・・・
コメント系のハックを除けば結構使えます。

  • IE6 Star Hack
  • IE7 Star Hack
  • Selector Hack
  • IE9 BackSlash 9 Hack

SCSS対応IE向けCSSハック編

7.2,Media Queries

@mediaディレクティブでを使って宣言ブロック内にもセレクタやプロパティの指定ができる。

CSS

#wrapper
{
    background: #000;
}
 
@media screen and (max-width: 320px) and (-webkit-device-pixel-ratio: 1.0) {
    #wrapper {
        background: #333;
    }
}
			

SCSS

#wrapper {
    background: #000;
    @media screen and (max-width: 320px) and (-webkit-device-pixel-ratio: 1.0) {
        background: #333;
    }
}
			

7.3,CompassでデータURIスキーム

Compassを使うことで画像のパスを指定するだけでCSS内にbase64エンコードのデータURIスキームを埋め込むことができます。

SCSS

			div {
			    background-image: inline-image("sprite/a.png");
			}
			

Output CSS

			div {
			    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAB4CAYAAACAcLCaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0 MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh=');
			}
			

7.4,CompassでCSS Sprite

sprite-map()を使ってCSS Spriteを定義して、背景に設定。
sprite-position()で元のファイル名を指定するとその座標が帰ってきます。

.btn {
    $btns: sprite-map("btns/normal/*.png", $spacing: 20px, $layout: horizontal);
     
    a {
        background : $btns no-repeat;
    }
     
    &.home {
        a {
            background-position:
                sprite-position( $btns, btn_home_normal );
        }
    }
}
	

7.5,Retina Display対応CSS Sprite

まずは全体像を見てみてください。

.btn {
    $btns: sprite-map("btns/normal/*.png", $spacing: 20px, $layout: horizontal);
    $btns-retina: sprite-map("btns/2x/*.png", $spacing: 40px, $layout: horizontal);
     
    a {
        background : $btns no-repeat;
        
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
            background : $btns-retina no-repeat;
            @include background-size(image-width(sprite-path($btns)) image-height(sprite-path($btns)));
        }
    }
     
    &.home {
        a {
            background-position:
                sprite-position( $btns, btn_home_normal );
        }
    }
}
	

7.6,Retina Display対応のポイント

ポイントは4つ。

  1. スプライトマップを変数に保存
  2. Media Queriesでpixel-ratioが2以上の時に背景画像を指定
  3. 通常時に合わせたbackground-sizeの指定
  4. 通常時と同じ座標指定でbackground-positionを指定

7.7,Retina Display対応の注意点

ちょっとだけ制限があります。

  1. 画像を保存するディレクトリを分ける
  2. ファイル名を同じにする
  3. 画像間のスペースは倍の値にする
  4. 画像名に@2xを使わない(コンパイルエラーの原因になる)

7.9,何よりMixinsが便利!

いくつかMixinsを作ってみたので参考までにご紹介。

Sublime Text 2へ。

9,まとめ

詰め込みすぎました。
開始10分までスライドを作っていたのですが、あれやこれがたりないなーと改善の余地たっぷりなスライドになってしまいました。

次回またSass/Compassについて紹介する機会があれば、ヘルパーやMixin,functionなど紹介したいと思います。

クラスメソッドで働きたい!という方がいれば是非声をかけてください