1
0

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のメリット
Sassには以下のようなメリットがあります。

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

Sassのネスト構造
SassではCSSをネスト(入れ子)して記述することができます。ネストして記述することで深い階層になっても親子関係がわかりやすい、親要素を複数記述しなくて済むといったメリットがある。

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

・パーシャルファイルを作成するには、ファイル名を_(アンダースコア)から始めます。パーシャルファイルを読み込むには、@import ファイル名と記述します。

また、mixinという機能を使用することで、同じスタイルをまとめることもできます。

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

変数
Sassでは、変数を使用することができます。
何度も使用する値を変数を定義することで、変数名で何度も使用することができます。
変数を定義するには、$変数名: 値;のように記述します。

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?