2.1 less 사용 요약

Less는 동적 양식 언어로 CSS 언어를 확장하고 변수, 혼합(mixin), 함수 등 기능을 추가하여 CSS를 더욱 쉽게 유지하고 주제를 제작하며 확장할 수 있도록 한다.
1.0 클라이언트 사용
다운로드 주소
less 스타일 가져오기

외부 연결 양식이 당신에게 도입되었습니다.less 스타일 파일의 경우 rel 속성 값을 "stylesheet/less"로 설정합니다:

내연 양식은 다음과 같다:

다음less.js는 탭을 통해 페이지의 요소에 도입합니다:

1.1 변수
Less의 변수는 스타일의 어느 곳에서 자주 사용하는 값을 정의한 다음에 스타일에 적용합니다. 이렇게 하면 당신이 정의한 변수 매개 변수의 값을 바꾸면 전체적인 효과를 바꿀 수 있습니다.

@base:red;
body{color:@base}

1.2 블렌드
LESS에서 우리는 일반적인 속성 집합을 하나의class로 정의한 다음에 다른class에서 이 속성을 호출할 수 있다

.bordered {
  border-top: solid 1px red;
  border-bottom: solid 2px green;
}
.div1 {
  color: #111;
  .bordered;
}
.div2 {
  color: red;
  .bordered;
}

1.3 패라메트릭 블렌드
LESS에서 당신은 함수처럼 매개 변수를 가진 속성 집합을 정의할 수 있습니다

.border-radius (@radius: 5px) {
     border:1px solid red;
     border-radius: @radius;
     width:300px;
}
.div1 {
    .border-radius(0px);
}
.div3 {
    .border-radius;
}
.div2 {
    .border-radius(20px);
}

1.4 arguments
@arguments는 Mixins에서 아주 특별한 매개 변수입니다. Mixins가 이 매개 변수를 인용할 때 모든 변수를 표시합니다.

.pad(@top,@right,@bottom,@left) {
  padding:@arguments;
}
div{
  width:400px;
  border:1px solid red;
  .pad(10px,50px,100px,40px)
}
p
{
  background-color: green;
}

1.5 리드 표현식
우리가 표현식에 따라 일치하는 것이지 값과 파라미터에 따라 일치하는 것이 아니라면 인용은 매우 유용하다.

.mixin (@a) when (@a =red) {
  background-color: red;
}
.mixin (@a) when (@a =green) {
  background-color: green;
}
.mixin (@a) {
  color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }

1.6 중첩 규칙
LESS는 레이어드 스타일을 중첩된 방식으로 작성할 수 있습니다.

#dvi1 {
  color: red;

  p {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {
      text-decoration: none
    }
  }
}

주의 & 기호 사용 - 후대 선택기를 쓰지 않고 직렬 선택기를 쓰고 싶으면 & 를 사용할 수 있습니다.이 점은 위류에 특히 유용하다. 예를 들어hover와:focus, & 상위 원소를 나타낸다.(& js의this와 유사);
1.7 @import 가져오기 옵션

@import은 표준 CSS에서 가져올 수 있으며 @import은 모든 다른 종류의 규칙보다 먼저 가져와야 합니다.하지만 Less.js는 무관심하다.

example:

.test(){
    color:#ff6a00;
}
.study{
    .test;
}

@import "studyLess.css";

//output css
@import "studyLess.css";
.study {
  color: #ff6a00;
}

@import은 파일 확장명에 따라 다른 방식으로 처리할 수 있습니다.css의 확장자, CSS와 @import 문구로 처리됩니다.다른 확장자를less 가져오기로 처리합니다.확장자가 없으면 그를 추가할 것입니다.less 확장자,less로 가져옵니다.example: @import "foo";//foo.less를 less 파일로 가져오기@import "foo.less";//foo.less를 less 파일로 가져오기@import "foo.php";//foo.php를less 파일로 가져오기@import "foo.css";//문장을 그대로 유지하고 css 파일로 가져오기

다음 옵션을 사용하여 비헤이비어를 덮어씁니다.문법: @import(keyword) "filename";reference: 이less 파일을 사용하지만 inline을 출력하지 않습니다: 원본 파일에 포함되지만,less 파일을 처리하지 않습니다. 확장자가 왜 css: 파일을 css 파일로 보든지,확장자가 왜든지 상관없이: 이 파일은 한 번만 가져올 수 있습니다. (기본값) 멀티플: 이 파일은 옵션al을 여러 번 가져올 수 있습니다. 파일을 발견하지 못했을 때 컴파일할 수 있습니다.
여러 개의 키워드 @import는 허용됩니다. 키워드를 쉼표로 구분해야 합니다: example: @import (optional,reference) "foo.less".
1.8 LESS 내장 함수:
위에서 설명한 유닛 말고.
ceil(@number);//상향 조정하다
floor(@number);//아래로 치우다
percentage(@number);//부동 소수점 수를 백분율로 변환합니다(예: 0.5-> 50%).
round(number, [places: 0]);//반올림
saturate(@color, 10%);//채도 10% 증가
desaturate(@color, 10%);//채도 10% 감소
lighten(@color, 10%);//밝기 10% 증가
darken(@color, 10%);//밝기 10% 감소
fadein(@color, 10%);//투명도 10% 증가
fadeout(@color, 10%);//투명도 10% 감소