More than 3 years have passed since last update.

[Sass] Sassについて

Posted at 2021-06-22

はじめに

railsでコマンドを使ってファイルを生成したりすると、自動で拡張子が「.scss」となったファイルが生成されて、なんだろうと思いながら、放置していました笑

実はこれCSSの進化版みたいな「Sass」という言語で書くファイルだったみたいです。
ちなみにSassはサスと読む人とサースと読む人がいて、私が第三者としてたまたまサスと読む人とサースと読む人がSassについてお話ししている場面に出くわした時は個人的にちょっと面白かったです。

私はどちら派かわからないように「サァス」と発音することで、曖昧にしています。
すみません余談でした。

簡単に「Sassとは」を書いてみました。また、少しだけ一部の機能も紹介してみます。
よろしくお願いします！

SassとはCSSを効率的に書くことができる言語です。
書き方が2種類あってSASS記法とSCSS記法というのがあります。
※今回はSCSS記法で紹介していきます。

Sassを使うことによりCSSよりも記述量を減らしたりコードを再利用できるといったメリットがあります。

少しだけ一部の機能を紹介します。

Sassでは入れ子構造を使うことができます。例えばHTMLで下記のように入れ子構造があったとします。

<div class = "header">
  <ul>
    <li>
  <!-- 省略 -->
    </li>
  </ul>
</div>

通常、CSSでこのセレクタに何か効果を与えようとすれば下記のようになります。

.header {
  width: 100%;
}

.header ul {
  padeding: 5px;
}

.header ul li {
  font-size: 10px;
}

このような記述をSassの場合では、入れ子構造で記述できます↓

.header {
  width: 100%;

  ul {
    padding: 5px;
    li {
      font-size: 10px;
    }
  }
}

もし、class名の変更などがあった際は一番上のhedderだけを変更するだけで、子になっているセレクタも変更されるのでわざわざ全てを書き直す必要がなくなります。

Sassでは変数の定義ができます。
変数の定義の仕方はこうです。↓

$my-color: #26546a;

このように定義すると下記のように使えます。

$my-color: #26546a;

h1 {
  color: $my-color;
}

p {
  color: $my-color;
}

今回は簡単にSassについてと、一部の機能を紹介しました。
Sassにはmixinというとても便利な機能があるのですが、次回の記事でmixinについてまとめたいと思います。