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

高洛峰
풀어 주다: 2017-03-17 10:30:34
원래의
1768명이 탐색했습니다.

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

적은 도입 및 편집 도구

적은 것

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

컴파일 도구 감소

  1. Koala Koala--컴파일 중에 생성된 CSS 폴더가 없으면 Koala가 자동으로 폴더를 생성합니다.
    언어 설정 방법
    使用less(变量,混合,匹配,运算,嵌套)的方法介绍
    컴파일 방법
    - 使用less(变量,混合,匹配,运算,嵌套)的方法介绍

  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 class="one">
    <p class="two"></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

      관련 라벨:
      원천:php.cn
      본 웹사이트의 성명
      본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
      인기 튜토리얼
      더>
      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!