SCSS(Sass) - (1) - 개요 및 기본 사용법

SCSS(Sass)는 CSS 전처리 도구입니다.

Sass는 css와 호환이 안 될 경우가 있어, SCSS를 개발했습니다.

하나의 도구에 두 가지 문법으로 보면 됩니다.

 

Sass 홈페이지

 

스타벅스 클론 예제에서 css 파일보시면

어떤 요소를 찾을려는게 너무 길게 써여졌습니다.

Sass를 통해 좀 더 손쉽게 요소를 찾을 수 있고 처리할 수 있습니다.

 

Sass는 표준 css문법보다 훨씬 쉽고 강력한 기능들을 가지고 있습니다.

실제로 브라우저에서 동작한 것은 표준css뿐입니다.

Sass에서 css로 컴파일(변환)해야 합니다.

 

SCSS 파일생성

css파일과 유사하게 .scss로 끝나는 파일을 만들고 html파일에 link로 연결하면 됩니다.

 

SCSS 주석

/* */ 과 // 둘 다 가능합니다.

/* */ 주석은 CSS로 컴파일 시 그대로 나타나지만,

// 주석은 컴파일 시 나타나지 않습니다.

 

중첩 With SassMeister

위와 같은 예제를 통해 중첩을 살펴보겠습니다.

기존에 css파일에서 왼쪽처럼 순서대로 나열한 후 속성을 작성했지만

SCSS에서는 좀 더 편리하게 덩어리 형태로 작성할 수 있습니다.

 

복잡하게 일일히 다 나열할 필요없이

중복된 태그들을 묶어서 덩어리로 작성하는 방식이

중첩기능입니다.

 

자식 요소를 강조하고 싶으면 > 을 사용하면 됩니다.

 

상위(부모) 선택자 참조

& 를 사용해서 일치선택자를 표현할 수 있습니다.

또한 오른쪽처럼 :last-child에서도 사용할 수 있습니다.

상위선택자가 &의 위치를 치환해서 들어간다고 보면 더 쉽게 이해할 것 같습니다.

& 를 사용해 상위 선택자를 참조해서 오른쪽 결과가 나왔습니다.

 

중첩된 속성

font관련된 속성들을 모두 덩어리를 만들었습니다.

주의해야할 점은 속성 뒤에 :를 먼저 붙이고 괄호를 열어주며,

괄호가 끝나면 ;를 붙여야 합니다.

 

변수

$변수명: 값; 으로 변수를 선언할 수 있습니다.

여기서는 $가 JS의 let으로 보시면 됩니다.

유효범위도 있으며 재할당도 됩니다.

 

산술 연산

SCSS에서 산술 연산도 가능합니다.

나누기 빼고 기타 문법은 JS와 같습니다.

나누기 / 기호는 css에서 단축속성입니다.

 

font-size: 10px; line-height: 10px; font-family: serif; 를 

font: 10px / 10px serif; 로 단축할 수 있습니다.

/ 가 단축속성에서 사용됨으로 나누기는 소괄호를 묶어서 해야 됩니다.

혹은 변수를 넣어면 좋습니다.

또는 calc() 메소드를 통해 계산해도 좋습니다.

 

재활용(Mixins)

재활용하려는 구조 앞에 @mixin 로 표시하고,

사용하는 곳에 @include 를 붙여서 사용하면 됩니다.

 

함수처럼도 사용할 수 있습니다.

위와 같이 이름 뒤에 소괄호 넣고 변수를 작성합니다.

사용 시, 소괄호 안에 값을 넣어주면 됩니다.

 

변수에 기본 값을 설정할 수 있습니다.

사용 시 해당 값 대신 다른 값을 사용하려면 괄호안에 표시를 해둬야지만,

값을 그대로 사용하려면 구조 이름만 적으면 됩니다.

 

변수도 여러개 사용할 수 있습니다.

순서대로 수정하면 됩니다.