第3章 これだけはマスターしたいSassの基本機能3-7 演算Sample Code

1
article {
2
  width: 560px - 14px;
3
  padding: 7px;
4
}

1
article {
2
  width: 546px;
3
  padding: 7px;
4
}

1
/* 足し算 */
2
.example01 {
3
  width: 500px + 8;
4
}
5

6
/* 掛け算 */
7
.example02 {
8
  width: 500px * 8;
9
}
10

11
/* 割り算の余り */
12
.example03 {
13
  width: 100px % 3;
14
}

1
/* 足し算 */
2
.example01 {
3
  width: 508px;
4
}
5

6
/* 掛け算 */
7
.example02 {
8
  width: 4000px;
9
}
10

11
/* 割り算の余り */
12
.example03 {
13
  width: 1px;
14
}

1
article {
2
  width: 300px + 5cm;
3
}

1
article {
2
  width: 488.9763779528px;
3
}

1
$main_width: 560px;
2

3
article {
4
  width: $main_width - 7 * 2;
5
  padding: 0 7px;
6
}

1
article {
2
  width: 546px;
3
  padding: 0 7px;
4
}

1
$main_width: 560px;
2

3
article {
4
  $padding: 7px;
5
  width: $main_width - $padding * 2;
6
  padding: 0 $padding;
7
}

1
p:after {
2
  content: "今日は、" + 寒いです。;
3
  font-family: sans- + "serif";
4
}

1
p:after {
2
  content: "今日は、寒いです。";
3
  font-family: sans-serif;
4
}

1
.example {
2
  width: 300 * 5px; // 1500px
3
  width: 300px * 5; // 1500px
4
  width: 300 * 5 + px; // 1500px
5
  width: 300px * 5px; // エラー
6
}

1
@use "sass:math";
2

3
.example01 {
4
  $value: 50px;
5
  width: math.div($value, 2);
6
}
7
.example02 {
8
  width: math.div(50px, 2);
9
}
10
.example03 {
11
  width: 50px - math.div(50, 2);
12
}

1
.example01 {
2
  width: 25px;
3
}
4

5
.example02 {
6
  width: 25px;
7
}
8

9
.example03 {
10
  width: 25px;
11
}

1
a {
2
    color: #000 + #111;
3
}