SCSS 변수, 연산자, 함수

🗓2020년 02월 27일 ∙ 🖊TutorialPost ∙ ⏳2분

SCSS에서는 확장 스크립트를 통해 변수, 연산자, 함수등을 사용할 수 있습니다. SCSS의 확장 스크립트를 사용하면 css를 프로그래밍적으로 관리할 수 있습니다.

변수

  • scss 변수는 $var_name 과 같이 $로 시작하는 변수명을 사용해 정의할 수 있습니다.
  • 폰트, 색상, 사이즈와 같이 웹사이트의 통일된 UI를 위해 여러곳에서 참조하게 되는 속성을 변수로 선언해 사용하게 됩니다.
  • 이렇게 정의한 변수는 기본적으로 속성값 등에 사용할 수 있습니다.
  • #{$var_name} 형식의 문자 보간을 이용하면 scss 내의 선택자나 속성명에도 정의한 변수를 사용할 수 있습니다.
// 기본적인 변수 정의 및 사용 법
$bgcolor: #ff3300;

.container { 
  background-color: $bgcolor; 
}

// 문자열 보간
$color: lime;
$side: left;

.section-#{$color} {
  border-#{$side}-color: aliceblue;
  border-#{$side}-width: 2px;
}

연산자

scss에서는 연산자를 사용할 수 있습니다.

+ 더하기
- 빼기
/ 나누기
* 곱하기
% 나머지
== Equal
!= Not Equal

연산자는 아래와 같이 다양한 방식으로 활용할 수 있습니다.

.main {
  // 문자열 연결
  background-image: url('../images/' + 'bg-image.jpg');
  // 숫자 연산
  height: 30px + 10px;
  width: 100% / 4;
}

더하기 및 빼기 연산의 경우에는 동일한 단위에서만 가능합니다. 위의 예제와 같이 px은 px 끼리만 연산이 가능합니다.

함수

SCSS에는 SCSS사용을 편리하게 만들어 줄 다양한 내부함수가 포함되어 있습니다.

아래 예시는 lighten(), darken() 함수와 같이 색상을 함수의 두번째 인수로 지정한 비율만큼 조절해 주는 함수 입니다.

// 함수 예시 lighten - 지정된 색을 지정한 비율만큼 밝게 만든다.
$basecolor: #039;

#sidebar {
  background-color: lighten($basecolor, 20%)
}

이외에도 다양한 SassScript 함수들이 존재합니다.

SassScript 주요 함수

색상

// 색상, 채도, 명도를 기반으로 색생을 생성
hsl(100deg, 25%, 25%)

// 색상, 채도, 명도, 투명도를 기반으로 색상을 생성
hsla(100deg, 25%, 25%, 0.5)

// 지정된 색을 deg 범위만큼 변환
adjust-hue(#3c0, 60deg)

// 지정된 색의 명도를 지정된 양만큼 밝게 변환
lighten(#3c0, 40%)

// 지정된 색의 명도를 지정된 양만큼 어둡게 변환
darken(#3c0, 40%)

// 지정된 색의 채도를 지정된 양만큼 증가
saturate(#3c0, 10%)

// 지정된 색의 채도를 지정된 양만큼 감소
desaturate(#3c0, 10%)

// 지정된 색을 그레이스케일로 변환
grayscale(#00f)

// 색 반전
invert(#f00)

// 두개의 색 비율만큼 섞음
mix(#fff, #00f, 25%)

투명도

// 지정된 색의 투명도를 추출
alpha(blue)

// 지정된 색의 불투명도를 증가
fade-in(rgba(0, 0, 10, 0.3), 0,4)

// 지정된 색의 투명도를 증가
fade-out(rgba(0, 0, 10, 0.6), 0,4)

리스트

// 리스트의 길이 추출
length(10 20 30)

// 리스트에서 n번째 값 추출
nth(10 20 30, 2)

// 지정된 값의 리스트 위치 추출
index(10 20 30, 20)

// 리스트를 결합
join(10 20, 40 50)

기타

// if, true, false 리턴
if(true, 10px, 20px)

// 값의 단위를 추출
unit(5px)
SHARE