デイトラ初級DAY23　　　　　　　　　　　CSSの上位互換！Sassを学習しよう

日記

・VSCODEにLive Sass Compilerのインストールをして使うのがうまくいかなくて最初の段階で大きくつまづく。メンターさんに何回か質問して本当に何でも無いところで盛大にすっ転んでいたことに気がついてちょっと落胆。
「わからない」ってこういうことなんだと思う。例えていうなら触ったことない人に「ギターの弦を換えといて」と伝えてもチューニングが狂わないように弦を張れる人なんていないと思う。たとえ正解の現物を見つつ弦を換えたとしても。
・上のこととは別に、、、「;」のつけ忘れには注意しよう。全く動かなくなる。ストレスも溜まってしまう。

＆は前のタグまでを置き換えてくれる。

.lists{

　 li {
　　 　width: 25%;
　　　 text-align: center;　　　
　　　 a {
　　　　 color: #333;
　　　　 font-size: 16px;
　　　　 &:hover {　　　　　　　　　  &{  は  .lists li a {   と同じ意味になる。
　　　　　 color: #da1e32;　　　　　　　前のaタグまでを＆が置き換えてくれる。　　　
　　　　 }
　　　　 &.active {
　　　　　 color: #da1e32;
　　　　 }
　　　 }
　　 }
   }

---

変数を使おう

$link-color-active: #da1e32;       //これで変数にして

&.active {color: $link-color-active;          このように使う。CSSの方は変わらない。

制作の途中でメインカラーを変更したいと思った時・・・
CSSだと全てを書き換える必要があるけども変数で定義しておくと
おおもとの変数をひとつ変えればいい。（保守性の高いコード）
サイト内でよく使いそうなカラーやフォントサイズには変数を使うことを意識しよう。

---

@extend

.button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}

.alert { 
background-color: blue; 
color: white; 
padding: 10px; 
border-radius: 5px; }

普通だとこのように書かないといけないが@extendを使うと、、、下のようにできる。@extendはすでに作られているクラスを使いまわせる

.base-style {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}

.button { @extend .base-style; }

.alert { @extend .base-style; }

---

@mixinは、型を作ってさらに一部変更して使える。

.small-button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}

.large-button {
background-color: blue; 
color: white; 
padding: 20px; 
border-radius: 5px; 
}

普通は上のようにやるが@mixinを使うと下のようにできる

普通は上のようにやるが、、@mixinを使うと次のようにできる
// ここで共通のスタイルをまとめる
@mixin button-style($padding) {
　background-color: blue;
　color: white;
　border-radius: 5px;
　padding: $padding; // 引数でパディングの値を変更
}

// 小さなボタン 
.small-button { 
　@include button-style(10px); 
// @mixin を使って共通スタイルを適用 }

// 大きなボタン 
.large-button { 　
　@include button-style(20px); 
// パディングだけ違う値を渡す }

---

メディアクエリとの関連がいまいちわからなかったので保留

---

関数を作ることもできる

@function activeFontSize($base-size){
　@return $base-size + 2px;
}
 
 
$link-font-size: 16px;       /これは変数として定義したもの

このように関数を定義して、、、次のように使う

&.active {
　 font-size: activeFontSize($link-font-size);
}

}