【プログラミング独学day49】ProgateでSassの基本を知る

HTML/CSS

プログラミング独学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月の模写で使えるように勉強したい。
今日は以上です。

 

Thanks:もりけんさん(@terrace_tec)

もりけんさんのHPはこちら→ 武骨日記