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

Tomoyuki

元SE。30歳を目前に仕事や将来に悩み、Web業界へ転職を目指すも失敗。 「好きなことで生きる」に憧れてなんのあてもなく仕事を辞め、ガチ初心者からブロガーに挑戦し、月間6.8万PV(上昇中)を達成! ブログでは大好きなパソコン情報をはじめ、様々な役立つ情報を発信中。 そして次はプロゲーマーとしても活動するため、ゲーム練習と合わせて攻略記事を書いたり、YouTubeでも活動中。








シェアはこちらから


資産運用始めなくて大丈夫ですか?

日本ではお金の教育が一切無いので、資産運用している人はまだ少ないです。

資産運用で結果を出すには膨大な時間が必要で、早く始めないと損なんです。

ウェルスナビなら誰でも簡単に資産運用が始められるので、一度検討してみてはいかがでしょうか。


コメントを残す

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