Sass 문법 - 변수, 사칙연산

🎨 CSS 🔻/🦚 SASS-Note

Sass 문법 - 변수, 사칙연산

output7 2022. 1. 13. 14:58

변수

1. 값을 저장해놓고 쓸 수 있음

2. $기호를 사용한 다음 이름을 적고 값을 넣어주면 됨

3. root를 사용하지 않고 변수를 저장할 수 있어서 편리함

사칙연산

1. calc를 사용하지 않고 바로 계산이 됨

2. px 단위는 px 단위끼리, % 단위는 % 단위끼리 맞춰져야 함

3. 곱셈 나눗셈은 보통 뒤에 단위를 쓰지 않음 (괄호 안에 작성해야 잘먹음)

HTML

.scss 파일을 만든 다음 Watch Sass 버튼을 누르면 같은 이름을 가진 .css파일이 만들어 지는데 이걸 연결해줌

<!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>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <h3>Sass</h3>
    <p>Sass Sass Sass</p>
  </body>
</html>

SCSS

$bg-color: #f06595;
$font-color: #fff;
$font-size: 50px;

body {
  width: 100%;
  background-color: $bg-color;
  color: $font-color;
  text-align: center;
}
h3 {
  font-size: $font-size;
  margin-top: 50px;
  margin-bottom: 0;
}
p {
  margin: 0;
  font-size: ($font-size / 3);
}