[4강] 효율적인 CSS작업을 위한 SASS 강의

주석 처리

SASS 파일 내부에 주석을 처리하는 방법은 두 종류가 있습니다. 일반적으로 CSS와 동일하게

이런 방식으로 처리하는 방법과

이런 방식으로 처리하는 방법이 있습니다.

결론적으로 말하면 첫번째 방식은 SASS 컴파일의 결과물인 CSS 파일에도 그대로 반응되는 반면, 두번째 방법은 CSS 파일에 전혀 나타나질 않습니다. 

그렇기 때문에 첫번째 방식은 CSS 파일에 저작권 또는 CSS 파일 버전 등을 표시할 때 사용하고, 두번째 방식은 SASS의 속성을 지정하여 유지보수 할 때 편합니다. 왜냐하면 CSS 파일 내부에 텍스트가 많으면 많을수록 브라우저가 사이트를 렌더링 하는 속도가 더뎌지게 될 것이고, 또한 CSS 속성에 대해서 굳이 개발자 이외의 사용자들에게 보여 줄 필요가 없다고 보기 때문입니다. 

저도 SASS 파일에는 별도의 속성에 대한 주석은 두번째 방식으로 처리하는데요. 이렇게 하면 유지보수할 때 해당 속성이 무슨 내용인지 바로 파악이 되고, 최종 결과물에는 나타나지 않기 때문입니다.

주의해야될 점은 SASS에서 한글로 주석을 달면 컴파일시 에러가 발생합니다!!!!

변수 : $ 기호를 사용

프로그래밍 언어에서 가장 중요한 부분은 바로 변수 처리입니다. SASS에서는 변수에 $기호를 사용한다고 전에 설명을 드렸는데요.

SASS에서는 전역변수와 지역변수가 존재합니다. 전역변수는 선택자 외부에 별도로 선언을 하고나, 지역변수 부분에 !global이라고 지정하게 되면 전역변수가 됩니다.

위 코드가 각각 어떻게 적용되는지 한번 생각해보세요.

이 부분은 한번 직접 코드를 타이핑한 후 결과를 확인해보세요.

색상연산(Color Operations)

SASS에서는 색상값을 사칙 연산을 통해 조절할 수 있습니다. 특히 색상 코드는 16진수로 구성되어 있는데, 이런 16진수끼리는 사칙 연산에 의해서 값을 조절할 수 있습니다.

만약에 #009ac8라는 색상 코드와 #112233이라는 색상 코드를 더하려면 구성되어 있는 숫자를 두개의 부분으로 나우어 합치면 됩니다.

009ac8의 앞부분 두개 숫자 00과 112233의 앞부분 숫자 두개 11을 합치면 11이 되는 식으로 합산됩니다.

곱셈또한 마찬가지로 똑같이 연산처리가 됩니다.

이 코드의 결과는 아래와 같습니다.

여기서 중요한 점은 알파값은 꼭 같아야됩니다.

알파값이 다른 경우 SASS 컴파일러는 에러 메시지를 보내고 더이상 연산이 되질 않습니다. 따라서 rgba 또는 hsla로 구성된 색상의 경우 알파값은 동일한 값을 넣어줘야 합니다.

SASS에서 알파값은 opacify와 transparentize라는 속성을 부여해 줌으로써 조절이 가능합니다. opacify는 알파값을 더해 주고 transparentize는 알파값을 빼주는 역할을 합니다.

위의 값은 아래와 같습니다.

transparentize는 똑같이 사용하면 빼지는 것을 볼 수 있습니다.

한마디로 opacify가 적용된 부분은 더해지고, transparentize가 적용된 부분은 알파값이 빼진 것을 알 수 있습니다.

삽입(Interpolation)

SASS에서 변수를 선언할 때 변수 부분에 특정 값을 지정할 수 있지만, 변수명 자체를 불러오려는 경우 삽입을 사용해서 처리합니다.

삽입은 #{변수명} 으로 사용합니다.

이 소스를 컴파일하면 아래와 같은 코드를 확인할 수 있습니다.

