Sass(SCSS)の基本的な使い方

Sassの基本的な使い方

以前、Sass(SCSS)の導入方法について書いたので、今回はSass(SCSS)の覚えておきたい基本的な使い方をまとめていきたいと思います。

目次

  1. ネスト
  2. アンパサンド(&)
  3. 変数($)
  4. インターポレーション(補完)
  5. @import / パーシャルファイル
  6. @mixin
  7. @extend / プレースホルダー

1. ネスト

Sass(SCSS)を使うと、スタイルを入れ子にして記述することができるので、構造が把握しやすくなります。

SCSS(コンパイル前)

nav {
  ul {
    margin: 0;
	padding: 0;
	li {
      list-style: none;
	  display: inline-block;
	 }
   }
 }

CSS(コンパイル後)

nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
  display: inline-block;
}

2. アンパサンド(&)

セレクタに&(アンパサンド)を使うと親要素を参照することができます。擬似要素や擬似クラスにも使えます。

SCSS(コンパイル前)

li {
  position: relative;
  list-style: none;
  display: inline-block;
	&:before {
	  display: block;
	  position: absolute;
	  top: 0;
      bottom: 0;
      left: -20px;
	  width: 10px;
	  height: 1px;
	  margin: auto;
      background: #442c1c;
	  content: "";
	 }
}

CSS(コンパイル後)

li {
    position: relative;
    list-style: none;
    display: inline-block;
}
li:before {
	display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    width: 10px;
    height: 1px;
    margin: auto;
    background: #442c1c;
    content: "";
}

3. 変数($)

任意の名前の変数を作っておけば、必要に応じてその値を呼び出すことができます。また、後で値を変更したくなった時でも一括変更できちゃいます。ただし、変数はソースコードの先頭から順番に参照されていくため、必ず呼び出す前に宣言しましょう。参照する範囲を制限したい時はルールセット内で宣言すれば参照範囲を制限できます。

Sass(コンパイル前)

/* 変数を定義 */
$title-font: 'Quicksand', sans-serif;
$color: #361D0C;

h1 {
	color: $color;
    font-family: $title-font;
}

/* ルールセット内で宣言 */
.content {
	$sub-title-font: 'Varela Round', sans-serif;
	h2 {
		font-family: $sub-title-font;
	}
}

CSS(コンパイル後)

h1 {
	color: #361D0C;
	font-family: 'Quicksand', sans-serif;
}
.content h2 {
	font-family: 'Varela Round', sans-serif;
}

4. インターポレーション(補完)

変数の入った文字列は値として認識されずにエラーになってしまいますが、インターポレーション#{}を使えば、セレクタや文中にも配置することができます。

SCSS(コンパイル前)

$img-path: '../common/img/';

.boxA {
	background: url(#{$img-path}bg.png) no-repeat;
}

/* エラーになる */
.boxA {
	background: url($img-path + bg.png) no-repeat;
}

CSS(コンパイル後)

.boxA {
	background: url(../common/img/bg.png) no-repeat;
}

5. @import

CSSの@importとSassの@importは基本同じで外部ファイルを読み込む時に使います。以下のいずれかの方法で記述します。また、CSSの@importとは違って記述する場所はルールセットより前でなくても大丈夫です。

SCSS(コンパイル前)

@import url("main.scss");
@import url(main.scss);
@import "main.scss";
@import 'main.scss';

Sassファイルとしてではなく、CSSファイルとしてインポートされるケース

  • ファイル名に拡張子「.css」がついている
  • http://から始まる絶対パスを指定している
  • メディアタイプを指定している

5-1. パーシャルファイルの@import

パーシャルファイルは「_reset.scss」の様に_(アンダースコア)から始まるファイルのことで、分割したい内容を記述し、@importで呼び出して使用します。

SCSS(コンパイル前)

/* _(アンダースコア)は省略可能 */
@import "reset.scss";

/* 拡張子も省略可能 */
@import "reset";

/* 複数ファイルをインポート */
@import "reset", "common";

6. @mixin

@mixin(ミックスイン)は予め定義しておいたスタイルを後から@includeを使って呼び出すことができる機能です。

SCSS(コンパイル前)

/* ミックスインを定義 */
@mixin boxStyle {
	margin: 0 auto;
	padding: 4%;
	background: #eee;
}

/* 定義したミックスインを呼び出す */
.boxA {
	@include boxStyle;
}

上記は、「boxStyle」という名前のmixinを@includeで呼び出し「.boxA」に定義したスタイルを適応させています。コンパイル後の「style.css」を見てみると下記の様になります。

css(コンパイル後)

.boxA {
	margin: 0 auto;
	padding: 4%;
	background: #eee;
}

6-1. 引数を使った@mixin

次は引数を使った@mixinの定義の仕方です。

SCSS(コンパイル前)

@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
.boxB {
	@include absolute($top: 0, $left: 0);
}

css(コンパイル後)

.boxB {
	position: absolute;
  	top: 0;
  	left: 0;
}

6-2. カンマを使うプロパティの注意点

@mixinは引数1つにつき、1つの値しか渡すことができないので、カンマで区切って複数指定する様な場合はエラーになってしまいます。なので、複数の引数を渡す時は()を重ねて囲むか、引数の後に...を付ける可変長引数を使います。

@mixin family($family) {
	font-family: $family;
}
.h1 {
	@include family(( 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", sans-serif ));
}

/* 可変長引数 */
@mixin family($family...) {
	font-family: $family;
}
h1 {
	@include family( 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", sans-serif );
}

7. @extend

@extendは指定したセレクタのスタイルを継承できる機能です。@mixinと似ていますが、後述するプレースホルダーを使えばコンパイル後のCSSのコードを若干減らすこともできます。

SCSS(コンパイル前)

.clearfix {
	&:after {
		display: block;
		clear: both;
		content: "";
	}
}

.main {
  width: 100%;
	@extend .clearfix;  /* .clearfixを継承 */
	.box-left {
		float: left;
    	width: 40%;
    	height: 100px;
    	background: #ddd;
		}
	.box-right {
		float: right;
    	width: 40%;
    	height: 100px;
    	background: #333;
		}
  }

CSS(コンパイル後)

.clearfix:after, 
.main:after {
  display: block;
  clear: both;
  content: "";
}

.main {
  width: 100%;
}
.main .box-left {
  float: left;
  width: 40%;
  height: 100px;
  background: #ddd;
}
.main .box-right {
  float: right;
  width: 40%;
  height: 100px;
  background: #333;
}

7-1. プレースホルダー

上記、コンパイル後のCSSを見てみると、@extendで継承した元のセレクタ「.clearfix:after」が生成されているのが分かります。継承元のセレクタが不要な場合は、%(プレースホルダー)を使うとこでコンパイル後にそのセレクタを生成させないようにできます。

%clearfix {
	&:after {
		display: block;
		clear: both;
		content: "";
	}
}
.main {
  width: 100%;
	@extend %clearfix /* プレースホルダー */
}

以上、Sass(SCSS)で覚えておきたい基本的な使い方のまとめでした。

Leave a Comment