ProgateでSassを学習

この記事は2分で読めます

自分用メモ

随時追記していく

※参考: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の基礎知識。セレクタ、プロパティ、値とは?

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。