HTML5
CSS3

Sassのノート

More than 1 year has passed since last update.


参考書籍

「Web制作者のためのSassの教科書」

http://sass-lang.com/


Sassの利点


  • 画像の最適化

  • minify(圧縮)

  • ベンダープレフィックスの自動付与

  • CSSスプライトの生成

  • 何度も繰り返し使う数値や色を、変数に格納して使い回すことで、何度も書かなくて済む。

  • セレクタをネストさせて書ける


用語

「パッケージ」

目的のソフトウェアが依存している別途必要な他のソフトウェアをひとまとめにしたもの。(ライブラリーも含む)

「リポジトリ」

パッケージを格納しているサーバ。

「npm」

Node.jsのPackage Manager。Node.js製のソフトウェアを管理する。

「Bower」

JavaScriptやCSSのライブラリを管理するパッケージマネージャ

http://bower.io/

「nodebrew」

node.jsを自分のマシン内でversion管理する。


Sassの機能

「Mixin」

よく使うコードをMixinとして定義し、それを使い回せる。

P83 Mixinを利用してベンダープレフィックスを自動的に付与

「Extend」

定義したスタイルを継承する。

スタイルが共通する要素をひとまとめにしつつ、それぞれ違うスタイルを持つ場合は、そのプロパティだけを別にしてCSSを出力する。


実際に書いてみる


test.scss

#margin{

width:600px;
p{
margin:0 0 1em;
em{
color:#f00;
}
}
small{
font-size:small;
}
}

sass test.scss:test.css --style expanded

スクリーンショット 2015-12-17 17.48.46.png


test.css

#margin {

width: 600px;
}
#margin p {
margin: 0 0 1em;
}
#margin p em {
color: #f00;
}
#margin small {
font-size: small;
}

/*# sourceMappingURL=test.css.map */



Sassの記述

$Sass   変数の定義は「$」

@mixin
@include
「if」「else」 条件分岐


Sassプラグインのオプション

sourcemap ソースマップ作成 "auto"なら相対パスで作成(初期値)

"none"なら作成しない

style 出力形式の指定。"nested"なら入れ子を字下げで表現(初期値)

compressrdなら圧縮


注意点

セレクタの数が4095個に達すると、IE9以下で4096個目以降のスタイルが無視される。

http://blesscss.com/

一度使ったセレクタのスタイルを、別のセレクタでも使うことができる。

同じスタイルを何度も書く手間から開放され、コンパイル後のCSSはグループ化されるので、

非常に合理的なソースになる。


#main{
width:600px;
p{
margin:0 0 1em;
em{
color;
}
}
}

何はともあれコンパイルしてみよう

sass test.scss:test.css --style expanded


親セレクタの参照

&


パーシャル

ファイル名の前に「_」アンダースコアがあれば、コンパイル後にcssファイルは生成されない。


Compass

compass create --sass-dir "scss" --css-dir "css"

スクリーンショット 2015-12-17 18.03.48.png


config.rb

require 'compass/import-once/activate'

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"   #プロジェクトのパス
css_dir = "css" #cssファイルのパス
sass_dir = "scss"  #Scssファイルのパス
images_dir = "images" #画像ファイルのパス
javascripts_dir = "javascripts" #JavaScriptファイルのパス



画像の各種情報を取得する「Image Helper」


  • 画像が差替えになったら、CSSで編集することなく、横幅や高さを変更することができる。


  • 「image-url」「image-width」


  • 画像のファイル名を指定すると、Compass側で画像の情報を取得して、

    コンパイルされたCSSに結果を反映してくれる。



gruntとの組み合わせ

grunt-contrib-sass

grunt-autoprefixer

grunt-contrib-watch LiveReloadの機能を持っている


ローカル環境でプレビュー

grunt-contrib-connect

grunt connectで起動する。

http://localhost:8000/を開くと表示される

終了時は、Ctrl+C

watchのように継続するタスクと一緒に実行する場合は不要。


ファイル削除

grunt-contrib-clean

ファイル結合

grunt-contrib-concat

圧縮

grunt-contrib-uglify

画像ファイルの結合

grunt-spritesmith


sourceMap

/*@ sourceMappingURL=style.css.map*/


clearfix (mixin.scss)

@mixin clearfix() {

&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}


インターポレーション


  • 変数が参照できない場所でも使うことができるようにする機能。


{}


$imgPath: '../common/images/';

#main{
background:url(#{imgPath}main.png);
}


コンパイル後.css


#main{
background:url(../common/images/main.png);
}


$text:"css";

.#{$text} a:after{
content: "#{$text + Space}";
}


コンパイル後.css


.css a:after{
content:"CSS Space";
}

// 引数を使ったミックスインを定義

@mixin kadomaru($value) {
-moz-border-radius: $value;
-webkit-border-radius: $value;
border-radius: $value;
}

@for $value from 1 through 3{

.sample#{$value}{
z-index:$value;
}
}

for文で一定パターンのCSSを生成する

http://hacknote.jp/archives/917/