12_SCSS_중첩,변수,import

이제 본격적으로 SCSS 문법들에 대해 공부해 보겠다.

 

주석(Comment)

 

//

/* */

 

두가지 스타일의 주석을 사용한다.

//는 컴파일되지 않는 주석으러 처리되며, /*는 컴파일이 되는 주석으로 처리된다.

 

단, 여러줄을 사용할때 Sass는

 

/* 나는

* 정민규

* 나는정민규 */

 

이런식으로 해야한다. SCSS는 문제없어 CSS와 호환이 더 쉽다.

 

 

데이터 종류 (Data Types)

Numbers 숫자 1, .82, 20px, 2em…

Strings 문자 bold, relative, "/images/a.png", "dotum"

Colors 색상 표현 red, blue, #FFFF00, rgba(255,0,0,.5)

Booleans 논리 true, false

Nulls 아무것도 없음 null

Lists 공백이나 ,로 구분된 값의 목록 (apple, orange, banana), apple orange

Maps Lists와 유사하나 값이 Key: Value 형태 (apple: a, orange: o, banana: b)

 

 

Sass에서 사용하는 데이터들은 몇가지 특이사항이 있다.

 

Numbers: 숫자에 단위가 있거나 없다.

Strings: 문자에 따옴표가 있거나 없다.

Nulls: 속성값으로 null이 사용되면 컴파일하지 않는다.

Lists: ()를 붙이거나 붙이지 않는다.

Maps: ()를 꼭 붙여야 한다.

 

 

중첩(Nesting)

 

.section {

width: 100%;

}

.section .list {

padding: 20px;

}

.section .list li {

float: left;

}

 

 

기존에 위와 같이 만들었던 불편한 코드를

 

.section {

  width: 100%;

  .list {

  padding: 20px;

    li {

    float: left;

    }

  }

}

 

 

위와 같이 편하게 반복을 피하게 하게끔 작성하여 복잡한 구조를 쉽게 만들 수 있다.

 

 

Ampersand(상위 선택자 참조)

 

중첩 안에서 &는 상위 선택자를 참조하여 치환한다.

즉 & == 부모선택자

 

&

 

@at-root(중첩 벗어나기)

 

한 클래스 안의 변수는 사용하고 싶은데, 선언은 속해있고 싶지 않을 때 사용한다.

 

@at-root

 

중첩된 속성

 

font- , margin-등 개별속성들을 가지는 속성들에 대해서 사용할 수 있는 문법이다.

 

중첩

변수(Variables)

반복적으로 사용되는 값들을 변수로 지정할 수있다.

 

변수는 $으로 선언한다.

변수 예시

변수 유효범위 (Variable Scope)

변수는 선언된 블록{} 안에서만 범위를 가지게 된다.

 

보통 언어들에서 지역변수로 선언되면 함수 호출후에 사라지듯이 다른 곳에서는 못쓴다는 의미로 생각하면 될 것 같다.

 

변수 재 할당(Variable Reassignment)

 

변수에 변수를 할당할 수 있다.

!global ( 전역 설정 )

변수의 유효범위를 전역변수로 바꿀 수 있다.

!global

!default (초기값 설정)

할당되지 않은 변수의 초깃값을 설정

 

변수와 값을 설정은 하지만, 기존 변수가 있을경우에는 사용하지 않겠다~ 라는 의미

예를들어 Bootstrap이나 외부 라이브러리를 연결할 때 변수가 같으면 덮어쓰기등의 현상을 방지해준다.

!default

문자 보간

#{}

 

 

$family: unquote("Droid+Sans");

@import url("http://fonts.googleapis.com/css?family=#{$family}");

 

위 코드처럼 어디던지 변수값을 넣을 수 있게 하는 문법이다.

사용한 unquote는 따옴표를 없애는 함수이다.

 

 

 

@import(가져오기)

 

외부에서 가져온 Sass파일은 모두 단일 CSS출력파일로 병합되게 된다.

 

기존 css에서는 @import url(“경로”) 이런 방식으로 사용했지만

 

@import “경로” 와 같이 간단한 방식으로 기능동작이 가능하다.

 

 

 

@import "hello.css";

@import "http://hello.com/hello";

@import url(hello);

@import "hello" screen;

 

또한 위 경우와같이 선언된 경우, Sass파일이 아닌 CSS @import 규칙으로 컴파일된다.

 

그 규칙은 아래와 같다.

파일 확장자가 .css일 때

파일 이름이 http://로 시작하는 경우

url()이 붙었을 경우

미디어쿼리가 있는 경우

 

즉, 기존 CSS @import와 다른점은 단일 CSS 출력 파일로 병합된다는게 차이점이다.

 

@import “header”, “footer” 이런식으로 여러 파일을 한번에 불러오는것도 가능하다.

 

 

파일 분할(Partials)

프로젝트 규모가 커지면 파일들을 header , side-menu처럼 유지보수가 쉽도록 관리하게 된다. 이경우들을 다 .css로 나눠 저장된다면 관리나 성능차원에서 문제가 될 수 있다.

 

파일앞에 _를 붙여서 (ex. _header.scss) @import로 가져오면 .css로 컴파일하지 않는다. 즉, main,header등등으로 나눈다면 main만 css로 컴파일되게 된다.

 

하지만 Webpack,Parcel,Gulp등등은 bundle에 지정되어 컴파일되는 파일이 지정되기에, 사용하면 좋고 조금더 체계적이다.. 라고 생각하면 될 것 같다.