元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

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";