티스토리 뷰
<!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
https://sass-lang.com/documentation/variables
'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
- createPortal
- TopLayer
- nextjs
- jest
- 원티드
- Storybook
- 프리온보딩
- React
- error
- 위코드
- C언어
- 초보
- 우아한테크코스
- nodejs
- 노마드코더
- 스토리 북
- NextRequest
- 북클럽
- WSL2
- 윤성우 열혈C프로그래밍
- CLASS
- NextApiRequest
- env
- 아차산
- electron
- 프론트앤드
- import/order
- javascript
- 노개북
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함