SASS 사스란?🤔
CSS를 보다 더 간결하고 빠르게 사용하기 위한 구문
- CSS Preprocessor (전처리언어) == CSS 전처리기라고 부름
Sass와 SCSS의 차이점?
Sass (Syntactically Awesome Stylesheets)와 SCSS (Sassy CSS)는 둘 다 CSS의 확장 언어로, 스타일 시트를 더 효과적으로 관리하고 작성할 수 있게 도와주는 도구지만, 몇 가지 차이가 있다.
① 문법
Sass : 들여쓰기를 사용하여 블록을 구분, 간단하고 간결한 문법을 가지고 있다.
body
font:
family: Helvetica, sans-serif
size: 16px
SCSS : 기존 CSS와 유사한 중괄호({})와 세미콜론(;)을 사용하여 블록을 구분.
body {
font: {
family: Helvetica, sans-serif;
size: 16px;
}
}
② 호환성
Sass: 최신 문법과 기능을 빠르게 채택하지만, 일부 개발자는 초기 버전의 Sass를 사용하는 프로젝트가 있다.
SCSS: CSS와 거의 유사한 문법을 가지고 있어 CSS 코드를 쉽게 가져올 수 있다. 이는 기존 CSS 코드를 쉽게 Sass 또는 SCSS로 마이그레이션하는 데 도움이 된다.
③ 확장성
Sass: 간결한 문법으로 작성되어 있지만, 일부 개발자들은 중괄호와 세미콜론이 없는 문법을 선호한다.
SCSS: CSS와 유사한 문법을 가지고 있어 CSS를 더 효과적으로 재사용할 수 있다. 이는 기존 CSS 코드를 더 쉽게 포팅하고 적용하는 데 도움이 된다.
④ 파일 확장자
Sass: .sass 확장자를 사용한다.
SCSS: .scss 확장자를 사용한다.
일반적으로는 프로젝트에 따라 개발자가 선호하는 문법을 선택할 수 있다. SCSS가 CSS와 더 유사하므로 기존 CSS 코드를 빠르게 통합하고 사용하기에 용이하다. Sass의 간결한 문법은 들여쓰기에 의해 블록이 확실히 구분되기 때문에 몇몇 개발자에게는 더 가독성이 좋다고 느껴질 수 있다.
👇아래 설명은 모두 SCSS 사용👇
설치🖱️
— vscode 확장기능 (익스텐션) : Live Sass Compiler
style.scss 파일을 만들고 작업한 뒤 하단 watch sass 클릭하면 컴파일되며 자동 css파일을 생성해준다.
— 명령행 인터페이스 : 터미널에 직접 명령어를 전달 (후에 따로 정리)
해당 작업을 하기위해서는 우선 node.js를 설치 해야한다.
sass명령행 인터페이스가 node.js환경을 기초로 설치되어야 하기 때문.
(node.js - 명령행 인터페이스로 자바스크립트를 실행할 수 있는 자바스크립트 실행 환경)
주석과 중첩
1) 주석
CSS주석과 같은 형태로 쓰인다.
- 주석 여러줄 일 때 : /* */ (컴파일 후 최종 파일에 반영되는 주석)
- 주석 한 줄 일 때 : // (컴파일 후 최종 파일에 반영되지 않는 주석)
2) 중첩 규칙 (nesting)
선택자를 서로 다른 선언문에서 반복해서 쓰는 불편함을 해결
(컴파일 후 결과 파일에는 선택자가 각각 따로 생성되어 반영됨)
*지나친 중첩은 가독성을 떨어뜨리기 때문에 한 두 단계 정도만 중첩하는게 좋다.
// ☑️Sass
div{
width: 100px;
height: 100px;
p{
color: red;
span{
color: blue;
}
}
}
// ✅컴파일 후 CSS
div{
width: 100px;
height: 100px;
}
div p{
color: red;
}
div p span{
color: blue;
}단축 속성 중첩과 상위 선택자 참조
1) 단축 속성
여러가지 CSS 속성 값을 함께 지정할 수 있는 속성 (여러 공통 속성을 묶기 위해 정의한다)
- 중첩을 이용해 단축 속성의 하위 속성을 그룹화 할 수 있다.
(ex. font-family, font-size, font-style, font-weight → 대표적인 단축 속성 font.)
/*
단축 속성 중첩
'네임스페이스 속성 중첩' 이라고도 한다.
/*
p{
font: {
font-family: sans-serif;
size: 1em;
style: normal;
weight: 900;
};
}2) 상위 선택자 참조 (&)
기호 &를 사용해 상위 선택자를 참조할 수 있다.
- 의사클래스(가상클래스)를 선택하고자 할 때 유용하며, 서로 다른 클래스에 서로 다른 스타일을 지정할 때도 사용할 수 있다.
button{
&:active{
background-color: red;
}
}
/*
button:active {background-color: red;}
*/변수
기호 $를 사용하여 스타일시트에서 재사용할 정보를 저장한다.
재사용하고자 하는 모든 CSS값은 변수에 저장할 수 있다.
$main-color: red;
div{
color: $main-color;
background-color: $main-color;
box-shadow: 10px 10px 10px $main-color;
text-shadow: 10px 10px 10px $main-color;
border: 1px solid $main-color;
}*컴파일 후 최종 파일에는 표시되지 않는다.
💡 사용시 주의할 점
- 변수 사용에 개수 제한은 없지만, 가독성을 고려해 남용하지 않는 것이 좋다.
- 변수명은 자유롭게 지정 가능하지만, 가능한 직관적인 이름을 사용하는게 좋다.
- 변수명에는 영문자와 숫자, ‘-’, ‘_’를 포함할 수 있다.
믹스인
서로 다른 선언문끼리 비슷하거나 동일할 때, 스타일이 겹치는 부분을 그룹으로 정의하여 재사용.
/*
믹스인을 만들 때는 @mixin 지시자를 사용한다.
지시자 뒤에는 만들고자 하는 믹스인의 이름을 원하는대로 써준다.
*/
@mixin my-font{
font-family: sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 600;
color: orange;
}
/*
믹스인이 정의되고 난 후, 정의된 스타일을 넣고자 하는 모든 곳에
@include 지시자를 사용하여 해당 믹스인을 호출할 수 있다.
*/
h1{
@include my-font;
}*컴파일 후 최종 파일에는 믹스인이 표시되지 않고 같은 스타일이 반복해서 적용되어 있다.
믹스인 인자
믹스인 정의 시 괄호에 변수를 추가하면 인자가 정의된다. (개수 제한은 없다)
[호출 시 인자 전달 : 믹스인 이름 옆에 괄호와 함께 속성값을 추가]
@mixin my-font($font-color){
font-family: sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 600;
color: $font-color;
}
h1{
@include my-font(red);
}
p{
@include my-font(blue);
}
/* 인자를 더 넣고싶다면 변수 옆에 쉼표를 쓰고 추가한다 */
------------------------------------------------------------------------
//믹스인 인자 기본값
/*
기본값을 정의해 두면, 인자 전달 여부에 따라 선택적으로 스타일이 결정된다.
인자로 정의된 변수 옆에 ':' 을 쓰고 속성값을 써서 정의한다.
*/
@mixin my-font($font-color, $bg-color:yellow) {
font-family: sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 600;
color: $font-color;
background-color: $bg-color;
}
h1{
@include my-font(red, purple);
// -> color: red;
// -> background-color: purple;
}
p{
@include my-font(blue);
// -> color: blue;
// -> background-color: yellow;
}
// 믹스인 호출할 때 속성값을 전달하지 않으면 배경색은 자동 노란색으로 결정된다.