第4章 高度な機能を覚えてSassを使いこなそう4-7 自作関数を定義する@functionSample Code

1
@use 'sass:math';
2

3
@function halfSize($value) {
4
  @return math.div($value, 2);
5
}

1
.boxA {
2
  width: halfSize(100px);
3
}

1
.boxA {
2
  width: 50px;
3
}

1
@use 'sass:math';
2

3
@function halfSize($value) {
4
  @return math.round(math.div($value, 2));
5
}
6

7
.boxA {
8
  width: halfSize(105px);
9
}

1
.boxA {
2
  width: 53px;
3
}

1
@use 'sass:math';
2

3
$width: 105px;
4

5
@function halfSize() {
6
  @return math.round(math.div($width, 2));
7
}
8

9
.boxA {
10
  width: halfSize();
11
}

1
@use 'sass:math';
2

3
$width: 105px;
4

5
@function halfSize($value: $width) {
6
  @return math.round(math.div($value, 2));
7
}
8

9
.boxA {
10
  width: halfSize();
11
}
12
.boxB {
13
  width: halfSize(200px);
14
}

1
.boxA {
2
  width: 53px;
3
}
4

5
.boxB {
6
  width: 100px;
7
}