10
13

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.

Sassについて

Posted at

Sass(Syntactically Awesome StyleSheetの略)とはCSSの機能を拡張した言語。Sassを利用することで、CSSを効率的に書けるようになる。SassはCSSに非常に似ているが異なる言語。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができる。
Kobito.x4JFLI.png

SassはそのままではWebブラウザーに認識されない。Sassのファイルである.scssファイル(.sassファイルもある)をコンパイラーに通すことで.cssファイルを生成することになる。

Sass(SASS記法、SCSS記法)とCSSのコードの違いは以下の通り

.sass
body
  color: #000
.scss
body{
	color:#000;
}

##SassとScssの違い##
これをコンパイラーに通すと、下記変換となる。

.css
body {
  color:#000;
}

SCSS記法とSASS記法の違いをまとめると、以下の表の通り
1.png

##Sassのメリット##
Sassには以下のようなメリットがある。

・記述の簡略化
・プログラムのような処理
・複数のCSSファイルを1つにまとめる
・同じ値を使い回す

####Sassにおける変数
Sassでは、変数を使用することが可能。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができる。変数を定義するには、$変数名: 値;のように記述する。

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

####パーシャル
パーシャルとは、分割したSassファイル。ファイルを分割することで、機能や内容ごとに管理ができるようになる。一つのファイルに全てのスタイルを書くと膨大な記述になり、可読性が悪くなる。一定のルールでファイルを分割して開発することで変更・修正がしやすくなる。

パーシャルファイルを作成するには、ファイル名を_(アンダースコア)から始める。パーシャルファイルを読み込むには、@import ファイル名と記述。
以下は、_reset.scssと_header.scssを読み込む例。
以下は例のため、sample.scssファイルを追加したり、実際に記述する必要はない。

sample.scss
@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

####同じ値を使い回す

CSSでは、複数の要素に同じスタイルを適用させる場合、何度も同じスタイルを書かなければいけない。しかし、Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることも可能。

#####変数
Sassでは、変数が使用できる。
何度も使用する値を変数を定義することで、変数名で何度も使用することができる。
変数を定義するには、$変数名: 値;のように記述。
以下は変数を定義するファイル、_variable.scssを使用して変数を定義する例。

_variable.scss
$mainYellowColor: #FFEC00; 
 /* #FFEC00という色をmainYellowColorという変数名で定義する */
mixin

mixinとは、まとまったスタイルを定義することができる機能。
変数は値を定義するものだが、mixinはスタイルを定義するもの。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなる。
mixinを定義するには、@mixin mixin名() {}のように記述する。

10
13
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
10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?