VS Code로 Sass를 컴파일하는 방법

Sass는 CSS보다 코드 설명을 짧게 끝낼 수 있습니다.
그러나 컴파일이라는 처리를 통해 css로 변환해야합니다.
시스템에 익숙하지 않은 사람들에게 Sass를 컴파일하기위한 환경 구축이 좌절하기 쉽습니다.
그래서, Visual Studio Code 라면 손쉽게 환경을 만들 수 있습니다.

Vs Code에서 Live Sass Compiler 확장 프로그램 추가 및 활성화

VScode 하단의 Watch Sass 를 클릭하고 확장자의 .sassファイル 를 만들고 저장합니다.

Sass를 작성하는 방법을 간략하게 소개

SassMeister은 Sass 기법으로 작성한 코드를 즉시 CSS로 변환하는 도구입니다.
왼쪽이 sass 쓰면 오른쪽이 css에 표시됩니다.

중첩(중첩)

Sass에서는 다음과 같이 중첩하여 스타일을 작성할 수 있습니다.
구조가 파악하기 쉬워집니다.

Sass

.content {
  h1 {
    font-size: 20px;
    background: #000;
    color: #fff;
  }
  p {
    font-size: 16px;
    background: #fff;
    color: #000;
  }
}

CSS

.content h1 {
  font-size: 20px;
  background: #000;
  color: #fff;
}
.content p {
  font-size: 16px;
  background: #fff;
  color: #000;
}

상위 선택기 참조(&)

선택기에 「&」를 사용하면 중첩 된 상위 선택기를 참조 할 수 있습니다.
아래와 같이 중첩이 깊어져도 상위 선택기를 참조할 수 있습니다.

Sass

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
  .btn-web & {
    font-weight: normal;
  }
}

CSS

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.btn-web a {
  font-weight: normal;
}

변수(＄)를 사용할 수 있다

변수는 반복 사용하는 컬러 코드 등을 정의하면 몇 번이라도 간단하게 이용할 수 있는 기능입니다.

Sass

//変数の宣言
$white: #fff;
$black: #000;

#main {
  color: $white;//変数の使用
  background-color: $black;
  a {
    color: $white;
    border-bottom: 4px solid $black;
  }
}

CSS

#main {
  color: #fff;
  background-color: #000;
}
#main a {
  color: #fff;
  border-bottom: 4px solid #000;
}

믹스 인 @mixin

이것은, 자주(잘) 사용하는 스타일을 미리 변수로서 정의해 두고, 원할 때 호출해, 사용 돌리는 기능입니다.

Sass

@mixin square($w,$h){
  width: $w;
  height: $h;
}
.box1 {
  @include square(200px,180px);
}
.box2 {
  @include square(200px,200px);
}
.box3 {
  @include square(100px,100px);
}

CSS

.box1 {
  width: 200px;
  height: 180px;
}

.box2 {
  width: 200px;
  height: 200px;
}

.box3 {
  width: 100px;
  height: 100px;
}

　정리

Sass의 편리한 기능을 사용하면,
깨끗한 코드도 정리할 수 있고, 정보 사이트의 작업 효율도 올라간다고 생각합니다.
꼭 Vscode로 써 봅시다.