SCSS 소개 🎨

참고: 이 짧은 가이드에서는 SCSS 구문으로만 작업하고 있지만 SASS와 SCSS는 매우 유사하며 거의 모든 예제가 둘 다에 대해 작동합니다.

나는 잠시 동안 SASS에 대해 알고 있지만 순수한 CSS가 충분히 잘 작동한다고 생각했기 때문에 뛰어 들지 않았습니다.

몇 주 동안 SCSS를 사용한 후 제 개인적인 의견은 다음과 같습니다. 순수한 CSS로도 충분하지만 일단 SCSS로 작업을 하게 되면 CSS 코드를 다시 작성하기가 정말 답답합니다...

SCSS는 프런트 엔드 개발자로서의 삶을 더 쉽게 만들어주는 멋진 기능을 테이블에 제공하며 시작하는 데 관심이 있는 모든 사람을 위해 간단한 소개를 작성하고 싶었습니다.

설정

안타깝게도 브라우저는 SCSS를 이해하지 못하므로 SCSS 코드를 사용하려면 먼저 컴파일해야 합니다.

➡️ VSCode 을 사용중이시라면, Live SASS Compiler 을 사용하시면 됩니다.

확장 프로그램이 설치되면 .scss/.sass 파일을 생성하고 Watch SASS 버튼을 클릭할 수 있습니다.



당신은 이미 갈 수 있습니다! 저장할 때마다 변경 사항을 자동으로 컴파일합니다.

➡️ 또 다른 옵션은 SASS 컴파일러를 컴퓨터에 전체적으로 설치하는 것입니다.
npm install -g sass
그런 다음 CLI에서 다음과 같이 SCSS 파일을 컴파일합니다.
sass --watch index.scss index.css
자세한 내용은 공식documentation으로 문의하세요.

➡️ 마지막으로, React 또는 기타 JavaScript 프레임워크를 사용하여 웹 앱을 구축하는 경우 즉시 사용할 수 있습니다.

저는 개인적으로 React로 작업하며 create-react-app 템플릿으로 만든 모든 앱은 기본적으로 SCSS를 지원합니다. 내부적으로 webpack은 sass-loader를 사용하여 SCSS 코드를 컴파일합니다.

특징

➡️ 변수는 CSS에서도 지원되지만 SCSS는 변수를 선언하고 사용하기 위한 훌륭하고 사용하기 쉬운 구문을 제공합니다.

$robotoFont: 'Roboto', sans-serif;
$color: (
  primary: #fff,
  secondary: #000,
);

body {
  font-family: $robotoFont;
  background-color: map-get($color, secondary);
}

변수로 작업하는 것이 얼마나 유용한지 주의를 기울일 필요는 없다고 생각합니다. 코드를 재사용하고 앱에서 공유되는 데이터를 더 쉽게 저장 및 업데이트하세요.

➡️ 중첩은 HTML 요소를 선택하는 새로운 방법을 소개합니다. 상위 요소에서 특정 요소를 목표로 할 수 있습니다.

body {
  margin: 0;

  header {
    background-color: red;

    button {
      width: 200px;
      height: 200px;

      &:hover {
        background-color: blue;
      }
    }
  }
}

이것은 의사 클래스를 사용하는 방법이기도 합니다.

➡️ At-rules는 새로운 기능을 추가합니다. 나는 그들 모두를 다루지는 않을 것이지만 이것을 보여 드리겠습니다.

/* second.scss */
$color: red;

@forward 'second.scss';

/* index.scss */
@use 'second.scss';

body {
  background-color: $color;
}

@forward를 사용하여 SCSS 파일에서 변수와 믹스인(다음에 소개할 기능)을 내보내고 @use를 사용하여 가져옵니다.

➡️ 믹스인을 사용하면 스타일시트에서 재사용할 수 있는 스타일을 정의할 수 있습니다. 믹스인 덕분에 "float-left"또는 "flex-center"와 같은 클래스를 피할 수 있습니다.

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

@mixin formButton($color) {
  border-radius: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: $color;
  border: solid 3px $color;

  &:hover {
    background-color: $color;
    color: #fff;
    cursor: pointer;
  }
}

form {
  @include centerFlex;

  button {
    @include formButton(blue);
  }
}

@mixin을 작성하여 새 스타일을 선언하고 . 더 많은 유연성을 위해 믹스인 선언에 매개변수를 전달하세요 🤸.

➡️ 함수, 조건 및 루프는 사용 가능한 또 다른 강력한 기능입니다. 일반적으로 프로그래밍 언어에 익숙하다면 이 언어가 편할 것입니다.

@function getHeight($width, $ratio) {
  @return $width / $ratio;
}

div {
  width: 200px;
  height: getHeight(200px, 4);
}

@function으로 함수를 선언하고 이름과 괄호(및 선택적 인수)를 사용하여 호출하면 됩니다.

@mixin drawCircleOnly($width, $height) {
  width: $width;
  height: $height;
  @if $width = $height {
    border-radius: 50%;
  } @else {
    display: none;
  }
}

div {
  background-color: black;
  @include drawCircleOnly(100px, 100px);
}

@if 및 . 덕분에 조건부로 코드를 실행합니다. 표현식이 true를 반환하는 경우에만 코드가 실행됩니다.

@for $i from 1 through 5 {
  .section-#{$i} {
    background-color: black;
    width: 10px * $i;
  }
}

루프 덕분에 유사한 코드를 여러 번 작성하지 않아도 됩니다. 카운터를 초기화하고 코드를 한 번만 작성하면 됩니다!

➡️ 보너스! SCSS 코드를 변환할 때 컴파일러는 자동으로 --webkits를 추가하여 더 넓은 브라우저 지원을 제공하므로 생각할 필요가 없습니다. 얼마나 멋진가요?

/* index.scss */
div {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(180deg);
}

/* index.css */
div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

결론

SCSS는 프론트엔드 개발자 툴킷에 훌륭한 추가 기능입니다. 유용한 기능이 있으며 시작하기 쉽습니다. 요즘 점점 더 많은 회사에서 CSS 프리프로세서를 사용하는데 그럴 만한 이유가 있습니다.

즐겁게 읽으셨기를 바랍니다. 곧 뵙겠습니다!