CSS 심화 (2)

재활용

@mixin / @include

• @mixin 함수명 { // 재활용 할 스타일 ... }: @mixin 을 통해 재활용 할 코드 정의
• @include 함수명; ... mixin 을 통해 정의된 코드를 사용
• @mixin 은 함수 개념과 비슷해서 매개변수를 받아 사용할 수 있다.

@mixin large-text($size or $size: 30px) {	// 기본값을 지정해 줄 수 있다
	font-size: $size;
    // ...
}

.box {
	@include large-text(40px); // font-size: 40px;
}

• @minin 내에서 @if 구문을 사용할 수 있다.
  삼항연산자 사용 가능 ( if (condition, true, false) }

@if ($size < 30px) {
	font-size: 30px;
} @else {
	font-size: $size;
}

• @mixin func($w, $h, $b...): $변수명... 을 통해 여러개의 인수를 한번에 받아올 수 있음 (전개 연산자와 비슷한 용도)
• 보간과 함께 사용하면 다양한 활용이 가능함.

키워드 인수

• null: 속성의 값으로 사용했을 때, 컴파일 되지 않음 (값을 넣고자 하지 않을 때 null 을 넣어줌)
• @content: mixin 을 사용할 때 특정한 스타일 블록을 더 추가할 수 있는데, 이 스타일 블록이 들어가는 위치를 @content 키워드를 통해 지정할 수 있다.
• sass 에서 map 데이터를 제대로 사용하기 위해서는 @use "sass:map" 을 통해 내장 모듈을 불러와서 사용해야 함.
  map.get(데이터, 조회할 key값): map 데이터를 조회할 수 있음.
• @content(매개변수): @content 를 통해 인수를 받아서 사용할 수 있음.
  @include media(lg) using ($c) 와 같이 using() 키워드를 통해 사용할 수 있다.

확장

• @extend 태그(클래스): 다중선택자로 확장할 수 있음.
  중첩된 상태에서는 의도하지 않은 선택자가 만들어지는 부작용이 생길 수 있으므로 사용성이 떨어질 수 있음. (선택자 폭발)
• % 선택자: placeholder 선택자 .... @extend 규칙을 통한 확장에만 사용할 수 있는 개념

함수

• @function function() { ... @return 값; }
• @error 'message': 의도치 않은 동작이 있을 경우 if 등을 통하여 에러메세지를 출력 할 수 있음.
• 함수의 이름이 내장함수와 겹치게 될 수 있기 때문에 my- 등의 키워드를 붙여 지어주는 것이 좋음

SCSS 가져오기 / 모듈

• npm install -g sass: sass 패키지 설치
• sass <input.scss> [output.css]: sass 를 css 로 컴파일
• sass scss:css: scss 폴더를 css폴더로 컴파일
• _variables.scss 를 통해 변수들을 지정함
  main.scss 에서 @import "./variables" 를 통해 불러와서 사용함
• 파일명 앞에 '_' 키워드가 있다면, 별도의 css 파일로 컴파일되지 않음.
• @use "./vasiables" as var
var.$primary 와 같이 사용할 수 있다.
  이름 충돌이 일어나지 않게 - 등의 키워드를 붙여 사용할 수 있다. ... 접두사를 추가할 때는 * 키워드를 붙여서 정의해주어야 한다. (~~ as var-*;)
• .scss 확장자는 생략하는 게 좋음 (.scss 로 명시하게 되면 컴파일이 .scss 로 그대로 되기 때문에 웹 브라우저가 해석할 수 없음)
• 다른 영역으로 모듈을 전달할 때는 @forward "모듈" 을 통해 넘겨줄 수 있다.
  @use "/넘겨준 폴더/main" 과 같이 받아서 사용할 수 있다.
  

디버그

• @debug "message": console.log 처럼 컴파일 시, 터미널에 메세지를 출력할 수 있음.
• @warn: console.warn() 과 유사함
• @error: throw error 와 유사함

회고

SCSS 가 생각보다 복잡한 개념들이 많아서 조금 힘들었던 것 같다.
보통 자바스크립트와 비슷한 쓰임으로 사용되지만 사용법은 조금씩 달라 헷갈리지 않게끔 잘 정리해야겠다.