28. [SCSS] SCSS 핵심 문법

이번 포스팅에서는 SCSS 핵심 문법에 대해서 알아보겠습니다.

1. @import

: [CSS Nomalize]에 대해서 기억하시나요?
CSS 최상단에 기본적으로 적용시키는 CSS 코드를 Nomalize라고 부르는데 이를 CSS 파일을 쓸 때 마다 복사 붙여넣기 하면 가독성도 떨어지고 시간도 많이 소요됩니다.

이러한 CSS Nomalize 내용을 담기 위해서 동일한 폴더 내에 _reset.scss 파일을 생성하였습니다.
▶ test.scss에서 코딩한 내용은 새로고침 할 때 마다, 자동으로 test.css 에 반영됩니다.
★ 참고 : _는 컴파일 금지명령입니다.

_reset.scss

body { margin : 0px; } div { box-sizing: border-box; }

이를 test.scss 파일에 @import 하면 됩니다.

test.scss

@import '_reset.scss';

최 상단에 작성하면 test.css에는 자동으로 _reset.css에 담긴 내용들이 반영 되어 있는 것을 확인 할 수 있습니다.

---

2. $변수명 : 값 ;

자주 사용하는 값들은 변수로 사용 가능
★ 지금부터 문법이 꽤 많이 나옵니다. 변수는 반드시 $로 선언하고 호출하는 것을 기억합시다.

$변수명 : 값

$나의최애색상 : skyblue; $나의서브색상 : greenyellow; .text{ color : $나의서브색상; } .box{ background-color: $나의최애색상; }

이렇게 하면 나중에 수정을 할 때 용이합니다.

---

3. Nesting

CSS Selector를 좀 더 유연하게 짤 수 있게 해주는 문법입니다. 직관적이기 때문에 코드를 보면 이해할 수 있을 겁니다.

SCSS

.main-background{ .div{ background-color: white; } h3 { font-size : 30px; } }

CSS

.my-background .div { background-color: #eee; } .my-background h3 { text-align : center; }

---

4. %템플릿명 {}

나중에 재사용을 위한 템플릿을 제작한다고 이해하면 됩니다.

1. 기본 스타일들은 %템플릿명 으로 선언 (재사용을 위해)
2. 해당 템플릿을 사용하기 위해서는 @extend %템플릿명 + 나의 추가할 코드


SCSS

// 버튼의 기본 템플릿 제작 %btn { padding : 20px; font-size : 20px; background-color: #eee; } // 기본 템플릿에 아쿠아색 추가 .btn-aqua{ @extend %btn; background-color: aqua; }

CSS에서는 다음과 같이 생성됨을 확인 할 수 있습니다.

CSS

.btn-green { padding: 20px; font-size: 20px; background-color: #eee; } .btn-aqua { background-color: aqua; }

---

5. @mixin

CSS에서 함수의 기능을 사용 할 수 있게끔 해주는 문법입니다.

암기 TIP! @mixinclude

함수의 선언 : @mixin 함수명(파라미터){

}

함수의 호출 : @include 함수명(인자)


SCSS

@mixin 나만의글꼴조정($a,$b){ font-size : $a; letter-spacing: $b; } h1{ @include 나만의글꼴조정(10px, -5px) } h2{ @include 나만의글꼴조정(20px, -5px) } h3{ @include 나만의글꼴조정(30px, -5px) }

CSS

h1 { font-size: 10px; letter-spacing: -5px; } h2 { font-size: 20px; letter-spacing: -5px; } h3 { font-size: 30px; letter-spacing: -5px; }

---

헷갈리니까 마지막 정리하겠습니다.
1. @ - 변수
2. %템플릿명 - 템플릿선언 , @extend %템플릿명
3. @mixin 함수명(파라미터) - 함수 선언 , @include 함수명(인자) - 함수 호출