몇 분 안에 덜 배우십시오

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

컴파일러

Less는 컴파일된 언어이므로 컴파일하려면 도구를 사용해야 합니다(컴파일하는 방법과 컴파일러도 많습니다). 이 경우 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.less";

중첩
중첩은 배치 대신

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.
.font-size {
  font-size: 1.6rem;
  font-weight: 100;
}

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

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