SCSS

SCSS

2022. 11. 5. 19:11ㆍ프로그래밍/HTML & CSS

Sass

CSS 전처리 도구

기존의 CSS 문법과 호환되지 않는 문제가 있음

SCSS

CSS 전처리 도구

SASS 를 기존의 CSS 문법과 호환되도록 만든 것

변수

$color: orange;

.container {
  background-color: $color;
}

$ 기호를 이용해 변수 선언 가능
css 속성 안에 변수 작성 가능

중첩

.container {
  font-size: 40px;
  .item { // .container .item
    color: orange;
    &:hover { // .item:hover
      color: yellow;
    }
  }
}

중첩해서 하위 요소 작성 가능
&: 부모 선택자 참조

중첩된 속성

.container {
  font : {
    weight: bold; // font-weight
    size: 10px; // font-size
    family: sans-serif; // font-family
  };
  margin : {
    top: 10px; // margin-top
    left: 20px; // margin-left
  };
}

선택자처럼 사용하되 뒷부분에 콜론을 붙여야 함
블록의 끝에 세미콜론을 붙여야 함

주석

/* 주석1 */
// 주석2

두 가지 주석 사용 가능
/* */ 주석은 CSS 로 변환 후에도 남아있음
// 주석은 CSS 로 변환 후에는 없어짐

산술 연산

div {
  $size: 30px;
  width: 20px + 20px;
  height: 40px - 10px;
  font-soze: 10px * 2;
  margin: (30px / 2); // margin: $size / 2;
  padding: 20px % 7;
}

.box {
  width: calc(400% - 200px);
}

산술 연산 가능
나누기 연산자 사용 시 소괄호로 묶거나 변수를 사용해야 함
다른 단위의 산술 연산 시 calc() 함수를 사용해야 함

재활용 (Mixins)

@mixin center {
  display: flex;
  justify-content: center;
}

.container {
  @include center;
}

@mixin 을 사용해 스타일을 정의함
@include 를 사용해 해당 스타일을 사용함

@mixin box($size: 80px, $color: tomato) {
  width: $size;
  background-color: $color;
}
.container {
  @include box(200px, red);
  .item {
    @include box($color: green);
  }
}
.box {
  @include box;
}

매개변수 사용 가능
매개변수에 초기값 설정 가능
인수로 매개변수의 이름 명시 가능

반복문

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

자바스크립트 반복문처럼 사용 가능
값을 넣는 곳이 아닐 경우 #{} 을 사용해야 함
괄호 안에 데이터를 넣을 수 있음

함수

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

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

자바스크립트 함수처럼 사용 가능
어떠한 연산을 한 후 반환된 결과를 사용해야 할 경우

색상 내장 함수

$color: orange;

.box {
  background-color: mix($color, red); // 두 색상 섞기
  background-color: lighten($color, 10%); // 10% 밝아짐
  background-color: darken($color, 10%); // 10% 어두워짐
  background-color: saturate($color, 10%); // 채도가 10% 높아짐
  background-color: desaturate($color, 10%); // 채도가 10% 낮아짐
  background-color: grayscale($color); // 회색으로 만들어줌
  background-color: invert($color); // 색상 반전
  background-color: rgba($color, .5); // 불투명도 50%
}