[SCSS] 기본 문법 ②

문법 이어하기

SCSS 재활용

1) 재활용할 스타일 정의하기 -> @mixin

@mixin large-text($size) {
	font-size: 50px;
    font-weight: bold;
}

2) 재활용 하기 -> @include

.box {
	width: 40px;
    height: 40px;
    @include larget-text(40px)
}

• 매개 변수도 가능하다.
• ($size: 30px)로 default값도 설정할 수 있다.
• 선택자도 가능!
• @mixin 내부에서 또 다른 @mixin 설정이 가능하다.
• background 속성을 이용해 여러 이미지를 받을 수 있다.
• 매개변수가 가변인수가 되어야할땐? -> ... 전개 연산자
• 순서에 상관없이 값을 전달! 해주는 키워드 인수
• Map 데이터를 이용해보자! (@use "sass:map";)

$breakpoints : (
	sm: ~~~,
    md: ~~~,
    lg: ~~~
);
// breakpoints.sm, breakpoints[sm] 로 접근

• @content: 스타일블록을 지정한다.
• @content(⭐)는 using(⭐) 이렇게 전달 되기도 한다.

스타일 블록

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

.box {
	@includes icon('./src/post.png') {
    	⭐ 여기다가 mixin에 추가적용할 스타일을 기재 ⭐
    }
}

// 결과
.box::after {
	content: url($post);
    ⭐ 스타일블록에 추가한 스타일들 ⭐
}

vs Sass?

• @mixin -> =
• @include -> +

확장

살짝 상속같은 너낌?

@extend ___

• extend라는 키워드를 통해서 이미 작성해놓은 선택자의 이름을 명시하게 되면 그 선택자가 가지고 있는 스타일 + 직접 명시한 스타일로 확장되어 설정된다.
• 선택자 폭팔이라는 부작용이 있을 수 있다.
  • 중첩 문법을 통해 ::after 가상요소에 extend를 하면 &로 지정된 현재 요소에 대한 선택자도 만들어진다. -> 중첩 사용은 피하자
• extend보단 @mixin 써주자...

placeholder 선택자 %

• extend 규칙을 이용해 확장해서 사용할 수만 있는 선택자 (확장만을 위함)
• @media에 사용할 때는 @media 규칙 내부에 선언되어있어야 사용가능하다.

함수

@function ___() { @return }

• @if, @error 등으로 예외처리도 가능하다.
• 매개변수의 개수를 유동적으로 설정할 수 있다.
  • $rest... 처럼 전개연산자 가능!
  • 불필요한 매개변수의 경우에는, @use:list;를 이용해 불필요한 매개변수 list의 length로 @error를 발생시킨다.
• 이름 중복의 문제가 있을 수 있다. -> 두단어로 쓰는게 좋아!

조건과 반복

@if

• 조건 부분에 ()가 필요하지 않다.
• &는 상위 참조 선택자 앞에 다른 선택자를 넣으면 다른 선택자가 &의 상위 선택자가 된다.

@each ___ in ___

• 자바스크립트에 for of와 유사...!
• list 모듈을 가져와 사용한다.
• index(배열, index를 알고 싶은 아이템)

@for $i from n through m

• n부터 m까지 하나씩 $i에 저장
• $i의 초깃값은 n, 끝값은 m
• from -> to로 바꾸면 <= -> <의 효과

모듈

@import

• 가져올 파일을 적어준다. url()이 필요없다.
• url()에 확장자를 넣을 경우 -> scss 그대로 컴파일된다.
• url, css, http~ -> 컴파일 결과로 포함되서 출력이 된다.

npm install -g sass

• 어디서든 Sass와 SCSS를 CSS로 컴파일할 수 있게끔!

sass sass:css

• 컴파일 명령어

_ 기호 추가

• 선택자가 없는 import만 되는 scss 파일이 컴파일 되지 않도록 파일 맨 첫 글자를 언더바로 설정한다.

@use _____ as ___;

• 네임스페이스 적용이 가능해진다.
• mixin, 함수에도 사용가능해진다.
• 이름 충돌을 방지할 수 있다.
• as ___ 로 다르게 부를 수 있다.

@forward (모듈을 가져온 main을 가져와 모듈로 사용할때 -> 범위 밖이기 때문에 사용할 수 없다.)

• 받아서 대신 전달해주는 기능!
• 여러 파일을 forward로 받으면 이름이 겹칠 수 있기 때문에 *를 붙인다. (@forward './~' as ___*;)
  그리고 사용할 땐, 이름 앞에 붙여준다. 이게 예쁘지 않기 때문에 - 하이픈을 넣어준다.

내장모듈

• color, math, string, list, selector, meta
• global function (불러오지않아도 언제든 쓸수있음)
• $if(a, b, c) 삼항연산함수
• rgb, rgba

Color

@use "sass:color";

• color.adjust (adjust-color)
  • 현재 값에 대한 변화를 입력해준다.
• darken($color, per) // 전역 함수
• lighten($color, per)
• saturate($color, $amount)
• invert(color)

List

@use "sass:list";

• append($list, item)
• index($list, $item)
• join($list, $list)
• list.length($list)
• list.nth($list, index)

Map

@use "sass:map";

• get($map객체, 속성)
• has-key($map객체, 속성)
• map.keys($map객체)
• map.values($map객체)
• map.merge($map객체, $map객체)
• map.remove($map객체, 속성)

Math

@use "sass:math";

• math.ceil() // 올림
• math.floor() // 내림
• math.round() // 반올림
• math.max()
• math.min()
• math.abs()
• math.is-unitless() // 단위가 있는지?
• math.compatible() // 연산이 가능한가요?

Meta

@use "sass:meta";

• 함수가 하나의 데이터처럼 이용된다.
  • a(b) 이렇게 callback을 받는다.
• meta.call($callback, 100px)
• meta.type-of()
• meta.check-type()

String

@use "sass:string";

• string.quote() // 따옴표
• string.unquote() // 따옴표x
• string.index()
• string.insert()
• string.length()
• string.slice()
• string.to-upper-case()
• string.to-lower-case()
• string.unique-id()

SCSS 디버그

@debug console.log
@warn console.warning
@error new throw Error