🎈오늘 배운점 (Fact)

scss

변수

!default

해당 변수명에 이미 값이 정해져있다면, 해당 값을 사용하고 아니면
할당 한 값을 사용한다

$test: blue;

.test{
	color: red !default
}

어디에 사용하는가?

라이브러리에서 사용하는데
기본 프로젝트의 전역변수 오염을 막기 위해서 변수들에 !default 할당해서
기본 프로젝트의 전역변수 오염을 막는다.

#{}보간

텔플릿 리터럴이랑 비슷하지만

$name: "Test"
.test{
	background-image: url("#{$name}/dd")
}

데이터

문자열 데이터

색상데이터

booleans 데이터도 가능
해서 조건문도 가능

list 데이터

//[1,2,3,4]
$list: (10px, 20px);
$list: 10px, 20px
$list: 10px 20px

Maps 데이터

{key: value}

$map: (key: value);
$map: (key: value);

해당 map 데이터를 사용하려면
scss의 내장모듈인 sass:map을 써야한다

map.get(변수명,key 이름)

산술연산자

• • • / 다 가능

하지만 / 연산자 경우 기존 css에서 사용하기 떄문에

( / ) 로 감싸거나 변수를 쓰면 나누기 연산자를 쓸수 있다.

mixin

@mixin test(변수:초기값){
		내용
}

.container{
	@include test(변수)
}

같은 형태로 js의 함수나 객체처럼

요소의 뭉치를 @mixin을 만들어서 넣을수가 있다
그리고 변수를 넣어서 외부 인자를 넣을수도 있다,

전개연산자도 가능하다
$value...

키워드 인수

mixin에 인자를 넣을때 순서와 상관없이 인자를 넣고싶을떄 사용

@mixin test($p,$s){
	font-size: $s
}

.container{
	@include test($s:12px, $p:20px)
}

스타일 블록

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

.box {
	@include icon('./src/post.png') {
	    position: fixed;
    }
}

include 에 중괄호안에 쓴 스타일을 mixin에 @content를 사용해서 넣을수가 있다

활용

@use "sass:map"
	
	@mixin media($name){
		$breakpoints:{
			sm: 576px;
			md: 992px;
			lg: 1400px;
		}
		
		@media all and (max-width: map.get($$breakpoints, $name)){
			@content
		}
}

🤔 생각이 드는것 (Feeling)

부족한 점

css작업이 생각보다 오래걸린다,,,,