プログラミング独学day49。学習で得たことや気づきを教えて!
今日は
・Sassの基本のき
をアウトプットします!
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜0時に独学しています!
→プログラミング学習day49、もりけん塾day5
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
ProgateでSassを学習した
ProgateでSassの基本を学習しました。1h30minの内容。
サーッとググっただけでも、Progateで学習した内容はごく一部でした。。Sassを使うには、書籍での学習が必要になる予感。
さっそくアウトプットしていきます。
Sassとは?
Sassとは、サスと読み「CSSを拡張して、効率的に書けるようにしたスタイルシート」。
SASSとSCSSの2種類の記法がある→ProgateではSCSSを採用してる。
というか、現在はSCSSがどこも主流なんだそう。SCSSを覚えれば間違いない。
SCSSの場合、ファイル名は「stylesheet.scss」
ネスト
ネストとは、セレクタやプロパティを「入れ子構造」で書くことができるもの。
このようなHTMLがあったとき、
SCSSで、imgとh2のスタイルを変えるときは、.contents{}のなかに「入れ子」で記述することができます。.contentsと何度も記載する必要がないので、とても便利!
&記法
セレクタに :hoverをつけたいとき、
l i{ &:hover{ } }
このように、入れ子と&:hoverを使います。
また、liの中の.classというクラスをセレクタにしたいとき、
li{ &.class{ } }
&.classと記述します。
&は、親要素という意味がある。
今回の場合は、「&=li と置き換えてる」と知ると忘れないな〜!
変数の概念
変数って、プログラミングだとどこでも出てきて、必須の概念なんですね。
Sassでも変数が使えます。
変数:値を入れておく箱
→変数の名前を入力するだけで、箱に入れた値を繰り返し使うことができる!
Sassでの記述方法
/*値を変数に「代入」*/ $ 変数名: 値; (例) $ color: ##FFFFFF;
@mixin の記法
@mixinは、いくつかのコードを1つにまとめて何度も呼び出せる。
変数に似ているけど、mixinは複数行を一気に格納できる。
@mixinの記述方法
/*定義する*/ @mixin lesson-card(mixin名なんでも){ コード } /*呼び出すとき*/ .Lesson{ @include lesson-card(定義したmixin名); }
呼び出すときは、@include mixin名 だけでOK。
どんな時に使うのか?
→同じスタイルの部品をくり返し使いたいとき。
例えば、
・同じスタイルのボタン
・同じスタイルのコンテンツ紹介
がいくつもあるときにとても便利です。
mixinは”引数”を渡せる
…引数ってなんぞや?
引数:追加情報 のような役割
→たとえば、colorの情報など
mixinで引数に($color)を設定→mixin内で指定した色をそれぞれ利用できます。
@includeで呼び出す時に、
カラーコードを指定する→それが引数のところにリンクする!
Sassの代表的な関数
ググると、Sassの関数がたくさんありました(;´д`)
今回は、Progateで習った「よく使われる関数」をアウトプットします。
darken: 色を暗くする関数
/*指定した色を○%暗くする*/ color: darken(色, %);
たとえば、h2が赤に指定されていたとする。これを、darken関数で20%暗くしてみる。
↓h2が茶色っぽくなった!
lighten:色を明るくする関数
darkenの明るくするバージョン。
color: lighten(red, 20%);
rgba : 色の不透明度を指定する関数
color: rgba(red, 0.5);
0.5が不透明度。
1になると、通常の濃さ。0だと、透明。
import: 外部ファイルを読み込み
最後に、importで外部ファイルを読み込む方法。
stylesheet.scssのほかに、外部ファイルを用意することもある。
たとえば、カラーの変数の記述は別ファイル、など。
その場合は、ファイル名「_colors.scss」とし、最初に_をつける。
これをscssファイルに記述。_colors.scssに書いてある内容も、stylesheet.scss内で使用できるようになります。
@import"_colors.scss";
*読み込み時、_と拡張子は省略可
→ @import “colors”; でもOK
あとがき
Sassは、書籍もやらないとダメな気がする。
7月の模写で使えるように勉強したい。