less簡單入門

官網地址

http://lesscss.org/

less手冊

www.lesscss.net/

bootstrap官網less介紹 

http://www.bootcss.com/p/lesscss/

一、瀏覽器端環境搭建

github下載地址：https://github.com/less/less.js

1、js引入

搭建Less的學習環境非常簡單，只需在</body>標簽前通過<script type="text/javascript" src="less.js"></script>引入處理器即可實現瀏覽器端中將less預編譯為css樣式。

更有效的方式是通過如下代碼監測less樣式，自動編譯為css樣式，從而減少我們修改less代碼后需按F5后才看到實際效果的繁瑣步驟。

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

Note:注意你的less樣式文件一定要在引入less.js前先引入。

2、less的css樣式處理

less內聯樣式和外聯樣式

基於我們現在使用的是瀏覽器端進行預編譯，因此Less可用於內聯樣式和外聯樣式當中。

內聯樣式如下：

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

外聯樣式引入如下：

Note:注意rel的值是stylesheet/less

<link rel="stylesheet/less" type="text/css" href="文件.less"/>

二、語法

1、注釋

// 單行注釋，不會作為最終輸出
/* 
    多行注釋，以原生CSS的/*注釋....*/形式作為最終輸出
 */

2、變量

 Less中的變量有以下規則：

1. 以@作為變量的起始標識，變量名由字母、數字、_和-組成
2. 沒有先定義后使用的規定；
3. 以最后定義的值為最終值；
4. 可用於rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接；
5. 定義時 "@變量名: 變量值;" 的形式；引用時采用 "@變量名" 或 "@{變量名}" 的形式；
6. 存在作用域，局部作用域優先級高於全局作用域。

Note:注意直接拷貝網頁中代碼可能因為一些空白符的原因導致編譯出錯。

less源碼

  @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;
}

 

三、gulp編譯less

1、安裝

全局安裝：npm install -g less

項目內安裝：npm install gulp-less --save-dev

2、使用

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']);
});

 

參考：

http://www.cnblogs.com/fsjohnhuang/p/4187675.html

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/5226739.html有問題歡迎與我討論，共同進步。