Sass(SCSS)の学習メモ

Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。

ネスト

<!-- HTML -->
<div class="header">
    <div class="log"></div>
    <div class="tagline"></div>
    <div class="menu">
        <ul>
            <li><a href="">メニュー1</a></li>
            <li><a href="">メニュー2</a></li>
            <li><a href="">メニュー3</a></li>
            <li class="contact"><a href="">お問い合わせ</a></li>
            <li class="document"><a href="">資料請求</a></li>
        </ul>
    </div>
</div>

/* SCSS */
.header{
    .logo{
        font-size:12px;
    }
    .tagline{
        font-size:14px;
    }
    .menu{
        ul{
            display:flex;
            li{
                font-size:16px;
                border-right: 1px solid #ddd;
                list-style:none;
                padding: 0 10px;
            }
        }
    }
}

/* CSS */
.header .logo {
  font-size: 12px;
}
.header .tagline {
  font-size: 14px;
}
.header .menu ul {
  display: flex;
}
.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  list-style: none;
  padding: 0 10px;
}

変数

• $変数名 : 値で指定する

変数を使うと再利用できる。例えば、カラーコードに変数名を付けて再利用する。

$mainColor:#a00;

.header{
    .logo{
        font-size:12px;
    }
    .tagline{
        font-size:14px;
    }
    .menu{
        ul{
            display:flex;
            li{
                font-size:16px;
                border-right: 1px solid #ddd;
                list-style:none;
                padding: 0 10px;
                &.contact{
                    a{
                        background:$mainColor;
                        padding:8px 10px 6px;
                        color: #fff;
                    }
                }
            }
        }
    }
}

.header .logo {
  font-size: 12px;
}
.header .tagline {
  font-size: 14px;
}
.header .menu ul {
  display: flex;
}
.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  list-style: none;
  padding: 0 10px;
}
.header .menu ul li.contact a {
  background: #a00;
  padding: 8px 10px 6px;
  color: #fff;
}

mixin

良く使うものをパーツ化して再利用する。

// 定義
@mixin 名前{
  color: red;
}

// 呼び出し
div{
  @include 名前;
}

$mainColor:#a00;

@mixin btn{
    background:$mainColor;
    padding:8px 10px 6px;
    color:#fff;
}

.header{
    .logo{
        font-size:12px;
    }
    .tagline{
        font-size:14px;
    }
    .menu{
        ul{
            display:flex;
            li{
                font-size:16px;
                border-right: 1px solid #ddd;
                list-style:none;
                padding: 0 10px;
                &.contact{
                    a{
                        // background:$mainColor;
                        // padding:8px 10px 6px;
                        // color: #fff;
                        @include btn;
                    }
                }
            }
        }
    }
}

.header .logo {
  font-size: 12px;
}
.header .tagline {
  font-size: 14px;
}
.header .menu ul {
  display: flex;
}
.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  list-style: none;
  padding: 0 10px;
}
.header .menu ul li.contact a {
  background: #a00;
  padding: 8px 10px 6px;
  color: #fff;
}

documentクラスにも適用してみる。

$mainColor:#a00;

@mixin btn{
    background:$mainColor;
    padding:8px 10px 6px;
    color:#fff;
}

.header{
    .logo{
        font-size:12px;
    }
    .tagline{
        font-size:14px;
    }
    .menu{
        ul{
            display:flex;
            li{
                font-size:16px;
                border-right: 1px solid #ddd;
                list-style:none;
                padding: 0 10px;
                &.contact, &.document{
                    a{
                        @include btn;
                    }
                }
            }
        }
    }
}

.header .logo {
  font-size: 12px;
}
.header .tagline {
  font-size: 14px;
}
.header .menu ul {
  display: flex;
}
.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  list-style: none;
  padding: 0 10px;
}
.header .menu ul li.contact a, .header .menu ul li.document a {
  background: #a00;
  padding: 8px 10px 6px;
  color: #fff;
}

mixinに引数を渡す

ex.)背景色だけ変更

$mainColor:#a00;

@mixin btn($bgColor){
    background:$bgColor;
    padding:8px 10px 6px;
    color:#fff;
}

.header{
    .logo{
        font-size:12px;
    }
    .tagline{
        font-size:14px;
    }
    .menu{
        ul{
            display:flex;
            li{
                font-size:16px;
                border-right: 1px solid #ddd;
                list-style:none;
                padding: 0 10px;
                &.contact{
                    a{
                        @include btn(#a00);
                    }
                }
                &.document{
                    a{
                        @include btn(#005fff);
                    }
                }
            }
        }
    }
}

.header .logo {
  font-size: 12px;
}
.header .tagline {
  font-size: 14px;
}
.header .menu ul {
  display: flex;
}
.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  list-style: none;
  padding: 0 10px;
}
.header .menu ul li.contact a {
  background: #a00;
  padding: 8px 10px 6px;
  color: #fff;
}
.header .menu ul li.document a {
  background: #005fff;
  padding: 8px 10px 6px;
  color: #fff;
}

&

&は、親要素を表す。

四則演算

• 加減剰余

足し算の場合

.logo{
  width:100px + 100px;
}

.logo{
  width:200px;
}

掛け算の場合

.logo{
  width:100px * 2;
}

.logo{
  width:200px;
}

CSSのcalc関数

.logo{
  width:calc(100% - 100px);
}

import

外部のSassを読み込む。

@import "variable.scss";