Less를 활용하는 방법 소개(변수, 혼합, 매칭, 연산, 중첩)

덜 사용하는 방법과 자주 사용하는 것(변수, 혼합, 매칭, 연산, 중첩)

적은 도입 및 편집 도구

적은 것

1.LESSCSS는 동적 스타일 언어로 CSS 전처리 언어의 일종으로 CSS와 유사한 구문을 사용하며 CSS에 변수, 상속 등 동적 언어의 특성을 부여합니다. 작업, 함수 등을 사용하여 CSS를 더 쉽게 작성하고 유지 관리할 수 있습니다.
LESSCSS는 브라우저, 데스크톱 클라이언트, 서버 등 다양한 언어와 환경에서 사용할 수 있습니다.

컴파일 도구 감소

1. Koala Koala--컴파일 중에 생성된 CSS 폴더가 없으면 Koala가 자동으로 폴더를 생성합니다.
   언어 설정 방법
   
   컴파일 방법
   -

2. Webstorm이 덜 컴파일을 지원하도록 허용:

• 설치node.js --- 앞으로 사용할 패키지 관리 도구입니다

• WIN+ R

• npm install less 입력

....

less

구문 Ps: 다음 지식 포인트는 위의 지식 포인트를 사용합니다(예를 들어 인상을 깊게 하기 위해 변수를 혼합에 사용합니다^_^)

1. 댓글

• // Less에만 표시
  

• /**/ 컴파일하는 동안 컴파일됩니다. 좋은 CSS 파일은

변수

• 적은 작성 방법>

  을 표시합니다. 컴파일 후 CSS에 표시되는 Mixing
은 테두리 반경 호환

@ly_width:100px;
.box {
width:@ly_width;
}

을 해결합니다. 메소드

.box {
width:100px;
}

컴파일 후 CSS에 표시되는 것은

.border_radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

적은 것은

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border();
}

로 작성됩니다.

• 컴파일 후 CSS에 표시되는 내용은

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 3px solid #ff0000;
  }

먼저 less에 코드를 업로드합니다. .one에서 .border 스타일을 적용하려면?

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border(1px);
}

• 는 다음과 같이 작성됩니다.

  .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 1px solid #ff0000;
  }

• 컴파일 후 CSS에 표시되는 내용은

매개변수 없이 혼합
매개변수와 혼합---기본값 없이(여러 매개변수) 쉼표나 세미콜론으로 전달할 수 있습니다. 구분, 세미콜론 사용을 권장합니다. 아래는 하나의 매개변수를 예시로 나타냅니다.)

• 
  .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }매개변수와 혼합---기본값 사용(여러 매개변수 가능) 아래는 매개변수 1개를 예시로 전달합니다.)

• 매칭 패턴

• less의 작성 방법은

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  }

• 이며 컴파일 후 CSS에 표시되는 것은

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border;
  }

위의 믹싱과 다소 비슷하다고 이해하시면 됩니다

• 조작

• less

  //定义上,下,左,右边框的样式
  .border(top;@border_width:5px;@border_color:red){
  border-top:@border_width solid @border_color;
  }
  .border(bottom;@border_width:5px;@border_color:red){
  border-bottom:@border_width solid @border_color;
  }
  .border(left;@border_width:5px;@border_color:red){
  border-left:@border_width solid @border_color;
  }
  .border(right;@border_width:5px;@border_color:red){
  border-right:@border_width solid @border_color;
  }
  //如果想写通用的样式 可以在下面的代码中写 格式是固定的 
  .border(@_,@border_width:5px;@border_color:red){
  border-color:yellow;
  }
  .border_use1 {
  //选择和if差不多 如果是left就调用上面对应的
  .border(left);
  }
  .border_use2 {
  //选择和if差不多 如果是right就调用上面对应的
  .border(right);
  }

컴파일 후 CSS에 표시되는 내용은

• .border_use1 {
  border-left:5px solid #ff0000;
  border-color:yellow;
  }
  .border_use2 {
  border-right:5px solid #ff0000;
  border-color:yellow;
  }

추가 기능을 제공하는 작업입니다. 뺄셈, 곱셈, 나눗셈 연산을 할 수 있으며 속성 값과 색상 연산도 가능합니다...

• 중첩

• html 구조

  @ly_width:100px;
  .one {
  width:@ly_widht + 100;
  }

less의 작성 방법은

• .one {
  width:200px;
  }

이며 컴파일 후 CSS에 표시되는 것은

<p>
</p><p></p>

을 선택할 수 있습니다. 다른 선택자가 선택자에 중첩되어 있으며 코드가 명확하게 계층적으로 표시되어 코드 유지 관리가 향상됩니다
• @arguments 변수

• less

  @ly_width:100px;
  @ly_height:200px;
  @ly_color:red;
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .two {
      background-color: green;
  }
  }

의 작성 방법은 컴파일 후 CSS에 표시되는

• .one {
  width: 100px;
  height: 200px;
  background-color: #ff0000;
  }
  .one .two {
    background-color: green;
  }

은 모든 변수를 포함할 수 있고, 변수를 함께 처리할 수 있습니다.

위 내용은 Less를 활용하는 방법 소개(변수, 혼합, 매칭, 연산, 중첩)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!