몇 분 만에 Sass 배우기

CSS 전처리기는 배우기가 매우 쉽고 각각 비밀이 있지만 사용법은 표준 CSS와 매우 유사합니다. 물론 전처리기가 무엇인지 모를 경우 컴파일해야 한다는 차이점이 있습니다.

왜 Sass를 배워야 할까요?

Sass는 탁월한 전처리기이며 회사에서 가장 많이 사용하고 프런트 엔드 개발자가 가장 많이 수용합니다.

컴파일러

Sass는 컴파일된 언어이므로 컴파일하려면 도구를 사용해야 합니다(컴파일하는 방법도 많고 컴파일러도 많습니다). 이 경우 Prepross를 사용하겠습니다.

prepross를 설치하려면 here.을 입력해야 합니다.



운영 체제를 선택한 다음 설치 프로그램을 실행하고 완료되면 프로젝트를 컴파일러로 드래그하여 바인딩하면 컴파일러가 생깁니다. less, sass, stylus 및 pug와 같은 다른 전처리기에 사용할 수 있습니다. .

Sintaxis

변수 사용:

///variables
$primary-color: #050a30

main {
  background-color: $primary-color; 
}

수입품:
전처리기에서 중첩은 코드를 변조하고 읽기 쉽게 만들기 위해 많이 사용됩니다.

///Do we place to import styles?
@import "./style/desktop.scss";

이것을 배치하는 대신 중첩이 사용됩니다.

main, p {
 font-size: 1.6rem;
}

이것은 읽기를 용이하게 하고 더 효율적으로 만들기 위해 배치됩니다.

main{
  p {
    font-size: 1.6rem;
  }
}

///With BEM methodology
///what & does is take the name of the parent and put it there so the converted would be about__text, use it it will save you a long time

about {
  &__text {
     p {

     }
  {
}

혼합:
스타일을 재사용하기 위해 변수 안에 스타일을 배치하는 것입니다.

///We put it in the place of the variables.
@mixin font-size {
  font-size: 1.6rem;
  font-weight: 100;
}

// It would be placed inside the styles.
main {
   p {
      @include font-size;
   }
}

루프: 그들이 하는 일은 요소가 있는 만큼 여러 번 작업을 실행하는 것입니다.

//You can add as many parameters as you want.

@each $parameter-1 in ($parameter-1, h2(example)) {
  #($parameter-1) {
    font-size: 3.2rem
  }
}

기능: 믹스인과 거의 동일하게 작동하며 유사하게 사용됩니다.

@funcion nombre-funcion(parameter) {
        @return text-aling(parameter);        
}

조건부: 더 이상 사실이 아닐 때까지 작업이 수행되도록 서비스를 제공합니다.

///Functions are placed inside a mixin.

@mixin name-mixin(parameter(optional)) {
        @if condition {
            action
        } @else {
            action
        }
}

Sass에는 여전히 발견할 수 있는 더 많은 비밀이 있지만 지금은 기본 수준에서 프로젝트에서 Sass를 사용할 수 있습니다. 또한 저를 팔로우하여 학습 및 Pug에 대한 게시물을 확인하는 것이 좋습니다.