#TIL_21.09.16

ISOJ·2021년 9월 22일

Today I Learned

목록 보기

23/43

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" 과 같이 받아서 사용할 수 있다.