[데브코스] TIL-118 SCSS, @mixin, @extend, @use, @import

재활용

1. @mixin 규칙

  재활용할 스타일을 정의할 수 있다. 마치 함수처럼 선언하는 방법이다. @include 규칙을 사용하여 원하는 곳에 스타일을 적용할 수 있다.

@mixin large-text($size: 30px) {
	font-size: $size;
}

.box {
	@include large-text(40px);
}

  매개 변수를 사용하지 않고 mixin을 사용하는 곳도 있기 때문에 매개변수의 초기값을 꼭 설정해주어야 한다. 매개 변수에 …을 붙이면 가변 인수라는 의미가 된다.

@mixin bg($w, $h, $b...) {
	width: $w,
	height: $h,
	background: $b
}

.box {
	@include (
		100px,
		200px,
		url('/images/a.png') no-repeat center,
		url('/images/b.png') repeat-x,
		url('/images/c.png') repeat-y center / contain,
}

  매개 변수를 순서대로 넣지 않아도, 어떤 매개 변수에 어떤 값을 넣을지 명시해주는 키워드 인수를 사용할 수 있다.

@mixin pos($p, $t: null, $b: null, $l: null, $r: null) {
	position: $p;
	top: $t;
	bottom: $b;
	left: $l;
	right: $r;
}

.fixed {
	width: 100px;
	height: 200px;
	@include pos(fixed, $b: 20px, $r: 20px);
}

  @mixin을 사용하면서 style 블록을 전달할 수 있는데, 이 때 @content 규칙을 사용하여 원하는 곳에 style을 지정할 수 있게 된다.

@mixin icon($url) {
	&::after {
		content: url($url);
		@content;
	}
}

.box {
	@include icon('/images/icon.png') {
		position: absolute;
		top: 0;
		left: 50px;
	}
}

  @content 규칙에서도 매개변수에 값을 넣어줄 수 있다. 대신 mixin을 사용하는 부분에서 using이라는 키워드를 사용하여 매개변수를 받아주어야 한다.

@mixin media($w) {
	@media all and (max-width: $w) {
		@content(300px);
	}
}

.box {
	width: 400px;
	height: 400px;
	@include media(767px) using ($len) {
		width: $len;
		height: $len;
	}
}

  SCSS와 Sass에는 문법적인 차이가 거의 없는데, 한 가지 차이가 있다. Sass에서는 @mixin를 =으로, @include를 +로 표현한다.

---

확장

1. @extend 규칙

이미 작성해 둔 선택자의 이름을 작성하면, 이를 확장하여 스타일을 추가할 수 있다. 주의해야할 점은 선택자 폭발이다. 그래서 이 규칙보다는 @mixin을 사용하는 것을 추천한다.

 

SCSS

.btn {
	width: 100px;
	height: 100px;
	background-color: gray;
}

.btn-primary {
	@extend .btn
	background-color: blue;
}

CSS

.btn, .btn-primary {
	width: 100px;
	height: 100px;
	background-color: gray;
}

.btn-primary {
	background-color: blue;
}

  %는 placeholder 선택자로, Sass(SCSS)에서만 사용할 수 있다. 오로지 @extend 규칙에서 사용할 때만 사용한다.

%btn {
	width: 100px;
	height: 100px;
	background-color: gray;
}

.btn-primary {
	@extend %btn
	background-color: blue;
}

---

함수

1. @function 규칙

  자바스크립트에서 사용하는 function과 사용법이 비슷하다. return할 때 @을 붙여 @return 키워드를 사용해주면 된다.

 

SCSS

$columns-width: 1200px;

@function my-grid($col: 1, $total: 12) {
	@if ($col > $total) {
		@error '$col must be less than $total.';
	}
	@return $columns-width * $col / $total;
}

.box1 { width: my-grid(); }
.box2 { width: my-grid(4); }
.box3 { width: my-grid(11); }
.box4 { width: my-grid($total: 9); }

CSS

.box1 { width: 100px; }
.box2 { width: 400px; }
.box3 { width: 110px; }
.box4 { width: 133.3333333333px; }

---

조건과 반복

1. @if, @else if, @else

우리가 알고 있는 if-else 구문과 동일하며, @ 기호를 붙여 사용한다는 점이 차이다. 조건 부분에 소괄호는 생략 가능하다.

2. @each ~ in …

자바스크립트의 for of 구문과 비슷하다. in 뒤에는 반복문을 돌릴 list나 map을 명시해주면 된다.

3. @for ~ from a through(to) b

자바스크립트의 for문과 비슷하다. from through는 반복 범위가 a≤ 변수 ≤b이고, from to는 a≤ 변수 <b이다.

4. @while

자바스크립트의 while문과 비슷하다. 조건 부분에 소괄호는 생략 가능하다.

---

가져오기, 모듈

npm install -g sass

아래의 명령어로 scss라는 폴더 내의 파일들을 CSS로 컴파일할 수 있다.

sass scss:css

1. @import

@import './variables';

.box {
	color: $primary;
}

  원하는 파일들을 경로를 작성하여 가져와 사용할 수 있다. 파일이름에 _를 작성하면 내부에서 사용하기는 하지만 해당 파일들은 CSS로 컴파일되지 않는다. SCSS 파일은 확장자를 작성하지 않아도 된다. 아래의 경우에는 CSS로 컴파일 할 때 해당 내용이 사라지지 않고 같이 컴파일된다.

• url() 함수를 사용할 때
• .css 확장자를 사용할 때
• http 주소를 사용할 때

2. @use

@use './variables' as var;

.box {
	color: var.$primary;
}

  네임스페이스를 사용할 수 있다. 파일의 이름으로 네임스페이스를 사용하고 싶지 않다면 파일명 뒤에 as로 원하는 네임스페이스를 작성해주면 된다. 이 네임스페이스가 모듈의 이름이 되어 사용할 수 있게 된다.

3. @forward

  한 파일에서 @use를 통해 다른 파일을 가져왔다고 가정해보자. 이 파일을 A라고 한다면, 새로운 B 파일에서 A를 @import 해왔다. 이 때, A에서 @use로 가져온 파일들을 참조하고 싶을 때 쓰는 규칙이 바로 @forward이다. A파일 내에서 작성해주면 되고, @use 처럼 as 키워드를 사용할 수 있다. 네임스페이스 뒤에 *를 붙여주고, 일반적으로 -도 붙여 사용시의 편리함을 더해준다. 접두사를 추가하여 사용하는 것이라고 보면 된다.

 

A파일

@use './variables' as var;
@forward './variable' as var-*;

B파일

@use './A'

.box {
	color: A.$var-primary;
}