티스토리 뷰

Html,Css/Css

scss : Scss Extends

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 18. 20:10 
<!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="#">Log In</a>
    <button>Log Out</button>
  </body>
</html>

styles.scss 파일

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

a {
  @extend %button;
  text-decoration: none;
}

button {
  @extend %button;
  border: none;
}

_extends.scss 파일

%button {
  font-family: inherit;
  border-radius: 7px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 10px;
  background-color: peru;
  color: white;
  font-weight: 500;
}

 

extends 의 장점은 스타일을 공유하면서 각자 다른스타일을 추가할 수 있으며 쉽게 공유가 가능하다는 장점이 있습니다.

 

 

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

 

Sass: @extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. For example, the BEM methodology encourages modifier classes that go on the same elements as block or element classe

sass-lang.com

 

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

css : grid min-content , max-content  (0) 2021.10.19
css : grid place-content  (0) 2021.10.18
css: grid autofill , autofit  (0) 2021.10.18
css: grid minmax()  (0) 2021.10.18
css : grid-template  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함