peeks-blog

自分用メモ

随時追記していく

※参考：Progateとは？魅力や欠点、学習の順序や心得など

Sassとは？

CSSを効率的に書くことが出来るメタ言語。「サス」と読む。
記述量がCSSより減ったり、コードを再利用できるといったメリットがある。
個人サイトから大規模開発まで幅広く用いられている。
書き方はSASS記法とSCSS記法の２つがある。
使用するにはRubyのインストールが必要。

※参考：クリエイティブ、プログラミング用語まとめ

Sassの基礎を学ぼう

入れ子構造

★Sassとは
Progateでは、主流であるScss記法を扱っている
拡張子は「.css」ではなく「.scss」になるので注意


★入れ子構造
この構造を使うことで、１つのセレクタの中に
別のセレクタを「入れ子」として指定する事ができる
これによって、同じセレクタを何度も書かずに済む


【CSSの場合】
ーーーーーーーーーーーーーーーーーー

.header {
width: 100%;
}
.header ul {
padding: 10px;
}

通常のCSSは、「.header」を２回書かなければいけない

【Sassの場合】
ーーーーーーーーーーーーーーーーーー
.header {
width: 100%;
ul {
padding: 10px;
}
}

最初の「.header」は１回書けばOK
「ul」は、「.header」にあるULタグに対するCSS
この場合「.header ul」と同じ扱いになる

入れ子構造は、大規模サイトになるほど効果が大きくなる
これを使うことで、クラス名の変更が楽になる

&記号

変数

mixin

関数

import

目標物を作ってみよう

目標物を確認しよう

プロフィールを作ってみよう

学習言語一覧を作ってみよう

言語ごとの色を指定してみよう

関数を活用してみよう

変数をまとめてみよう

総合課題

備忘録メモ

SassはCSSの上位版（？）なので、
CSSの知識を抑えておく事も重要
※参考：CSSの基礎知識。セレクタ、プロパティ、値とは？