[sass/scss] 변수 사용법

---

scss 변수 사용법

scss의 가장 큰 장점은

css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요.

 

변수만 가능해도 유지보수가 한결 수월해지죠.

---

1. 변수 선언

① 변수

- 변수 선언 방법은 [$변수 명: 변수 값] 형태로 사용해주시면 됩니다.

- 사용하실 때는 [$변수 명]을 적어주시면 된답니다.

- 여기에서는 변수에 생상 값을 넣어주었어요.

 

---

 

① 변수 사용

- 위에서 언급했든 [$변수 명]을 적어주시면 사용 가능합니다.

- 여기에서는 <a>태그의 색상에 값을 넣어줬네요. 이렇게 원하는 곳에 적어주시면 됩니다.

- 변수 명은 나중에 다른 사람이 읽어도 어떤 것인지 알 수 있게 되도록 쉽고 명료하게 적는 게 좋아요.

 

 

---

 

반응형

---

2. 변수의 범위

① 전역 변수

- 변수가 적용되는 범위가 정해져 있습니다.

- 지금처럼 전역 변수, 즉 어떤 그룹 안에도 속하지 않고 가장 바깥에 변수가 선언되었죠? 이걸 전역 변수라고 부릅니다.

- 이렇게 그룹에 속하지 않으면 모든 그룹에 변수가 적용됩니다. 예시 코드에도 nav와 footer 모두 적용되었죠.

 

 

---

 

② 지역 변수

- 지역 변수는 말 그대로 특정 지역에만 있는 변수입니다. 위의 코드처럼 nav 안에서 선언된 변수가 지역 변수입니다.

- 이렇게 되면 해당 그룹 내에서만 적용이 됩니다.

- 노란색으로 표시된 부분은 변수가 적용되지 않아 에러가 나겠죠.

 

 

---

 

어떤 것이 좋고 나쁘고는 없으니

필요한 경우에 따라 변수를 잘 활용해봅시다 ^^

 

 

 

---

 

---

 

contact

 

:: www.instagram.com/draw_wool/

:: www.pinterest.co.kr/draw_wool/_created/

:: notefolio.net/draw_wool

:: www.behance.net/draw_wool

:: grafolio.naver.com/draw_wool

 

 

 

---

 

 

[같이 보면 좋은 글]

[coding/html + css] - [sass/scss] 자동 컴파일하기

[sass/scss] 자동 컴파일하기

[coding/html + css] - [sass/scss] 다른 scss 불러오기

[sass/scss] 다른 scss 불러오기

---

그럼 이만.

총총.