CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어입니다.
CSS는 웹 프로젝트 규모가 커지면 커질수록 코드가 복잡해지고 유지보수도 불편해집니다.
계속해서 동일한 코드를 복사하고 붙여넣는 과정을 반복해야 하기 때문이죠.
Human Error를 줄이려는 노력은 중요합니다.
그래서 코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법이 바로 Sass입니다. 우리 프로젝트에서는 Styled-Components를 사용하기 때문에 적용하진 않을거에요. 소개 정도만 하겠습니다 !_!
(2) Sass 특징 및 예시 소개
- 변수를 사용할 수 있다.
```scss
$color: #4287f5;
$borderRadius: 10rem;
div {
background: $color;
border-radius: $borderRadius;
}
```
중첩(Nesting)
```scss
label {
padding: 3% 0px;
width: 100%;
cursor: pointer;
color: $colorPoint;
&:hover {
color: white;
background-color: $color;
}
}
```
- 다른 style 파일을 import 할 수 있어요.
- common.scss
```scss
// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;
```
- style.scss
```scss
//style.scss
@import "common.scss";
.box {
background-color: $color3;
}
```브라우저는 기본적으로 `default style`을 제공해요. 예를 들면 **margin**이나 **글자의 크기** 같은 경우죠. 한번 해볼까요?<!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" />
<title>Document</title>
</head>
<body>
Default Style을 테스트 해 봅니다.
</body>
</html>
다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기 때문에 이를 초기화하고 우리가 정하는대로만 표현되는 것이 중요해요!
- (2) CSS 초기화하기
다양한 웹브라우저들은 저마다 조금씩은 다른default style을 제공한다.
default style 제거
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
개발계발하는 프론트엔드 개발자🍠