삽입을 사용하면 CSS의 속성값 뿐만 아니라 다양하게 처리할 수 있기 때문에 유용하게 사용할 수 있다고 합니다. (저도 좀 사용을 해봐야 알 것 같네요ㅋㅋ)

변수 기본값 설정(Variable Defaults: !default)

변수에 디폴트 값을 지정할 경우에는 변수 앞에 !default라고 적어주면 됩니다.

예를 들어, 동일한 변수 이름이 존재할 때, 마지막에 선언된 값이 최종 결과값이 됩니다. 하지만 !default로 선언하게 되면 그 값은 기본값 즉 첫번째 값이 되어, 해당 변수에 다른 값이 지정되면, 최종 결과값은 !default로 지정된 값이 아닌, 마지막에 선언된 값이 결과값으로 처리됩니다.

글만 봐서는 감이 안잡히시죠? 예제로 쉽게 설명 드릴게요.

쉽게 말해서 같은 변수면 가장 마지막으로 선언된 변수가 최종 변수로 덮어 씌워지는데, !default를 사용해서 그 기본값을 변경한 것입니다. 그래서 첫번 째 content는 "first content"가 나오는 것이죠.

Cascading의 개념을 한번 더 생각해보고 이해하시면 조금 이해하기 쉬울겁니다.

@ 규칙과 지시어(@ - Rules and Directives)

SASS에서는 CSS3에서 사용되는 모든 @ 규칙을 사용할 수 있습니다. 대표적인 @ 규칙은 @import입니다. CSS의 경우에도 CSS 파일들을 별도의 모듈로 만들어서 @import "해당파일명.css" 라고 해서 파일을 불러올 수 있습니다. 해당 파일명에는 일반 파일명도 있을 수 있고, 경로를 설정해서 불러 올 수 있으며, URL을 통해서 불러 올 수 있습니다.

@import (불러오기)

일반적으로 CSS 파일에서는 @import를 이용해서 파일을 불러올 때는 다음과 같이 확장자까지 적어줘야 합니다.

하지만 SASS 파일에서는 확장자가 .scss 또는 .sass인 경우 확장자를 명시하지 않더라도 바로 해당 파일을 불러옵니다.

SASS에서 별도의 외부 파일을 지정해 놓을 경우 주의할 점이 있는데, 보통 SASS파일을 컴파일할 경우 파일 이름 기반으로 해당 디렉토리를 컴파일하게 됩니다. 그렇기 때문에 하나의 SASS 파일 내부에 포함된 별도 파일의 경우에도 컴파일이 될 수 있는데, 이런 일을 방지하기 위해서 별도의 외부 파일인 경우 파일 이름 앞에 _파일명.scss 라고 언더바(_)를 적용해 줘야 합니다. 만약 언더바를 적용하지 않게 되면 별도의 CSS 파일로 컴파일되어 버립니다. 따라서 하나의 파일, 여기서는 style.scss 파일 내부에 다음과 같이 두 개의 파일을 불러오는 경우에는

해당 파일 이름은 _color.scss 와 _font.scss라고 지정해 줘야 해당 파일들은 별도의 파일로 컴파일 하지 않습니다. 아래와 같이 하나로 묶어서 불러올 수도 있습니다.

@import인 경우 파일 전체를 불러오는 방법도 있지만, 중첩을 이용해서 해당 선택자 부분에만 해당 속성을 불러오는 경우에도 유용하게 사용할 수 있습니다.

결과값은 아래와 같습니다.

@import의 경우에는 중첩 문법 구문에만 가능하며, 앞으로 학습할 @mixin이나 if 구문에서는 사용할 수 없습니다.

사실 @import의 경우 외부 파일을 불러 오는 용도로 가장 많이 사용하기 때문에 "외부 파일을 불러 오는 용도로 사용한다."로 이해하는 것이 좋습니다.

여기서 잠깐 끊고, 다음 강의에서는 이어서 @media와 @extend를 활용해서 하나의 샘플 페이지를 제작해보도록 하겠습니다 !