SCSS ch.1 SCSS (8) ~ (13)

8. 산술 연산

산술 연산자를 사용할 때는 기본적으로 단위가 같아야 함
=> calc 함수를 사용하면 됨

자바스크립트에서 사용한 연산자들 모두 사용 가능

div {
	width: 20px + 20px; // 40px
    height: 30px - 10px; // 20px
    font-size: 10px * 2; // 20px
    margin: 40px / 4; // 제대로 출력 x
    padding: 20px % 7; // 6px
}

=> 나누기를 제외한 모든 연산자들이 제대로 출력됨

나누기는 왜 안 될까?

/ 를 사용했을 때 단축속성을 사용하는 것과 비슷하기 때문

그러면 어떻게 나누기를 해야 할까?

• 괄호 사용

margin: (40px / 4);

• 변수 사용

$size: 40px

margin: $size / 4;

• 다른 산술 연산자 활용

margin: 20px + 20px / 4;

9. 재활용(Mixins)

반복되는 내용을 지정해서 재활용

@mixin center {
	display: flex;
    margin: 20px;
}

.container {
	@include center;
    .item {
    	@include center;
    }
}

mixin 인수 활용

인수와 매개변수를 활용해서 원하는 값을 지정 가능

@mixin center($size: 15px) { // 기본값 지정
	display: flex;
    margin: $size;
}

.container {
	@include center(20px);
    .item {
    	@include center(10px);
    }
}

=> 매개변수는 여러 개 지정 가능
=> 인수는 순서대로 넣으면 되는데 인수를 넣을 필요가 없으면 키워드 인수 사용
($color: green;)

10. 반복문

자바스크립트의 반복문과 유사!?!

@for $i from 1 through 10 {
	.box:nth-child(#{$i}) { // 보간
    	width: 100px * $i;
    }
}

=> 자바스크립트와 다르게 제로베이스가 아님

11. 함수

자바스크립트의 함수와 유사한 mixin 말고도 자바스크립트의 함수와 동일한 함수가 있음

@function ratio($size, $ ratio) {
	@return $size * $ratio;
}

.box {
	$width: 100px;
	width: $width;
    height: ratio($width, 1/2);
}

=> mixin은 그냥 재활용 용도, 함수는 반환된 결과를 사용 가능

12. 색상 내장 함수

기본적으로 제공되는 함수

.box {
	$color: blue;
    &.built-in {
    	color: mix($color, red); // blue
    }
}

• mix(color, color)
  첫 번째 인수 색과 두 번재 인수 색을 섞음

• lighten(color, 00%)
  색을 밝게 만들어 줌

• darken(color, 00%)
  색을 어둡게 만들어 줌

• saturate(color, 00%)
  색의 채도를 올려줌

• desaturate(color, 00%)
  색의 채도를 내려줌

• grayscale(color, (00%))
  색을 회색으로 만들어 줌

• invert(color)
  색을 반전시켜 줌

• rgba(color, 0.n)
  투명도를 올려 줌
  (숫자 3개를 써야 하는 표준 rgba와 다름)

13. 가져오기

• import를 사용해서 다른 파일을 가져옴
• 쉼표를 사용해서 여러 개의 파일을 가져옴
• ./sub.scss를 줄여서 ./sub로 쓸 수 있음

@import "./sub", "./sub2";