sass math module

support new functions and variables
css 스타일 정의할 때 math를 사용해서 값을 계산할 수 있다

@use "sass:math";

ex.

@use "sass:math";
.text {
font-size: math.$pi + math.pow(2, math.$e) + px;
}

<style lang="scss" scoped>
$_col_width: math.div($_width - 96px - $_gutter, 2);
</style>

directory

assets/scss/mixin/_background.scss

@mixin mixin-background($_url: null, $_size: contain, $_position: center) {
//default로 url 값으로 null, size에 contain, position에 center 

  @if $_url {
    background-image: url($_url);
    //url이 있으면
  }
  background-repeat: no-repeat;
  background-position: $_position;
  background-size: $_size;
}

Ex.

@include mixin-background('/images/arrowright.png', 18px 14px);
//이미지 url, size

assets/scss/_mixins.scss