✓ 2023.02.24 TIL
1. 기본 소개 및 형식
2. SASS 변수
3. SASS 내장 함수
4. SASS @extend : 스타일 확장
5. 임시 class name = %
6. mixin
7. SASS 연산자 / calc()
8. SASS @use “”; vs @import url();
1️⃣ 기본 소개 및 형식
: SASS는 Syntactically Awesome Style Sheets의 약자로, CSS의 확장 언어라고 생각하면 된다.
재사용이나, 유지 보수에 있어서 CSS의 단점을 보완하기 위해 등장한 확장 언어이기도 하고 기존 CSS를 전처리 하기 위해 등장하기도 했다.
💡 전처리란?
전처리는 말 그대로 전에 미리 처리를 해준다는 의미로, CSS가 만들어지기 전에 필요한 일들을 미리 처리해 주는 것이다. 변수나, 반복문, 조건문 등 기존 CSS에서 사용하지 못했던 기능들을 사용해 줄 수 있도록 다양한 문법을 제공해 준다.
하지만, 이러한 SASS(SCSS)는 브라우저에서 읽을 수 있는 언어가 아니기 때문에 브라우저가 읽을 수 있는 CSS 파일로 컴파일을 해야 한다.
→ SASS(SCSS) 파일을 CSS 파일로 변환해 주는 과정이 필요!
SASS와 SCSS의 차이점은?
: 사실 SASS와 SCSS에는 큰 차이점이 없기 때문에 같은 의미라고 봐도 무관하다.
굳이 차이점으로 말할 것은 ‘문법’이다.
SASS는 들여쓰기 문법을 사용한다면 SCSS는 기존 CSS과 동일하게 {} 문법을 사용한다는 점이다.
어떤 문법을 사용하느냐에 따라 다르기 때문에 개인의 취향에 따라 원하는 방식으로 사용하면 된다.
2️⃣ SASS 변수
: SASS는 기존 CSS에서 사용할 수 없었던 변수를 사용할 수 있다.
기본 변수 형식 : $변수명 : 스타일 지정 내용;
ex. $fontColor: lightgry;
→ fontColor라는 변수는 color로 lightgray를 가지고 있다.
텍스트변수 사용 방법
body {
.p {
color: $fontColor;
}
}
-> 변수를 사용하기 위해서는 $변수명을 불러와서 사용할 수 있다.→ CSS에서는 계속 작성하기 어렵거나 복잡한 스타일 속성들이 있는데, 이를 변수로 미리 지정을 한 후에 변수명을 호출하는 방식으로 스타일을 지정할 수 있다.
SASS 변수는 복잡한 스타일 속성에 이름을 붙여서 쉽게 사용할 수 있도록 하는 역할이라고 생각하기!
3️⃣ SASS 내장 함수
: SASS에는 기존 CSS가 제공하지 않는 내장 함수들이 있는데 그중에서 자주 사용하는 2가지만 정리를 해보려고 한다.
(1) darken( )
: darken( )는 색을 원하는 정도로 어둡게 만들 수 있는 내장 함수다.
$color: blue;
body {
div {
background-color: darken($color, 50%);
}
}
-> 기존 blue색상에서 50% 정도 더 어둡게 한다는 의미!(2) lighten( )
: lighten( )는 darken( )의 반대 개념으로, 색을 원하는 정도로 밝게 만들 수 있는 내장 함수다.
$color: blue;
body {
div {
background-color: lighten($color, 20%);
}
}
-> 기존 blue색상에서 20% 정도 더 발게 한다는 의미!4️⃣ SASS @extend
: @extend는 CSS 스타일을 확장해서 사용한다는 의미다.
만약, 기본 뼈대로 들어가는 스타일의 속성의 경우 요소들마다 똑같은 스타일을 계속 주는 것은 비효율적이기 때문에 하나의 스타일로 묶어서 계속 재사용할 수 있도록 만드는 것이 효율적인 방법이다.
이때 사용하는 확장 기능이 바로 @extend다.
.pStyle {
color: lightgray;
font-size: 25px;
font-weight: bold;
}
.p-1 {
@extend .pStyle;
color: red;
}
-> class name이 p-1인 요소는 .pStyle 스타일 속성을 따르면서도, color의 경우 개별 설정을 해줬다!5️⃣ 임시 class name
: 위에 설명한 @extned를 불러올 때 class name이 아닌, 임시 class name으로 불러올 수 있다.
위의 class name의 경우에는 html 파일에서 지정한 name을 그대로 불러오는 것이기 때문에 서로의 name의 각자의 파일에 영향을 주게 된다.
하지만, SASS 파일에서 독립적으로 name을 사용할 수 있으며 그 name의 경우에는 SASS 파일에서만 의미를 가지기 때문에 단순히, 속성을 재사용할 때 많이 사용한다.
즉, 임시 class name은 SASS에서 extend를 사용하기 위한 class name이라고 생각하면 된다.
기본 형식 : %이름
%pStyle {
color: lightgray;
font-size: 25px;
font-weight: bold;
}
p {
@extend %pStyle;
color: red;
}
-> p 태그는 @extend로 %pStyle을 불러와 기본 스타일을 적용해줬다!6️⃣ mixin
: SASS mixin은 @extend와 같이 스타일 속성을 재사용 혹은 유지 보수를 위한 기능 중 하나인데, @extend와의 큰 차이점은 인자를 가진다는 것이다.
@extned의 경우는 뼈대로 지정한 스타일에서 특정 값을 유동적으로 변경할 수가 없어, 요소 하나하나에 다시 다른 스타일 속성을 지정해야만 했다.
이러한 번거로움을 해결하기 위해서 사용하는 것이 mixin이다.
기본 형식 : @mixin 이름(인자1, 인자2 …) { 스타일 속성 }
@mixin pStyle ($fontColor : black, $borderColor : gray) {
font-size: 25px;
font-weight: bold;
color: $fontColor;
border: 1px solid $borderColor;
}
p {
@include pStyle($fontColor : red);
}
-> p 태그는 @inclide로 pStyle을 불러와 폰트 컬러는 red로 다시 지정하고 테두리 색의 경우는
디폴트 값인 gray를 그대로 사용했다.→ mixin은 특정 스타일 속성 값을 인자를 통해서 유동적으로 변동할 수 있다는 점이 큰 장점이다.
7️⃣ SASS 연산자 / calc( )
: SASS는 기존 CSS와는 다르게 calc( )을 사용하지 않고도 아주 기본적인 연산자인 +, -, * , / 연산자를 제공한다.
다만, 나누기( / )의 경우에는 나누기 연산자를 사용한다는 특별한 표시가 필요하다.
- 앞에 다른 연산자를 두어 해당 스타일이 연산을 위한 것임을 표시하는 방식
- ( )로 감싸서 사용하는 방식
- user의 math 사용하는 방식
8️⃣ SASS @use “”; vs @import url();
: SASS에서는 다른 CSS 파일을 끌어다 사용할 때 @use를 사용한다.
@use "피일 경로"; 를 통해서 파일을 끌어다 사용할 수 있으며 기존 CSS에서도 제공하는 방식인 @import url(); 로 사용할 수 있지만 @use가 보다 최신 기능이기 때문에 use를 사용하는 것이 좋다.
✅ SASS(SCSS) 참고
Sass
아무튼 Sass 시리즈
👉🏻 느낀 점 / 다짐
아직까지 SASS 기능들이 어색하게 느껴진다.
하지만, 실무에서는 기존 CSS가 아닌 SASS나 SCSS를 사용하기 때문에 필수적으로 다뤄야 하는 확장 언어라고 생각해서 CSS가 아닌 SCSS를 사용해 보려고 한다.
물론, 처음이라 기능들을 제대로 사용할 수 있을지는 모르겠지만, 특정 기능이 반드시 필요한 상황이 온다면 여러 문서들을 보면서 활용을 해보려고 한다.
