[카카오 테크 캠퍼스 2기] 1단계 4주차 WIL - SCSS

 

SCSS(SASS)를 사용하는 이유?

표준 CSS로 작성하면서 반복되는 선택자로 인해 코드가 길어지는 문제가 발생하곤한다.

SCSS와 같은 CSS Preprocessor를 사용하면 이러한 문제점을 개선할 수 있다.

 

 

CSS Preprocessor란?

CSS Preprocessor는 전처리기라는 의미로, CSS가 동작하기 전에 사용하는 기능을 의미한다.

전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting), 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.

이렇게 작성한 전처리기 코드를 웹에서 동작 가능한 표준 CSS로 컴파일하는 과정을 거치게 된다.

이 컴파일은 Vite, Parcel, Webpack과 같은 번들러를 통해 수행하게 된다.

 

 

주석

• /* */ : 컴파일 후 css파일에 주석이 남아 있음.
• // : 컴파일 후 css파일에 주석이 남지 않음.

 

 

상위(부모) 선택자 참조

.btn {
  position: absolute;
  &.active {  // .btn.active
    color: red;
  }
}

.list {
  li {
    &:last-child {  // li:last-child
      margin-right: 0;
    }
  }
}

 

• &을 통해 상위 선택자를 참조한다.
• &.active에서의 &는 .btn을 의미하고 해당 선택자는 .btn.active이다.
• &:last-child에서의 &는 li를 의미하고 해당 선택자는 li:last-child이다.

 

 

중첩된 속성

네임스페이스가 동일한 속성인 경우 중첩기능을 통해 설정이 가능하다.

.box {
  font: {
    weight: 700;
    size: 10px;
    family: sans-serif;
  }
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  }
}

 

 

변수

• 원하는 값을 변수로 지정함으로서 재활용이 가능하도록 할 수 있다.
• 변수에 값을 재할당할 수 있다.
• 변수에 유효범위(전역변수, 지역변수)가 존재한다.

.conatiner {
  $size: 200px;  // .container 내부의 유효범위를 가짐.
  position: fixed;
  top: $size;  // 200px
  .item {
    $size: 100px;  // 재할당
    width: $size;  // 100px
    height: $size;  // 100px
    transform: translateX($size);
  }
}

 

• .container 내부의 $size 변수는 .container를 유효범위로 갖는 변수이다.
• top의 값은 .container를 유효범위를 갖는 $size 값인 200px이다.
• .item 내부의 $size값을 100px로 재할당한다.
• .item 내부의 width, height값은 재할당된 값 100px이다.

 

 

산술연산

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

span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  font: 10px / 10px;  // font-size / line-height
}

div {
  width: calc(100% - 200px)
}

 

• +, -, /, *, % 같은 모든 산술 연산을 통해 값을 설정할 수 있다.
• /은 font같은 단축 속성으로 인해 다른 방식으로 나눗셈을 진행해야한다.
  • 1. 소괄호로 묶어 산술 연산임을 의미시킨다. margin: (30px / 2);
  • 2. 값을 변수로 설정하여 산술 연산을 한다. margin: $size / 2;
• 산술하기 위한 단위는 하나로 같아야한다. 만약, 단위가 같지 않다면 calc() 메서드를 사용한다.

 

 

재활용(@mixin)

재활용 될 수 있는 구조를 @mixin을 통해 정의하여 코드를 재활용할 수 있다.

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

.container {
  @include center;
}

@mixin box($size: 100px, $color: tomato) {
  width: $size;
  height: $size;
  background-color: $color;
}

.container {
  @include box(200px, red);

  .item {
    @include box($color: green); // 키워드 인수
  }
}

 

• 정의된 @mixin은 @import를 통해 가져와 사용할 수 있다.
• @mixin은 들어온 인수를 통해 원하는 값으로 설정이 가능하다.
• 특정 인수값이 들어오지 않을 경우의 default 값을 설정할 수 있다.
• 인수는 순서대로 적용되기 때문에 순서에 상관없이 인수를 전달하고 싶은 경우 키워드 인수를 사용한다.

 

 

반복문

@for을 통해 반복문으로 스타일링 설정이 가능하다.

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

 

• index의 의미를 가지는 $i 변수로 1부터 10까지 반복문을 진행한다.
• nth-child()는 값을 명시하지 않는 곳이므로 보간을 통해 $i를 지정한다.
  JavaScript에서의 보간은 ${}이었다면 SCSS에서의 보간은 #{}을 통해 지정할 수 있다.

 

 

함수

@function를 통해 원하는 값을 인자를 활용하고 처리하여 반환할 수 있다.

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

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

 

• @function을 사용한 이후 함수의 이름과 매개변수를 입력한다.
• 매개변수를 통해 원하는 값으로 처리한 후 @return을 통해 값을 반환한다.
• 정의한 ratio()메서드를 호출하여 반환 값으로 설정한다.
• @mixin은 CSS 스타일을 재활용하기 위한 목적이고 @function은 원하는 값으로 처리하기 위한 목적으로 사용한다.

 

 

색상 내장 함수

• mix($color1, $color2) : color1과 color2를 섞어준다.
• lighten($color, 10%) : color의 밝기를 %만큼 밝게 해준다.
• darken($color, 10%) : color의 밝기를 %만큼 어둡게 해준다.
• saturate($color, 10%) : color의 채도를 %만큼 높여준다.
• desaturate($color, 10%) : color의 채도를 %만큼 낮춰준다.
• grayscale($color) : color를 grayscaling해준다.
• rgba($color, 0.5) : color의 투명도를 조절할 수 있다.

 

 

가져오기

@import './sub.scss', './sub2.scss';

 

@each

list, map 형태의 데이터를 @each를 통해 순회해서 값을 설정할 수 있다

$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);

@each $k, $v in $map {
  .box-#{$k} {
    color: $v;
  }
}

 

 

@content

@mixin으로 정의된 내용에서 @content를 통해 내용을 추가할 수 있다.

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}

.box {
  width: 200px;
  height: 300px;

  @include left-top {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

 

 

✍️ 소감

이번 주차는 무심코 지나칠 수 있는 자바스크립트 개념을 되짚어보고, SCSS의 사용법을 자세히 익힐 수 있었다.

자바스크립트에서 변수와 함수를 선언할 때 발생하는 호이스팅, 그리고 원시 데이터와 참조 데이터의 불변성으로 인한 복사에 대한 개념을 다시 한 번 상기할 수 있었다.

또한 SCSS를 배우면서, 기존의 표준 CSS에서 반복되는 선택자와 설정들을 재활용하고, 내장 함수를 통해 표준 CSS보다 간결하고 편리하게 스타일을 작성할 수 있다는 것을 알게 되었다.