SCSS


개요

SCSS는 SASS의 슈퍼셋으로 CSS를 좀 더 편하고 효율적으로 쓸 수 있게 해주는 CSS 전처리기입니다.
변수, 중첩, 반복문, 함수 등을 제공해줍니다.

✨ SCSS를 브라우저 내에서 사용하려면 CSS로 변환하는 컴파일 작업을 거쳐야합니다.


중첩

중첩을 사용하면 상위 선택자의 반복을 피해 편리하게 스타일링을 작성할 수 있습니다.

.container {
  div {
    span {
	
    }
  }
}

상위 선택자 참조

& 기호를 사용하면 상위 선택자를 참조할 수 있습니다.

.btn {
  &:hover {
  	
  }
}

중첩된 속성

CSS의 공통된 네임스페이스 속성을 중첩하는 속성입니다.

div {
  font: {
  	family: sans-serif;
	size: 16px;
	weight: 700;
  };
}

변수

반복적으로 사용되는 수치나 색상을 변수에 담아서 사용할 수 있습니다.
$을 사용해 변수를 선언합니다.
변수는 재할당이 가능합니다.

✨ 변수는 유효 범위가 있습니다.

$white: #fff;
$size: 16px;

산술 연산

기본적인 수학 산술 연산자를 사용할 수 있습니다. (+, -, *, /, %)

✨ 나누기의 경우 ()로 감싸거나, 변수로 지정해서 나눠 줍니다.
/ 는 단축속성을 나타내기 때문.


Mixin

mixin을 활용하면 여러 코드를 재활용할 수 있습니다.
@mixin을 사용해 코드를 재활용합니다. 재활용한 코드를 사용하기 위해서는 @include를 사용합니다.

mixin은 인수를 받습니다. 자바스크립트에서 함수와 비슷합니다.

@mixin 이름(매개변수: 기본값) {}
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  @include center;
}

반복문

자바스크립트의 반복문과 같이 SCSS에서도 반복문을 사용할 수 있습니다.

#{}을 사용하면 보간이 가능 합니다.

✨ 제로베이스 x

// 기본 문법
@for $i from 1 through 10 {}

함수

자바스크립트의 함수와 유사한 함수를 사용할 수 있습니다.

// 기본 문법
@function size($width, $height) {
  @return $width * $height
}

색상 내장 함수

SCSS 내부에서 이미 구현된 함수로 별도의 선언 없이 사용할 수 있습니다.

  • mix(색, 색) : 인수인 색을 섞어서 새로운 색을 생성합니다.
  • lighten(색, 수치) : 색을 수치만큼 밝게 만들어 줍니다.
  • darken(색, 수치) : 색을 수치만큼 어둡게 만들어 줍니다.
  • saturate(색, 수치) : 색의 채도를 수치만큼 올려 줍니다.
  • desaturate(색, 수치) : 색의 채도를 수치만큼 내려 줍니다.
  • grayscale(색) : 주어진 색을 회색으로 만들어 줍니다.
  • invert(색) : 색을 반전해 줍니다.
  • rgba(색, 투명도) : 색을 투명하게 해줍니다.

가져오기

@import를 이용해 다른 SCSS 파일들을 가져올 수 있습니다.


@content

mixin에 내용을 추가할 때 사용합니다.

@mixin box {
  width: 100px;
  height: 100px;
  @content
}

div {
  @include box {
    padding: 16px;   
  }
}

0개의 댓글