初心者のscssの使い方まとめメモ

Probate sassの勉強内容まとめ
拡張子が変わります。
.cssではなく、.scssになる。

□　scssのメリット
記述量が減る
コードの再利用が出来る

同じセレクタの省略　カッコの内に記載する。　
例　.cssの時
.header {
Width: 100%:
}

.header ul {
Width: 100%:
}

⇩　scssの時
.header {
Width: 100%:
　ul {
　Width: 100%:
　}
}

復習　カーソルを乗せると赤色に変える　ホバー
:hover{
background-color : red:
}

復習 クリック時動作する　アクティブ
:active {
positions: relative;
top: 7px;
box-shadow: none;
}　

ホバーカーソルを乗せると赤色になるをscssで記述
.header {
Width: 100%:
&:hover{
background-color : red:
}

}

&で繋げることが出来るもの
classも同様に出来る。
例
li {
color: #b5afaf;
&.current-page {
color: #f74c90;
}
}

□　mixinで入力量を減らしてみる
@include mixin名とincludeを使う。
// circleという名前のmixinを定義してください

@mixin circle {
display: inline-block;
border-radius: 50%;
margin-left: 10px;
text-align: center;
background-color: #888888;
}

.main {
margin: 20px 10px;
color: #ffffff;
.small {
// 定義したcircleを呼び出してください include circleの中身はmixin circleと同じです。
@include circle;
width: 34px;
height: 34px;
}
.medium {
// 定義したcircleを呼び出してください
width: 62px;
height: 62px;
}
.large {
// 定義したcircleを呼び出してください
@include circle;
width: 90px;
height: 90px;
}
}