SCSS(Sass)

들어가며

• 순수 CSS로는 복잡한 로직을 처리하기 어려울 수 있음.

• Sass(SCSS)라는 CSS preprocessor(전처리 도구)를 활용할 수 있음.

• 전처리 도구는 직접 동작이 어렵기 때문에 브라우저에서는 CSS로 변환 작업을 거쳐야 함 → nodeJS환경이어야 함.

• node js 환경에서 사용 가능 함.

• SCSS는 코드가 Sass보다 복잡(중괄호, 세미콜론 사용)하지만 CSS와의 호환이 가장 최적화되어있기 때문에 SCSS 사용을 권장함.

• 👉 Sass meister

주석, 중첩

• SCSS에서 CSS로 변환하는 작업을 컴파일이라고 함.

• CSS 내용 그대로를 SCSS에서 사용할 수 있음.

• 2가지 주석 사용 가능 : /**/ 외에도 //을 지원함. 단 후자의 경우 컴파일이 되지 않음.

• Sass는 주석 시 들여쓰기를 맞춰주어야 적용됨.

• 중첩(nesting) 기능을 사용하면 특정 선택자 범위의 자식으로 또 다른 스타일을 적용할 수 있음.

• & 는 상위 선택자를 참조함.

• 단, @at-root라는 키워드로 상위 선택자를 제거할 수 있음.

• CSS의 반복된 속성 키워드가 있으면 범위로 지정할 수 있음

• 다중 선택자를 통해 여러 선택자를 한 번에 선택할 수 있음.

변수

• $로 변수를 지정할 수 있음. JS처럼 유효한 범위를 가지고 있기 때문에 하위 자식 모두 적용 가능. 마찬가지로 스코프에 해당하지 않으면 사용 불가능.

• 유효범위를 바꿀 수 있는 !global 이라는 flag를 제공함. 기본적인 개념은 !important와 동일함.

• 재할당이 가능함.

• !default flag는 지역 변수에서 재할당 시 기존에 정의된 변수가 있다면 기존 변수를 사용함. 이는 bootstrap등 프로젝트에 SCSS 파일을 붙였을 때 기존 프로젝트 내용의 변수를 침해하지 않는다는 효과가 있음.

• #{} : 백틱과 같은 보간 사용 가능. 선택자 이름에도 적용할 수 있음.

활용 예시

$size: 100;
$src: "assets/logo.jpg";
$color-gray: #333; 

데이터

• Numbers

• Strings

• Colors

• Booleans

• Null

• List

• Map : (key, value);

연산자

• 산술 연산자
• +, -, *, /, %

• 비교 연산자
• ==인 동등 연산자 사용
• !==
• <
• >
• <=
• >=

• 논리 연산자
• and, or, not

재활용

• @mixin으로 설정한 속성을 @include를 사용하여 한 번에 적용할 수 있음.

• 매개변수를 받아 지정할 수 있음.

• 콜론 기호를 통해 기본 값을 설정할 수 있음.

• Sass에서 @mixin은 =으로, @include는 +임.

• 매개변수에 ...으로(전개 연산자) 변수를 정의하면 가변인수라는 의미임. 따라서 인수의 수를 정확히 정의하지 않아도 됨.

• 변수에 담지 않아도 여러 값을 입력할 땐 전개 연산자를 사용해야 함.

• margin도 변수처리가 가능함. 다만 #{}를 통해 보간처리를 해야 expression 오류가 나지 않음.

• 값 입력을 원치않는 곳은 null로 지정하면 무시됨.

• $t: 100px 등으로 매개변수 이름을 전달하는 인수의 키워드로 사용하면 순서가 상관 없음.

• @content 키워드를 이용해 스타일 블럭 안에 추가적인 스타일을 줄 수 있음.

• 단일 키워드뿐만 아니라 함수로 사용 가능. 함수명과 스타일 블록 사이 using()키워드를 삽입하면 사용 가능. 단 include가 사용된 모든 곳에 정의해야 함. 디버깅 용도로 사용할 수 있음.

확장

• @extend라는 규칙을 통해 이미 작성해놓은 선택자를 명시했을 때, 선택자에 적용된 스타일을 확장해서 스타일을 적용할 수 있음.

• 선택자 폭발 주의하기. 중첩에 따라 의도하지 않은 선택자가 만들어질 수 있음. 따라서 mixin 규칙으로 사용하는 것을 권장함.

• %기호로 대체할 수 있음.

.btn-primary {
	@extend .btn; //%btn으로 대체 가능.
	background-color: blue;
}

함수

• 기본적인 동작원리는 JS와 비슷함. 다만 @ 기호를 사용한다는 점이 다름.

• 값으로 전개 연산자(...) 사용할 수 있음.

조건과 반복

• @if와 @else, @else if를 사용함.

• 조건부분에 소괄호를 사용하지 않아도 됨.

• @each 키워드를 통해 JS의 for..of, forEach와 비슷한 기능을 함. 반복적인 처리를 함.

• @for를 통해 반복문을 실행함. from과 through로 범위를 지정함(≤). through 대신 to로 지정하면 지정 숫자 직전까지 반복됨(<). 이와 비슷하게 @while 사용 가능.

가져오기, 모듈

가져오기

• @import 규칙은 파일을 가져옴.

• 별도의 url 키워드 없이 따옴표로 불러올 수 있음. 확장자 적지 않아도 됨. 만약 url 키워드를 사용하거나 확장자를 붙일경우 컴파일 될 수 있음.

• SCSS 파일명 앞에 _를 추가하면 별로 CSS 파일을 만들어 컴파일하지 않음. 변수만 정의한 파일 등을 컴파일시키지 않을 때 유용함.

모듈

• @use를 사용하면 확장자를 사용할 수 있음. 이를 모듈화라 함. 좀 더 안전하게 운용 가능. 이때 as로 모듈 이름을 정의하여 사용할 수 있음.

@use "./variables" as var;

.main {
    background-color: var.$primary;
}

• 모듈로 사용하고 있는 파일을 외부 파일에도 사용할 수 있게 하려면, @forward 규칙을 통해 파일을 전달하면 외부 파일에서 use 키워드로 사용할 수 있음. 만일 as키워드를 사용하려면 *을 뒤에 붙여주어야 함. ex) @forward "./variables" as var-*

• 사용할 때 변수 바로 앞에 키워드를 사용하기 때문에 -기호를 추가하는 것이 좋음.

디버그

• @debug 규칙으로 문자열을 입력하면, console.log처럼 메시지를 작성해서 터미널에 출력할 수 있음.

• @warn 규칙은 warning이라는 키워드와 함께 경고 메시지를 출력할 수 있음.

• @error 규칙은 에러를 발생시켜 컴파일이 정상 동작하지 않게 만듦.

소소한 팁

• 삼항 연산자 사용 가능. if($size < 30px, 30px, $size);

• 그리드 시스템 : 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템.

• 상위 선택자 &를 사용하면 자식 선택자 다음 상위 선택자를 호출할 수 있음. body.dark &

• 이미 만들어진 내장된 여러 기능을 모듈로 활용할 수 있음 → 내장 모듈.