自分用メモ
随時追記していく
※参考:Progateとは?魅力や欠点、学習の順序や心得など
目次
Sassとは?
CSSを効率的に書くことが出来るメタ言語。「サス」と読む。
記述量がCSSより減ったり、コードを再利用できるといったメリットがある。
個人サイトから大規模開発まで幅広く用いられている。
書き方はSASS記法とSCSS記法の2つがある。
使用するにはRubyのインストールが必要。
※参考:クリエイティブ、プログラミング用語まとめ
Sassの基礎を学ぼう
入れ子構造
★Sassとは
Progateでは、主流であるScss記法を扱っている
拡張子は「.css」ではなく「.scss」になるので注意
★入れ子構造
この構造を使うことで、1つのセレクタの中に
別のセレクタを「入れ子」として指定する事ができる
これによって、同じセレクタを何度も書かずに済む
-
・・・
【CSSの場合】
ーーーーーーーーーーーーーーーーーー
.header {
width: 100%;
}
.header ul {
padding: 10px;
}
通常のCSSは、「.header」を2回書かなければいけない
【Sassの場合】
ーーーーーーーーーーーーーーーーーー
.header {
width: 100%;
ul {
padding: 10px;
}
}
最初の「.header」は1回書けばOK
「ul」は、「.header」にあるULタグに対するCSS
この場合「.header ul」と同じ扱いになる
入れ子構造は、大規模サイトになるほど効果が大きくなる
これを使うことで、クラス名の変更が楽になる
&記号
変数
mixin
関数
import
目標物を作ってみよう
目標物を確認しよう
プロフィールを作ってみよう
学習言語一覧を作ってみよう
言語ごとの色を指定してみよう
関数を活用してみよう
変数をまとめてみよう
総合課題
備忘録メモ
SassはCSSの上位版(?)なので、
CSSの知識を抑えておく事も重要
※参考:CSSの基礎知識。セレクタ、プロパティ、値とは?
この記事へのコメントはありません。