티스토리 뷰

Html,Css/Css

scss : Scss Variables and Nesting

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 19. 05:42 
<!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>
    <h2>Title</h2>
    <div class="box">
      <h2>Another Title</h2>
      <button>Save</button>
    </div>
    <button>Another Save</button>
  </body>
</html>

scss 는 변수를 설정할 수 있습니다.

 

_varibale.scss

$bg: red;
$title: 32px;

 

styles.scss

@import "_variable.scss";

body {
  color: $bg;
}

h2 {
  font-size: $title;
}

button {
  color: blue;
}

.box {
  color: blue;
  &:hover {
    color: green;
  }
  h2 {
    font-size: 18px;
    &:hover {
      color: red;
    }
  }
  button {
    color: $bg;
  }
}

/*
.box {
  color: blue;
}

.box :hover{
    color:green;
}

.box h2 {
  font-size: 18px;
}

.box button {
  color: $bg;
}
*/

Nesting 은 기존의 css 에서 개별로 스타일을 설정하던 것을 scss에서는 좀더 줄여서 css를 사용할 수 있습니다.

 

https://sass-lang.com/guide#topic-3

 

 

 

Sass: Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s

sass-lang.com

 

https://sass-lang.com/documentation/variables

 

Sass: Variables

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they're one of the most useful tools Sass brings to the table. Variables make it poss

sass-lang.com

 

 

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

css \n 개행 줄바꿈 적용 시키는 방법 white-space  (0) 2022.03.01
scss : Scss mixins  (0) 2021.10.19
css : grid min-content , max-content  (0) 2021.10.19
css : grid place-content  (0) 2021.10.18
scss : Scss Extends  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
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
글 보관함