SCSS(또는 Sassy CSS)와 CSS는 웹 개발에서 스타일을 정의하고 관리하는 데 사용되는 두 가지 다른 언어입니다. SCSS는 CSS의 확장으로, CSS를 더 효율적으로 작성하고 관리하기 위해 개발된 언어입니다.
SCSS 장단점
- 장점: 스타일 시트를 더 가독성 있고 유지 보수하기 쉽게 만들 수 있습니다.
- 단점: 전처리기를 위한 도구 필요, 컴파일 시간 소요
SCSS, CSS 차이점
문법 차이
- CSS는 중괄호({})와 세미콜론(;)을 사용하여 스타일을 정의하고 구분합니다.
- SCSS는 중괄호와 세미콜론을 사용하는 CSS와 유사한 문법을 가지고 있지만, 중첩된 규칙 및 변수, 함수, 믹스인(Mixin)과 같은 고급 기능을 제공합니다.
컴파일러 필요성
- CSS 파일은 별도의 컴파일 과정 없이 웹 브라우저에서 직접 사용됩니다.
- SCSS 파일은 웹 브라우저에서 직접 사용할 수 없으며, SCSS 파일을 CSS로 컴파일하는 과정이 필요합니다. 이를 위해 Sass나 Less와 같은 전처리기를 사용하거나, 웹 개발 도구를 통해 자동 컴파일할 수 있습니다.
SCSS 주요 기능
주요 기능인 변수 할당, 중첩 구문, 모듈화, 믹스인, 확장 및 상속, 그리고 연산자에 대한 예제 코드입니다.
1. 변수 할당 (Variable Assignment)
- SCSS
$primary-color: #007bff;
.button {
background-color: $primary-color;
color: white;
}
- CSS (변수를 사용하지 않은 경우)
.button {
background-color: #007bff;
color: white;
}
2. 중첩 (Nesting) 구문
- SCSS
.navbar {
background-color: #333;
ul {
list-style: none;
padding: 0;
li {
display: inline-block;
margin-right: 10px;
}
}
}
- CSS (중첩 구문을 사용하지 않은 경우):
.navbar {
background-color: #333;
}
.navbar ul {
list-style: none;
padding: 0;
}
.navbar ul li {
display: inline-block;
margin-right: 10px;
}
3. 모듈화 (Modularity)
파일 분리를 통한 모듈화 예제는 SCSS 파일을 여러 개로 나누고 @import로 가져올 수 있습니다. 예를 들어, "variables.scss" 파일에 변수를 정의하고, "styles.scss" 파일에서 이 변수를 사용할 수 있습니다.
4. 믹스인 (Mixins)
믹스인은 일련의 CSS 규칙을 정의하고 나중에 여러 규칙에서 불러와서 사용할 수 있게 해줍니다.
@mixin 키워드를 사용하여 정의하며, @include 키워드를 사용하여 호출합니다.
- SCSS
@mixin button-styles {
background-color: #007bff;
color: white;
padding: 10px 20px;
}
@mixin mixin-name($parameter1: default-value, $parameter2: default-value, ...) {
// Arguments(Defult Value: 생략 가능)도 받을 수 있습니다.
}
@mixin button-style2($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button {
@include button-styles;
}
.alert-button {
@include button-style(#dc3545, red);
background-color: #dc3545;
}
- CSS (믹스인을 사용하지 않은 경우):
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
}
.alert-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
background-color: #dc3545;
}
5. 확장 & 상속 (Extend/Inheritance)
확장은 % 기호로 시작하는 "placeholder" 선택자를 사용하여 정의됩니다. 이 선택자는 직접 요소에 적용되지 않으며, 다른 선택자에서 확장할 때만 사용됩니다.
@extend를 사용하여 이 스타일을 확장하고, 추가적인 스타일을 정의할 수 있습니다.
- SCSS
%button-styles {
background-color: #007bff;
color: white;
padding: 10px 20px;
}
.button {
@extend %button-styles;
}
.alert-button {
@extend %button-styles;
background-color: #dc3545;
}
- CSS (확장과 상속을 사용하지 않은 경우):
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
}
.alert-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
}
.button, .alert-button {
background-color: #dc3545;
}
6. 연산자 (Operators)
- SCSS
$base-font-size: 16px;
$line-height: 1.5;
body {
font-size: $base-font-size;
line-height: $line-height;
}
h1 {
font-size: $base-font-size * 2; // 연산자(*)를 사용한 크기 조절
}
- CSS (연산자를 사용하지 않은 경우):
body {
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 32px; /* 연산자(*)를 사용한 크기 조절 결과 */
}
'Frontend > css' 카테고리의 다른 글
css 선택자와 표기법 (0) | 2023.06.23 |
---|---|
(css) 스크롤바 숨기기 (0) | 2021.10.03 |