css 코드가 한 파일로 제작이 된다면 가독성 저하, 어디서부터 어디까지가 어떤 스타일을 담당하고 있는지 파악하기 어렵고 단순 수정에도 전체 코드를 일일히 확인해야 한다.
프로젝트를 진행하면 css를 다루게 되는 경험을 하게 될 것이다. 프로젝트가 커지면 커질수록 CSS의 규모는 커질 것이고 규모가 커지면 커질수록 커질수록 코드가 복잡해질 것이다. 이렇게 코드가 복잡해지면 css로 작업하는 속도가 느려질 것이다.
이러한 단점을 포함하여 css를 보완하기 위해 Sass를 사용한다.
Sass(Scss)는 무엇일까?
Sass는 컴파일 과정을 통해 CSS 파일을 생성해주는 CSS 확장 언어이자 전처리기(proprocessor)이다.
CSS에는 존재하지 않는 다양한 기능들이 있는데 이 기능들은 코드 작성 시간을 줄여주고 유지보수에 큰 도움을 준다.
전처리기 : 입력데이터를 처이하여 다른 프로그램에 대한 입력으로서 사용되는 출력물을 만들어내는 프로그램이다.
Sass와 Scss의 차이점은 작성 방법이다. Sass는 들여쓰기 + 줄 바꿈 형식이고 Scss는 중괄호+세미콜론 형식이다.
하지만실제로 Scss가 Sass보다 호환성이 좋다 Scss 사용하는 사람이 더 많다고 한다.
Sass(Scss) 문법
아래 예제 코드들은 Scss 코드 방식으로 사용하였다.
Nesting : 중첩
선언자(selector)나 속성 등 중첩을 시킬 때 상위 요소를 참조하는 것이 가능하다.
/* 일반적인 css 작성법 */
p {
font-size: 20px;
color: red;
}
p:hover {
color: blue;
font-weight: bold;
}
/* Sass 작성법 */
p {
font-size: 20px;
color: red;
&:hover {
color: blue;
font-weight: bold;
}
}이런식으로 중첩이 가능하다. &은 상위 요소 즉, 부모 요소를 뜻한다.
변수 선언(Variables)
변수를 선언하여 사용 가능하다. 이렇게 변수를 선언하여 사용하면 수정을 해야하는 상황이 생기면 변수 선언 부만 수정하면 되기 떄문에 유지보수성이 뛰어난다. 변수 선언은 $를 사용하여 선언한다.
$color : #fff;
$fontWeight : bold;
p {
color : $color;
font-weight : $fontWeight;
}참조 (Import)
다른 파일을 참조하여 그 파일의 변수 등 사용할 수 있다. import할때는 @를 반드시 사용해야한다.
@import "/sample.scss"
.p1Tag {
font-size:20px;
color : blue;
font-weight: $fontWeight;
background-color : $bgColor;
}Mixin (재활용) & include (포함)
재사용 할 css 선언 그룹을 정의하는 기능이다. 선언할 떄는 @mixin을 사용하며, 이를 사용할 떄는 @include를 사용한다.
mixin 사용법 1.
@mixin으로 선언하고 @include를 선택자 안에 사용하여 적용하기
@mixin mixinTest{
color: red;
font-size: 20px;
}
p {
@include mixinTest
}mixin 사용법 2.
mixin에 선택자 정의를 하여 @include를 사용하여 그대로 정의한다.
@mixin mixinTest{
p {
color: red;
font-size: 20px;
}
}
@include mixinTest;mixin 사용법 3.
인자를 사용한다.
@mixin mixinTest($fontSize, $color){
font-size: $fontSize;
color: $color;
}
p{
@include mixinTest(20px, red);
}mixin 사용법 4.
인자를 사용하지만 특정 인자에는 기본값을 설정한다. 인자에 대한 값을 쓰지 않으면 그 기본값을 사용한다.
기본값 설정을 하지 않은 인자는 꼭 인자값을 입력해야한다.
@mixin mixinTest($fontSize:20px, $color){
font-size: $fontSize
color: $color
}
p{
@include mixinTest(blue);
}
함수 (funtion)
function을 사용하면 스타일시트 전체에서 재사용할 수 있는 값에 대한 복잡한 작업을 정의 할 수 있다. 일반적인 공식과 동작을 읽기 쉬운 방식으로 쉽게 추상화할 수 있다. @functuin으로 선언 한다.
@fuction half-opacity($color, $opacity){
$color: rgba($color, $opacity);
@return $color;
}
h1{
color : half-opacity(red, 0.3);
}