Sass 문법 - 변수, 사칙연산

Notice

Recent Posts

Recent Comments

Link

« 2025/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

Tags more

Archives

Today

Total

관리 메뉴

Outputor

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);
}

'🎨 CSS 🔻 > 🦚 SASS-Note' 카테고리의 다른 글

SASS 문법 - @mixin, @use와 언더바( _ ) (0)	2022.01.14
SASS 문법 - SASS와 SCSS, Nesting, @extend (0)	2022.01.14
SASS 개발환경 세팅 (0)	2022.01.13

'🎨 CSS 🔻/🦚 SASS-Note' Related Articles

Outputor

Sass 문법 - 변수, 사칙연산 본문

Sass 문법 - 변수, 사칙연산

변수

사칙연산

'🎨 CSS 🔻 > 🦚 SASS-Note' 카테고리의 다른 글

티스토리툴바