[SCSS/SASS] 기초 사용법 정리

<SASS 공식 사이트>

https://sass-lang.com/guide/#variables

Sass: Sass Basics

 

 

sass 환경설정

1) 설치방법

npm install -g sass

 

2) 기본 컴파일 방법

아래와 같이 입력하면 해당 scss 파일을 css 로 변환해준다.

// 직접 컴파일 하기
sass sass.scss style.css // sass [scss파일명].scss [css파일명].css

 

--watch 를 붙이면 scss 파일을 계속 감시하며 변경된 사항이 있으면 즉시 컴파일하여 css 파일에 반영한다.

// 변경 사항을 계속 추적하여 자동으로 컴파일하기
sass --watch sass.scss style.css

 

콜론(:)으로 분리하여 폴더 경로를 지정하면 해당 경로에 css 파일이 컴파일되어 반환된다.

// 특정 경로에 자동 컴파일 하기
sass --watch app/sass : public/stylesheets // scss 파일 경로 : 반환할 경로

 

위 예시코드대로 라면, Sass는 app/sass 폴더의 모든 파일을 감시하고 변경사항이 있을 때마다 CSS를 public/stylesheets 폴더에 컴파일한다.

변수

변수는 스타일시트 전체에서 재사용할 정보를 저장하는 방법으로 생각할 수 있다. 색상, 폰트 스택 또는 재사용할 CSS 값과 같은 것을 저장할 수 있다. Sass는 $ 기호를 사용하여 변수를 만든다. 다음은 예시이다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;


body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

위의 코드에서 $font-stack과 $primary-color 변수를 정의하고 있다. Sass가 처리될 때 정의한 변수 값을 사용하여 일반 CSS를 생성한다. 이를 통해 브랜드 색상을 일관되게 유지하는 데 매우 유용하다.

 

중첩(Nesting)

sass(scss) 에서 공통된 부모 태그를 가지는 자식 태그들은 부모 태그를 중복되게 사용하지 않고 단일 부모 태그를 가지는 형태로 자식 태그를 중첩되게 사용하여 스타일을 적용할 수 있다.

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {	
		display: inline-block;
	}

	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

 

nav 라는 공통된 부모 태그를 가지는 자식 태그들은 들여쓰기를 통해 공통된 부모 태그를 하나만 사용하고, 자식 태그들을 중첩되게 사용하도록 했다.

 

참고) 중첩으로 사용할 때 주의점

HTML 작성 시 시각적인 계층 구조를 따르는 방식으로 CSS 선택자를 중첩할 수 있습니다.
중첩을 지나치게 사용하면 유지 관리가 어려울 수 있는 CSS에 지나치게 자격을 갖춘 CSS가 생성될 수 있으므로 주의

 

 Parials

파셜은 다른 Sass 파일에서 포함할 수 있는 작은 CSS 코드 조각을 포함하는 방법이다. 이를 통해 CSS를 모듈화하여 유지 관리를 쉽게 할 수 있다. 파셜은 밑줄(_)로 시작하는 Sass 파일이다. 예를 들어 _partial.scss와 같은 이름을 사용할 수 있다. 밑줄은 Sass에게 해당 파일이 단순히 파셜 파일이며 CSS 파일로 생성되지 않아야 한다는 것을 알려준다. Sass 파셜은 바로 아래에서 살펴볼 @use 규칙과 함께 사용된다.

 

모듈(Module)

모듈을 사용하면 모든 Sass를 단일 파일에 작성할 필요가 없다. @use 규칙을 사용하여 Sass 파일을 모듈로 로드할 수 있으며, 파일 이름을 기반으로 한 네임스페이스를 사용하여 해당 Sass 파일의 변수, 믹스인 및 함수를 참조할 수 있다. 파일을 사용하면 생성된 출력에 해당하는 CSS도 포함된다.

 

_base.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;


body {
	font: 100% $font-stack;
	color: $primary-color;
}

 

 

styles.scss

@use 'base';

.inverse {
	background-color: base.$primary-color; 
	color: white;
}

 

위 코드에서 styles.scss 파일은 @use ‘base’ 로 입력된 base.scss 파일을 인식한다. 따라서 별도의 확장자를 포함할 필요 없이 base.$변수명 과 같이 ‘ . ’ 을 사용하여 해당 scss 파일의 변수에 접근하면, 해당 변수를 @use 를 명시한 파일 내에서 참조하여 사용할 수 있다.

 

 

참고) @use 사용시 주의점

@use 을 사용할 때는 루트 scss 파일에서 scss의 다른 규칙이 사용되기 전에 선언되어야 한다. 따라서 상단에 @use ‘base’ 와 같이 선언한다.

 

믹스인(Mixin)

믹스인은 쉽게 말해 함수다. 즉, 재사용 가능하게 여러 코드를 모아두고, 해당 함수를 필요한 곳에서 호출하면 그 자리에 믹스인 내에 작성된 코드가 남는 형식이다. 단, 생성 및 사용에 규칙이 존재하는데, 우선 믹스인을 만들 때는 @mixin 작명() 형태로 선언하고, 사용하고자 하는 곳에서는 @include 작명 형태로 호출한다.

@mixin theme($theme: DarkGray) {
	background: $theme; // 기본 매개변수 값으로 지정된 DarkGray 적용
	box-shadow: 0 0 1px rgba($theme, .25);
	color: #fff;
}


.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed); // 매개변수에 값을 전달하면 해당 값으로 변경된다.
}
.success {
@include theme($theme: DarkGreen);
}

 

Extend/Inheritance

@extend 를 사용하면 css 속성들의 묶음을 공유할 수 있다. 아래 코드를 보면 알 수 있지만,%message-shared으로 지정한 코드들이 CSS 파일로 컴파일 되면서 관련 클래스들이 하나로 묶여서 해당 코드가 적용된 것을 확인할 수 있다.  

SCSS

CSS

// 상속되었기 때문에 반영되어 컴파일 된다 %message-shared{     border: 1px solid #ccc;     padding: 10px;     color: #333; }   // 상속되지 않았기 때문에 컴파일 되지 않는다     %equal-heights{     display: flex;     flex-wrap: wrap; }         .message{     @extend %message-shared; }         .success{     @extend %message-shared;     border-color: green; }         .error{     @extend %message-shared;     border-color: red; }         .warning{     @extend %message-shared;     border-color: yellow; }

// 상속받은 속성값들이 적용되어 컴파일 됨 .warning, .error, .success, .message{   border: 1px solid #ccc;   padding: 10px;   color: #333; } .success{   border-color: green; } .error{   border-color: red; } .warning{   border-color: yellow; }

 

오퍼레이터(연산)

연산자는 CSS에서 수학 연산을 수행하는 데 매우 유용하다. Sass에는 +, -, *, math.div() 및 %와 같은 몇 가지 표준 수학 연산자가 있다. 다음 예시에서는 기사와 사이드에 대한 너비를 계산하기 위해 간단한 수학 연산을 수행한다.

@use "sass:math";

.container {
	display: flex;
}


article[role="main"] {
	width: math.div(600px, 960px) * 100%;
}


aside[role="complementary"] {
	width: math.div(300px, 960px) * 100%;
	margin-left: auto;
}

 

이렇듯, Sass의 연산 기능을 사용하면 픽셀 값을 퍼센트로 변환하는 등의 작업을 간편하게 수행할 수 있다.