SCSS(Sass) - (2) - 기본 사용법

반복문

@for $변수 from 숫자 through 숫자 { }

zero base가 아니고 1부터 시작됩니다.

nth-child뒤에는 보간으로 변수를 넣어야 합니다.

SCSS에서 보간은 #{ } 방식으로 진행됩니다.

 

함수

JS문법과 비슷합니다.

다만 @를 붙여줘야 합니다.

 

색상 내장 함수

mix(기존 색상, 새로운 색상)  --> 두 색상의 혼합색을 출력합니다.

lighten(기존 색상, a%)  --> 해당 색상을 a%를 밝게 출력합니다.

darken(기존 색상, a%)  --> 해당 색상을 a%를 어둡게 출력합니다.

saturate(기존 색상, a%)  --> 해당 색상의 채도를 a%를 올려서 출력합니다.

desaturate(기존 색상, a%)  --> 해당 색상의 채도를 a%를 낮춰서 출력합니다.

grayscale(기존 색상)  --> 해당 색상을 회색으로 바꿔줍니다.

invert(기존 색상)  --> 해당 색상을 반전 시켜줍니다.

rgba(기존 색상, 투명도)  --> 해당 색상을 투명도만큼 출력합니다.

 

가져오기

@import "경로"; 혹은 @import url("경로");

위에 두 방법으로 기타 scss파일을 본 scss에 가져올 수 있습니다.

 

또한 확장자를 생략할 수 있습니다.

예를 들어, @import "./sub.scss"; 를 @import "./sub"; 로 적어도 정상적으로 가져올 수 있습니다.

 

여러개 파일을 가져오려고 하면 ,쉼표로 경로 구분하면 됩니다.

@import "./scss1", "./scss2"; 

 

데이터 종류

SCSS 데이터 종류들은 JS와 유사합니다.

주의해야할 것은 list와 map입니다.

list는 쉼표로 구분하며, map은 소괄호로 구분됩니다.

 

반복문 @each

@each $변수 in $변수 { }   방법으로 반복할 수 있습니다.

여러개 변수도 사용가능 합니다.

 

재활용 @content

기존 @mixin는 @include를 통해 재활용할 수 있지만,

해당 내용을 추가할 수 없었습니다.

이번에는 @mixin에 @content를 넣어서

재사용할 때 괄호안에 추가 속성을 넣어서 사용하면 됩니다.