@mixin 키워드를 이용해 매개변수로 SCSS에서 사용할 변수(와 기본값)를 넣어주고, 공통적으로 사용할 스타일을 이름을 정해 @include + 이름으로 불러 사용한다.
변수: size와 color이고, 사용시에는 앞에 const나 let 대신 $를 붙여 사용하면 된다.
기본적으로 변수로 인해 적용될 값은 변수 옆에 : 값 형태로 작성하면 되고, 여러 개의 변수를 사용하고 싶을 때는 , 콤마로 여러 개의 매개변수 형태로 사용하면 된다. 지정한 기본값을 사용하고 싶으면, ( )를 사용하지 않고 @include와 이름만 작성하면 된다.
기본값이 아닌 값을 사용하고 싶을 때에는 명시해서 이름(값, 값) 과 같이 넣어주되, 단 매개변수에 지정한 순서(위치)대로 값을 넣어줘야 원하는 변수의 값으로 사용할 수 있다 !
단, 여러 개의 값 중 특정한 변수의 값만 따로 지정하고 싶다면 그 변수의 이름과 함께 값을 적어주면 되겠다 !
이때 변수와 같이 값을 작성해 인수로 넣어주는 것을 키워드 인수라고 한다.
반복문 형태로 스타일 작업을 할 때, @for 키워드를 사용하고 비교 연산자 대신 from, through를 이용하여 작성한다.
JS에서는 보간을 표현할 때 $ 기호를 이용하지만, SCSS에서는 # 기호를 사용하여 보간을 표현한다.
cf. SCSS에서는 $를 변수 선언에 사용하기 때문 !
참고로 SCSS에서 주석은 두 가지 형태로 작성될 수 있는데 //와 /* */ 이다.
둘의 차이는 //로 작성된 주석은 SCSS를 CSS로 컴파일링할 때 배제된다는 점이다 !!
SCSS에서는 JS의 함수와 아주 유사한 형태로 함수가 사용되는데, function 키워드와 return 키워드 앞에 @를 붙이면 된다.
cf. 유투브에서 16:9 비율의 영상이 사용되는데, 너비에 맞춰 높이의 크기가 설정되도록 함수로 스타일링을 짜놓았다.
SCSS의 mix 함수는 인수로 두 개의 색상을 넣어 두 색상을 혼합해 출력할 수 있게 해준다.
SCSS의 lighten 함수는 인수로 하나는 색상, 하나는 퍼센트의 비율을 넣어 명도를 밝게 조절해준다.
SCSS의 darken 함수는 인수로 하나는 색상, 하나는 퍼센트의 비율을 넣어 명도를 어둡게 조절해준다.
SCSS의 saturate 함수는 인수로 하나는 색상, 하나는 퍼센트의 비율을 넣어 채도를 맑게 조절해준다.
SCSS의 saturate 함수는 인수로 하나는 색상, 하나는 퍼센트의 비율을 넣어 채도를 탁하게 조절해준다.
SCSS의 grayscale 함수는 인수로 색상 하나만 받아 회색으로 바꿔준다.
SCSS의 invert 함수는 인수로 색상 하나만 받아 반전시켜준다.(보색)
SCSS의 rgba함수는 인수로 색상과 0~1 사이의 값을 받아 색상과 투명도를 지정해준다.
cf. CSS에서는 rgba 함수의 인수를 숫자 4개(r, g, b, a) 받아준다.
SCSS의 데이터의 종류는 위와 같이 number, string, color, boolean, null, list, map이 있다 !
list나 map 데이터를 다루기 위해 @each라는 키워드를 사용할 수 있다 !
list 데이터를 @each를 사용해 스타일링한 경우
map 데이터를 @each를 사용해 스타일링한 경우
@mixin으로 공통된 스타일링 부분을 활용하게 되는데, 이 부분에 새로운 내용을 덧붙여 사용할 때, @content 구문을 넣어둔 위치에 새로운 내용을 작성하게 되게 하는 기능을 한다.
'KDT TIL Note' 카테고리의 다른 글
| 번들러(Bundler) Parcel (0) | 2022.10.19 |
|---|---|
| Git 버전 관리 (실습) (0) | 2022.10.14 |
| SCSS 시작하기 (0) | 2022.10.14 |
| CSS animation 속성 (0) | 2022.10.12 |
| JS 생성자 함수, prototype 속성 (0) | 2022.10.04 |
