本格的にポートフォリオ作りを始めたので復習の意味を含めてSassの復習をします。
1.入れ子構造
同じセレクタを何度も書かなくて良い
.main {
margin: 20px;
padding: 20px;
border-radius: 5px;
background-color: #f567ae;
h1{
color:#f8f8f8;
font-size:34px;
}
p{
color:#efefef;
font-size:16px;
}
}
mainクラスのｈ１・ｐタグを一箇所にまとめられる。
2.＆記号（hoverとactive）
入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換え、一箇所にまとめることができる。この「&」はhoverだけでなく、activeなどにも使うことができる。
.main {
margin: 20px;
text-align: center;
h3 {
margin-bottom: 15px;
color: #555;
}
.button {
・
・
&:hover{
opacity: 1;
}
&:active{
position: relative;
top: 7px;
box-shadow: none;
}
}
}
3.特定のタグに適用させる
クラスの中の特定のタグにのみｃｓｓを適用させたい場合「要素・クラス名」とすることで指定ができるこれも＆を用いることでまとめることができる。
.main {
margin: 20px;
.title {
margin-bottom: 10px;
padding-bottom: 3px;
border-bottom: 1px solid #888;
color: #555;
}
li {
list-style: decimal;
margin-left: 22px;
color: #b5afaf;
line-height: 26px;
&.current-page{
color:#f74c90;
}
}
}
4.変数の定義
変数を定義し、クラスに代入する事もできる。
「$変数：ｃｓｓ設定；」これにより変更も簡単になる。
※変数は利用する箇所より前で定義しないと使えない。
スコープの範囲についても他の言語の変数と同様。
$wanko-color: #7579a3;
.main {
margin: 20px;
border-radius: 5px;
.title {
font-size: 32px;
margin-bottom: 5px;
color: $wanko-color;
}
.button {
background-color: $wanko-color;
display: inline-block;
color: #ffffff;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
}
}
5.mixin
mixinとは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能である。これにより、同じコードを何度も書く必要がなくなり、無駄なコードを省略することができる。
「@mixin mixin名 { コード }」と記載。
呼び出すには
「@include 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 {
@include circle;
width: 34px;
height: 34px;
}
.medium {
@include circle;
width: 62px;
height: 62px;
}
.large {
@include circle;
width: 90px;
height: 90px;
}
}
6.引数を渡す
mixinも引数としてincludeから値を渡すことができる。
@mixin circle($color) {
display: inline-block;
border-radius: 50%;
margin-left: 10px;
text-align: center;
background-color:$color;
}
.main {
margin: 20px 10px;
color: #ffffff;
.small {
@include circle(#20efae);
width: 34px;
height: 34px;
}
.medium {
@include circle(#61cbff);
width: 62px;
height: 62px;
}
.large {
@include circle(#a070f7);
width: 90px;
height: 90px;
}
}
7.関数を使用する
sassでは関数も使用することができる。
（特定の色を５０％薄くするなど）
$blue: #0ac4ff;
$pink: #fd6eb6;
.main {
margin: 10px;
li {
list-style: none;
float: left;
height: 100px;
width: 33%;
margin-bottom: 10px;
}
.blue1 {
background-color: $blue;
}
.blue2 {
background-color:darken($blue,10%);
}
.blue3 {
background-color:darken($blue,20%);
}
.pink1 {
background-color: $pink;
}
.pink2 {
background-color:lighten($pink,10%)
}
.pink3 {
background-color:lighten($pink,20%)
}
}
8.import
外部先からファイルを読み込む事ができる。
読み込み先のファイル名の先頭には「（アンダーバー）」を付ける必要がある。また、ファイルを読み込むためには右の図のように「@import "ファイル名"」とする。
import時に指定するファイル名は、右の図のように「（アンダーバー）」と拡張子（.scss）を省略できる。
変数をまとめたファイルを作成し、使いたいファイル内で読み込むことでコードの整理ができる。
_variables.scss.
$twitter:#1dcaff;
$facebook:#405f9e;
↑
こちらのファイルで変数を定義する。
-----------------------------------------
@import "variables.scss";
.main {
margin: 20px;
text-align: center;
.title {
color: #455b6d;
margin-bottom: 10px;
}
.button {
display: inline-block;
border-radius: 50%;
margin: 10px;
text-align: center;
height: 64px;
width: 64px;
color: #ffffff;
font-size: 32px;
box-shadow: 1px 2px 6px rgba(106, 137, 152, 0.3)
}
.twitter {
background-color:$twitter;
}
.facebook {
background-color:$facebook;
}
.fa {
line-height: 64px;
}
}