0
1

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 1 year has passed since last update.

IIT(Iwate Industrial Tecnology)Advent Calendar 2022

Day 12

ProgateでSassを勉強してみた(無料版のみ)

Posted at

皆さんこんにちは!この記事ではProgateでSassの学習レッスンを受けてみた感想とSassについて私が調べた限りのことを書いていきます。拙い文章ですが最後まで読んでいただけると幸いです!:boy_tone1::pray_tone1:

Sassとは?

Sassとは「Syntactically Awesome StyleSheets」の略称で、CSSを簡略化して記述することができる拡張言語です。日本語では「サス」や「サース」と読まれています。

  • Syntactically=構文的に
  • Awesome=凄い・素晴らしい
  • StyleSheets=スタイルシート

Sassには「SASS記法」「SCSS記法」という2種類の書き方があります。スクリーンショット (4).png

ProgateではSCSS記法のほうを学習しました!
Sassを使用するメリットとして以下のことがあります。

  • CSSより記述量を減らせる
  • コードを再利用できる

Progateの無料版では入れ子構造・&記号についてのレッスンを受けました!

入れ子構造

入れ子構造を使うと同じセレクタ(下の場合.main)を何度も書かなくていい!
スクリーンショット (18).png
スクリーンショット (19).png
スクリーンショット (20).png

&記号

&を使うとどの要素の中にどんな指定を作っているのかがわかりやすくなる!
スクリーンショット (24).png
スクリーンショット (26).png
スクリーンショット (26).png

最後に・・・

自分はプログラミングがあまり得意ではないですが、Progateで実際にコードを書きながら学習できて身に付きやすかったです!Progateではいろんな言語を勉強できるので皆さんも時間があったら是非やってみてください!:muscle_tone1:

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?