Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@morrr

Sassチートシート

Posted at

概要

  • sass = cssのメタ言語(CSSを生成するための言語)
  • sassの構文にはsassとscssがある
    • sass = オリジナル、インデントが構文に含まれる、現在主流でない
    • scss = cssがそのまま動く、現在の主流

導入

gemパッケージとしてインストールする

# インストール
$ gem install sass

# バージョン確認
$ sass -v
> Sass 3.4.22 (Selective Steve)

コマンド

  • 基本的にはsass <INPUT.scss>:<OUTPUT.css>の形式

     # foo.scssからfoo.cssを生成
 $ sass foo.scss:foo.css

  • 生成後のCSSの形式は、—style <STYLE>で指定できる

    • スタイルは4種ある
      • Nested: SASSのインデント階層をそのまま残した形式(デフォルト)
      • Expanded: CSSの通常形式
      • Compact: 改行の除去
      • Compressed: さらに圧縮
     $ sass foo.scss:foo.css —style expanded

  • —line-commentsオプションで、scssの行位置を補足できる

     $ sass foo.scss:foo.css —line-comments`

 > /* line 10, foo.scss */
 > #main {
 > …

  • —watch をつけると変更を監視してくれる

     $ sass foo.scss:foo.css —watch

 # フォルダの指定も可能
 $ sass . —watch

 # フォルダを入出力別に指定することも可能
 $ sass sass:css —watch

 # エラー発生時に監視を停止
 $ sass . —watch —stop-on-error

  • sassは.sass-cacheフォルダをキャシュ用に生成する

    • 変更するには--cache-locationオプションを使う
    • —no-cacheオプションでキャッシュを作成しないようにもできる

  • sassコマンドはエイリアスとして__scssコマンド__としても使える

  • —debug-infoをつけると、cssにscssの元データ情報が挿入される

    • -sass-debug-infoプロパティとして各セレクタに入る

構文

ネスト

  • セレクタをネストで指定できる

     // sass
 #main{
 	#inner{
 		// …
 	}
 }

 // css
 #main #inner{
 	// …
 }

  • 子孫以外のセレクタである子(>)や隣接(+)もネスト指定可能

     #main{
 	> #inner{
 	}
 	+ #footer{
 	}

  • &セレクタによって親を指定することが可能

     #main{
 	#outer & {
 		// #outerの子の#mainにのみ作用する
 	}
 	&: hover{
 		// #main:hoverに作用する
 	}
 }

  • プロパティもネストできる

     #main{
 	border{
 		top: 0px;
 		bottom: 5px;
 	}
 }

コメント

  • 従来の複数行コメント(/**/)にくわえて1行コメント(//)が使える
    • ただし単行コメントはcss変換後に残らない
    • 複数行コメントはcompressedしない限りそのまま残る
      • ただし /*! … */ とかくとcompressedでも残る

変数

  • 変数は$variable: value の形式で制限できる

     $red: #FF0000;

  • 変数のスコープは、定義位置によって変わる

    • セレクタの外で定義した場合は、対象のscssファイル全体
      • @importすれば読み込み先でも使える
    • セレクタ内で定義した場合は、そのセレクタの中のみ

  • 変数は型を持つ

    型名 リテラル
    Number 123, 1.23…
    Color red, #f00, #FF0000, rgba(255, 0, 0, 1)…
    String ‘foo’, “bar”, baz…
    Boolean ture, false
    List (a, b, c)…(括弧もカンマも必須でない)
    Null null

  • 変数をセレクタ名やURLとして使いたい場合は、#{}でインターポレイションを指定する

     $sel = ‘.main’
 $url_base = ‘http://foobar.com/'
 
 #{$sel} {
 	background: url(#{$url_base}img/baz.png);
 }

演算

  • 数値は四則演算が可能

    • 単位付きでも演算ができる
    • 単位が異なっていても、組み合わせによっては演算できる
      • OK: pxとcmなど
      • NG: ptとemなど
    • 除算を行う場合は構文上の制限で、括弧をつける必要がある
    • 演算に変数を使うことも当然できる
     // 単位付きの計算
 height: 123px + 10px;

 // 除算の制限
 width: ($width / $all);

  • 色も演算可能

     // 色と色の計算
 color: #000000 + #111111;		// = #111111

 // 色と数値の計算
 color: #000000 + 3;				// = #030303;

  • 文字列も結合が可能

     content: $label + $message;

import

  • 先頭がアンダースコアのscssファイルは、__パーシャル__として扱われる

    • パーシャルは、sassコマンドを実行してもcssが生成されない
    • パーシャルを@importすることで、パーシャルを読み込み元と結合して出力できる

  • sassの@importは、scssファイルをインポートすることができる

    • 拡張子は省略が可能
    • パーシャルの場合のアンダースコアも省略可能
    • 変換すると自動的に変換後のCSSファイルに置き換えられる
     // module.scssあるいは_module.sassをインポート
 @import ‘module’

  • ファイルを複数指定することも可能

  • セレクタの内部で@importすることも可能(影響範囲をスコープを制限できる)

継承

  • @extendを使うと、他のセレクタの定義を継承できる

    • 多重継承(複数のセレクタを継承すること)も可能
      -継承を連鎖させることも可能
     #foo{
 	// #fooの定義
 }
 #bar{
 	@extend #foo;	// #fooの定義を継承できる
 	// ここは#barの独自定義
 }

  • %を指定すると、継承専用のセレクタを作成できる

     %forExtend{
 	// …
 }
 #foo{
 	@extend %forExtend;
 }

Mix-in

  • Mix-in = あるセレクタに、別のセレクタを含めること

    • @mixinと@includeをセットで使う
     // scss
 @mixin base{
 	// …
 }
 mixed1{
 	@include base;
 }
 mixed1{
 	@include base;
 }

 // css
 mixed1{
 	// …
 }
 mixed2{
 	// …
 }

  • @mixinは@extendに似ているが、生成後のcssが異なってくる

     %base{
 	// …
 }
 mixed1{
 	@extend %base;
 }
 mixed2{
 	@extend %base;
 }

 // css
 mixed1, mixed2{
 	// …
 }

  • @mixinは、引数をとることができる

     @mixin base($val1, $val2){
 	border-color: $val1;
 	font-color: bar: $val2;
 }

 #foo{
 	@include base(#F00, #0F0);
 }

  • 引数はデフォルト指定も可能

     @mixin base($val: #F00){
 	border-color:$val;
 }

 #foo{
 	@include base;
 }

  • 可変長引数を渡すことも可能

     @mixin base($val…){
 	text-shadow: $val;
 }

  • @content指定で、mixin側へ記述を渡すことも可能

     @mixin base{
 	@content
 }

 #foo{
 	@include base{
 		// …
 	}
 }

制御構文

if

  • 比較演算子は概ね他言語と同じ

  • 論理演算子は and, or, not と書く

    @if $val == ‘foo’{
    // …
}@else if $some == 0 and $other == 1{
    // …
}@else{
    // …
}

for

  • throughとtoで終了条件を変える

     @for $i from 0 through 10{
 	// 0から10まで実行
 }
 @for $i from 0 to 10{
 	// 0から9まで実行
 }

  • 繰り返し内で変数を使うことが可能

     // #item_1から#item_10を生成
 @for $i from 1 through 10{
 	#item_#{$i}{
 		// …
 	}
 }

while

$i: 0;
@while $i < 10{
	// 0~9
	$i: $i+1;
}

each

$prefixes = a, b, c, d
@each $prefix in $prefixes{
	.content-#{$prefix}{
		background-image: url(#{prefix}.png);
	}
}

関数

ビルトイン関数

数学系
関数名 内容
abs(num) 絶対値
round(num) 四捨五入
ceil(num) 切り上げ
floor(num) 切り捨て
色系
関数名 内容
rgba(rgb, alpha) RGBA型数値を指定する
lighten(color, percent) 色を明るくする
darken(color, percent) 色を暗くする
mix(color, other, percent) 色の中間色を作成する
その他
関数名 内容
nth(list, index) リストの要素を取得
type-of(val) データ型を返す
quote(val) 値をコーテーションする

関数定義

@function foo($bar, $baz){
	@return $bar + $baz;
}

デバッグ

  • @debugと@warnはコンパイル時にメッセージを表示する

     @debug ‘debug message’;
 @warn ‘warning message’;
12
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?