less 단순 입문(CSS 전처리 언어)

Less 는 CSS 예비 처리 언어 로 CSS 언어 를 확장 하고 변수,혼합(mixin),함수 등 기능 을 추가 하여 CSS 를 쉽게 유지 하고 주 제 를 만 들 며 확장 할 수 있 도록 합 니 다.
Less 는 Node,브 라 우 저,Rhino 플랫폼 에서 실행 할 수 있 습 니 다.인터넷 에는 Less 소스 코드 를 컴 파일 하 는 데 도움 을 주 는 제3자 도구 가 많다.
홈 페이지 주소
http://lesscss.org/
less 수첩
www.lesscss.net/
boottstrap 홈 페이지 less 소개
http://less.bootcss.com/
1.브 라 우 저 엔 드 환경 구축
github 다운로드 주소:https://github.com/less/less.js
1.js 도입
Less 를 구축 하 는 학습 환경 은 매우 간단 합 니 다.태그 전에프로 세 서 를 도입 하면 브 라 우 저 에서 less 를 css 스타일 로 미리 컴 파일 할 수 있 습 니 다.
더욱 효과 적 인 방법 은 다음 과 같은 코드 를 통 해 less 스타일 을 감 측 하고 css 스타일 로 자동 으로 컴 파일 하여 우리 가 less 코드 를 수정 한 후에 F5 를 눌 러 야 실제 효 과 를 볼 수 있 는 번 거 로 운 절 차 를 줄 이 는 것 이다.

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

참고:less 스타일 파일 은 반드시 less.js 를 도입 하기 전에 먼저 도입 해 야 합 니 다.
2.less css 스타일 처리
less 내 연 스타일 과 외 연 스타일
현재 사용 하고 있 는 브 라 우 저 를 기반 으로 사전 컴 파일 을 진행 하고 있 기 때문에 Less 는 내부 연결 스타일 과 외부 연결 스타일 에 사용 할 수 있 습 니 다.
내 연 스타일 은 다음 과 같 습 니 다:

<style type="text/less">
 // less   
</style>

외연 스타일 도입 은 다음 과 같 습 니 다.
참고:rel 의 값 은 stylesheet/less 입 니 다.

문법
1.주석

//     ，        
/* 
    ，   CSS /*  ....*/        
*/

변수
Less 의 변 수 는 다음 과 같은 규칙 이 있 습 니 다.@을 변수의 시작 표지 로 하고 변수 이름 은 자모,숫자,결성
먼저 정 의 된 후에 사용 하 는 규정 이 없다.
마지막 으로 정 의 된 값 을 최종 값 으로 합 니 다.
rule 값,rule 속성,rule 속성 위 젯,선택 기 위 젯,문자열 연결 에 사용 할 수 있 습 니 다.
정의 할 때"@변수 이름:변수 값;"의 형식인용 할 때'@변수 이름'이나'@{변수 이름}'형식 을 사용 합 니 다.
역할 영역 이 존재 하고 국부 역할 영역 우선 순위 가 전체 역할 영역 보다 높 습 니 다.
참고:웹 페이지 의 코드 를 직접 복사 하 는 것 은 공백 문자 로 인해 컴 파일 이 잘못 되 었 을 수 있 습 니 다.
리 스 소스 코드

@color: color;
 @dialog: .dialog;
 @suffix: fix;
 //       ，                  
 @hi: 'hello ';
 @dear: there ;
 
 .dialog{
 //    rule    ，    "@{   }"    
 background-@{color}: #888;
 //    rule  ，    "@{   }"    
 @{color}: blue;
 }
 //       ，    "@{   }"    
 @{dialog}{
 width: 200px;
 }
 @{dialog}::after{
 content: ': @{hi}@{dear}!'; //         ，    "@{   }"    
 }
 @h: 1000px;
 //         ，    "@{   }"    
 .ie-@{suffix}{
 @h: 30px; //      ，               。
 height: @h; //       ，        
 line-height: 30px;
 }
 
 // 1.  @         ，      、  、_ -  
 // 2.            ；
 @dialog-border-color: #666;
 @dialog-border-width: 10px;
 @dialog-border-width: 1px; // 3.            ；

최종 출력:

.dialog {
 background-color: #888;
 color: blue;
}
.dialog {
 width: 200px;
}
.dialog::after {
 content: ': hello there!';
}
.ie-fix {
 height: 30px;
 line-height: 30px;
}

3.gulp 컴 파일 less
1.설치
전역 설치:npm install -g less프로젝트 내 설치:npm install gulp-less --save-dev2.사용

var gulp=require("gulp");
var less=require("gulp-less");


gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

//       
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});

참고:https://www.jb51.net/article/107875.htm