「SASS」「SCSS」の書き方

「SASS」「SCSS」の書き方

「SASS」「SCSS」の書き方

SASSはCSSをより、効率的にかける便利な記法らしい。

今まで、CSSしか使ってこなかったけど、SASSも使っていけるように学習し始めまたよ。

SASSは一般的にSCSSで書かれることの方が多いらしい。なので、SCSSについて書いていきます。

最初は①のネストだけでも、十分とのことでしたが少し他の使い方も記載しています。

まずはこの3つを学習してみることにしました。忘備録として、このブログにも書いておきます。

①ネストして使える

②変数をつかって作る

③cssをパーツ化して作れる

ネストして使う

SCSSを下記の左のように記載すると、右のCSSのように勝手に反映されます。

下記で使っているのは①ネストと

②変数を使う③パーツ化する【@mixinや@include、($bgColor)など】

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

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

.header .logo {
  font-size: 12px;
}

.header .tagline {
  font-size: 14px;
}

.header .menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .menu ul li {
  font-size: 16px;
  border-right: 1px solid #ddd;
  padding: 0 10px;
}

.header .menu ul li.contact a {
  background: pink;
  padding: 20px 10px;
  color: #fff;
}

.header .menu ul li.document a {
  background: skyblue;
  padding: 20px 10px;
  color: #fff;
}
/*# sourceMappingURL=style.css.map */

変数を使う

②変数をつかう。　@mixinと@includeを使った、レスポンシブの作り方

@mixin desktop {
    @media (min-width:600px) {
        @content;
    }
}

h1 {
    font-size: 2rem;
    @include desktop {
        font-size: 5rem;
        margin-bottom: 100px;
    }
}

h1 {
  font-size: 2rem;
}

@media (min-width: 600px) {
  h1 {
    font-size: 5rem;
    margin-bottom: 100px;
  }
}

②変数をつかう。　@mixinと@includeを使った、レスポンシブの作り方

@mixin mq($width: 680px) {
    @media only screen and (max-width: $width) {
        @content;
    }
}

img {
    @include mq {
        margin: 0;
    }
}

@media only screen and (max-width: 680px) {
  img {
    margin: 0;
  }
}

パーツ化して使う

③パーツ化して使う　グラーデーションカラーの箇所

@mixin gradient-color($color1: pink, $color2: plum ) {
    background: linear-gradient($color1, $color2);
}
.box {
    @include gradient-color(skyblue, gold )
}
.title {
    @include gradient-color;
}

.box {
  background: -webkit-gradient(linear, left top, left bottom, from(skyblue), to(gold));
  background: linear-gradient(skyblue, gold);
}

.title {
  background: -webkit-gradient(linear, left top, left bottom, from(pink), to(plum));
  background: linear-gradient(pink, plum);
}