scss : Scss mixins

Html,Css/Css

scss : Scss mixins

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 19. 19:00

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <a href="">google</a>
    <a href="">google</a>
    <a href="">google</a>
    <a href="">google</a>
    <a href="">google</a>
  </body>
</html>

scss 파일

@import "_variable.scss";
@import "_mixins.scss";

a {
  margin-bottom: 10px;
  &:nth-child(odd) {
    @include link(red);
  }
  &:nth-child(even) {
    @include link(blue);
  }
}

mixins 파일

@mixin link($color) {
  text-decoration: none;
  display: block;
  color: $color;
}

css 에서 변수를 줄 수 있다.

@import "_variable.scss";
@import "_mixins.scss";

a {
  margin-bottom: 10px;
  &:nth-child(odd) {
    @include link("odd");
  }
  &:nth-child(even) {
    @include link("even");
  }
}

@mixin link($word) {
  text-decoration: none;
  display: block;
  @if $word == "even" {
    color: blue;
  } @else {
    color: red;
  }
}

if else 문도 css 에서 가능하다

https://sass-lang.com/documentation/at-rules/mixin

Sass: @mixin and @include

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. Mixins are defined using the @mixin at-rule, whi

sass-lang.com