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にコンパイルして利用すればよいでしょう。

 

 

The following two tabs change content below.

Tomoyuki

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








シェアはこちらから


おすすめのゲーミングPCまとめ

近年、eスポーツという言葉が浸透し、ゲーミングPCの需要も増えましたが、「ゲーミングPCはどう選べばいいの?」という人も多いのではないでしょうか。そんなPC初心者でも迷わず選べるよう、おすすめのゲーミングPCをご紹介します!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です