Progate（プロゲート）でSass（サース）の学習メモ

こんにちは。Tomoyuki（@tomoyuki65）です。

Progateで初めてSass（サース）について知りましたが、CSSのコード量を減らせるのと、Ruby on Railsと相性が良さそうなのが気に入りました。

ということで、Sassについてサクッと学習メモを残しておきます。

Sass（サース）とは？

Sass（Syntactically Awesome Stylesheets）はCSSに対して機能を拡張した言語であり、CSSをより効率的に書けるスタイルシート言語です。

Sassの記法は「SASS記法」と「SCSS記法」の2種類あり、「SCSS記法」はCSSとの互換性のために作られた記法で、CSSの書き方がそのまま使えるのがメリットです。

例：CSS

.header {
 width: 100%;
}

.header ul {
 padding: 10px;
}

上記をSCSS記法にした場合

.header {
 width: 100%;

 ul {
  padding: 10px;
 }
}

尚、Sassで書いたファイル（.scss）はコンパイル（変換）してCSSファイル（.css）にしてから利用するのが基本です。

ただし、Ruby on Railsではフレームワークでやってくれるようなので、scssファイルのまま使えるようです。

Sassの&記法

:hoverや:actionの記述は、&記法で書く。

p {
 font-size: 10px;
 &:hover {
  background-color: red;
 }
}

また、特定要素を指定する場合は「&.クラス名」で指定する。例えばクラス名「second」を指定する場合は以下の通り。

li {
 &.second {
  color: red;
 }
}

Sassの変数

変数の定義は以下の通り。

$color: #ffffff;

h1 {
 color: $color;
}

尚、変数の定義位置によってスコープ（利用範囲）が異なるので注意。

Sassのmixin

何度も利用するコードは、mixinを使えば記述量を減らせるので便利。

@mixin card {
 width: 100px;
 margin: 10px;
}

.card-list1 {
 @include card;
}

.card-list2 {
 @include card;
}

また、引数を持たせることも可能。

@mixin color($color1) {
 color: $color1;
}

.card-list1 {
 @include color(#ffffff);
}

Sassの関数

Sassには便利な関数が用意されている。例えば色を暗くする関数「darken」を使う場合は以下の通り。

p {
 color: darken(#123456, 10%);
}

Sassのimport

Sassでは外部ファイル「_colors.scss」をimportで読み込むことが可能。（外部ファイル名にはアンダーバー「_」が必要なので注意）

@import "colors";

p {
 color: $color1;
}

最後に

CSS書くならSassを使った方が良さそうです。

ただRuby（Rails）だと遅いかもしれないので、そういった場合はCSSにコンパイルして利用すればよいでしょう。

合わせて読みたい👇

プログラミングスクールおすすめは？比較一覧まとめ

2019年4月28日

IT・Webエンジニア転職サイト・エージェントおすすめ比較一覧まとめ

2019年4月29日

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Tomoyuki

SEを5年経験後、全くの未経験ながら思い切ってブロガーに転身し、月間13万PVを達成。その後コロナの影響も受け、以前から興味があったWeb系エンジニアへのキャリアチェンジを決意。現在はWeb系エンジニアとして働きながら、プロゲーマーとしても活躍できるように活動中。

最新記事 by Tomoyuki (全て見る)

• 【スト6】モダンキャミィの初心者向けコンボまとめ【STREET FIGHTER 6（ストリートファイター6）】 - 2024年11月10日
• モンハンワイルズでおすすめのオプション設定まとめ【Monster Hunter Wilds】 - 2024年11月4日
• モンハンワイルズでおすすめのグラフィック設定まとめ【Monster Hunter Wilds】 - 2024年11月2日