티스토리 뷰

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

 

'Html,Css > Css' 카테고리의 다른 글

웨이브 형태의 스켈레톤 만들기 (맥박 X)  (0) 2023.08.15
css \n 개행 줄바꿈 적용 시키는 방법 white-space  (0) 2022.03.01
scss : Scss Variables and Nesting  (0) 2021.10.19
css : grid min-content , max-content  (0) 2021.10.19
css : grid place-content  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함