2022年01月19日 更新

Sassの基本的な構文

[TOC]

どうも、クラゲジュニアです。
今日は、Sassの基本的な構文についてです。

Sassとは

CSSを生成するための言語の一つです。
四則演算・ネストなど、CSSにはない機能を利用することができます。

SassファイルのままではWebブラウザなどが解釈できないため、コンパイルを行い、CSS形式に変換する必要があります。

ネスト

sass

div {
    display: flex;
    p {
        color: red;
    }
    .test {
        font-size: 20px;
    }
}

css

div {
  display: flex;
}
div p {
  color: red;
}
div .test {
  font-size: 20px;
}

親要素の取得

sass

div {
    &:hover {
        font-weight: bold;
    }

    &_1 {
        line-height: 2;
    }
}

css

div:hover {
  font-weight: bold;
}
div_1 {
  line-height: 2;
}

四則演算

sass

div {
    width: 200 * 3 + 50;
}

css

div {
  width: 650;
}

変数

sass

$main-color: red;

div {
    background-color: $main-color;
}

css

div {
  background-color: red;
}

反復処理

反復処理には、@for 、@while、@eachを使用することができます。
sass

$nameList: Nick Nancy Max;
@each $name in $nameList{
  .img-#{$name} {
    background-image: url(../img/#{name}.png);
  }
}

css

.img-Nick {
  background-image: url(./img/Nick.png);
}

.img-Nancy {
  background-image: url(./img/Nancy.png);
}

.img-Max {
  background-image: url(./img/Max.png);
}

mixin

sass

@mixin border($size:1px, $type:solid, $color:#ccc){
  border:$size $type $color;
}
.A {
  @include border();
  width:200px;
}
.B {
  @include border($size:5px);
  width:400px;
}

css

.A {
  border: 1px solid #ccc;
  width: 200px;
}

.B {
  border: 5px solid #ccc;
  width: 400px;
}

継承(extends)

sass

.base{
  border: 3px dotted blue;
  padding: 2px 5px;
  background-color: red;
}
.A{
  @extend .base;
  width:100%;
}
.B{
  @extend .base;
  width:50%;
}

css

.base, .B, .A {
  border: 3px dotted blue;
  padding: 2px 5px;
  background-color: red;
}

.A {
  width: 100%;
}

.B {
  width: 50%;
}

以上です。