天天看點
傳回

系統學習——Less

文章目錄

    • 概覽
      • 什麼是 CSS 預處理器？
      • Less 簡介
      • 變量
      • 混合
      • 嵌套規則
      • 函數 & 運算
    • less的安裝和使用
      • 用戶端
        • 用戶端使用
        • 監視模式
      • 服務端
        • 服務端安裝
        • 伺服器端Less的使用
    • 文法
      • 注釋
      • 變量
        • 基本使用
        • 用變量名定義為變量
      • 混合
        • 基礎混合
        • 帶參混合
        • @arguments 變量
      • 模式比對
        • 簡單參數比對
        • 導引
        • 常見的檢測函式
        • 更多檢測函式
        • 邏輯運算
      • 嵌套規則
      • 運算
      • Color 函數

概覽

什麼是 CSS 預處理器？

  • 定義：CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的程式設計語言，為 CSS 增加了一些程式設計的特性，将 CSS 作為目标生成檔案，然後開發者就隻要使用這種語言進行編碼工作。
  • Less 是CSS預處理器之一。
  • 簡而言之：CSS 預處理器用一種專門的

    程式設計語言

     ，進行 Web 頁面樣式設計，然後再

    編譯

     成正常的 CSS 檔案，以供項目使用。CSS 預處理器為 CSS 增加一些程式設計的特性，無需考慮浏覽器的相容性問題，例如你可以在 CSS 中使用

    變量

     、

    簡單的邏輯程式

     、

    函數

     等等在程式設計語言中的一些基本特性，可以讓你的 CSS 更加簡潔、适應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
  • 常見的CSS預處理器語言：LESS、Sass（SCSS）、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS

Less 簡介

  • LESS 賦予了 CSS 動态語言的特性，如

    變量

     ，

    繼承

     ，

    運算

     ，

    函數

     。LESS 既可以在 用戶端 上運作 (支援IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務端運作。 
    /*  LESS */
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 
 /* 編譯為css */
 #header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

變量

  • 變量允許我們單獨定義一系列 通用 的樣式，然後在需要的時候去調用。是以在做 全局樣式 調整的時候我們可能隻需要修改幾行代碼就可以了。 
    /* 定義變量 bgcolor 設定值為 #4D926F */
@bgcolor: #4D926F; 

#header {
  background: @bgcolor;
}

/* 編譯為css */
#header {
  background: #4D926F;
}

混合

  • 混合可以将一個定義好的class A輕松的引入到另一個class B中，進而簡單實作class B

    繼承

     class A中的

    所有屬性

     。我們還可以帶

    參數

     地調用，就像使用函數一樣。 
    .rounded-corners (@radius: 5px) { // 定義函數,并設定參數預設值
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners; // 不傳參引用
}
#footer {
  .rounded-corners(10px); // 傳參引用
}

/* 編譯為css */ 
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

嵌套規則

  • 我們可以在一個選擇器中

    嵌套

     另一個選擇器來實作

    繼承

     ，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。 
    #header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* 編譯後 */
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

函數 & 運算

  • LESS中的函數一一映射了

    JavaScript

     代碼，如果願意的話可以操作屬性值。
  • 運算提供了 加，減，乘，除 操作；我們可以做

    屬性值和顔色

     的運算，這樣就可以實作屬性值之間的複雜關系。 
    @the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3; // 乘法運算
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300; // 加法運算
  border-color: desaturate(@red, 10%); // 預定義顔色函數
}

/* 編譯為css */
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

less的安裝和使用

用戶端

用戶端使用

  • 引入你的

    .less

     樣式檔案的時候要設定

    rel

     屬性值為

    stylesheet/less

     ： 
    <link rel="stylesheet/less" type="text/css" href="styles.less">
  • 接着 下載下傳less.js，并在

    <head>

     标簽中引入

    less.js

     ， 
    <script src="less.js" type="text/javascript"></script>
<!-- 如果不想下載下傳就使用下面這種方式 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
  • 注意: 你的less樣式檔案一定要在引入less.js前先引入。 備注：請在伺服器環境下使用！本地直接打開可能會報錯！

監視模式

  • 監視模式是用戶端的一個功能，這個功能允許你當你改變樣式的時候，用戶端将自動重新整理。
  • 要使用它，隻要在URL後面加上

    #!watch

     ，然後重新整理頁面就可以了。另外，你也可以通過在終端運作

    less.watch()

     來啟動監視模式。

服務端

服務端安裝

  • 最簡單的方式是通過 npm(node 的包管理器) 
    $ npm install less

// 下載下傳最新穩定版本的 LESS，
$ npm install [email protected]

    NPM

     的全稱是 Node Package Manager ，是一個 NodeJS包管理和分發工具，已經成為了非官方的釋出Node子產品（包）的标準。

伺服器端Less的使用

  • 隻要安裝了 less，就可以在Node中像這樣調用編譯器: 
    var less = require('less');

less.render('.class { width: 2 + 3 }', function (e, css) {
    console.log(css);
});
    輸出： 
    .class {
  width: 5;
}
  • 也可以手動調用解析器和編譯器: 
    var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});
  • 配置：向解析器傳遞參數 
    var parser = new(less.Parser)({
    paths: ['.', './lib'], // 指定 @import 指令的搜尋路徑
    filename: 'style.less' // 指定檔案名，以獲得更好的錯誤消息
});

parser.parse('.class { width: 2 + 3 }', function (e, tree) {
    tree.toCSS({ compress: true }); // 開啟CSS壓縮
});

  • 在指令行下使用

    在終端調用 LESS 解析器:

    $ lessc styles.less
    上面的指令會将編譯後的 CSS 傳遞給 stdout, 你可以将它儲存到一個檔案中: 
    $ lessc styles.less > styles.css

文法

注釋

  • CSS注釋：CSS 形式的注釋在 LESS 中是依然保留的。 
    /* 你好,這裡是Less中的一種注釋,保留CSS注釋形式 */
.class { color: black }
  • less注釋：LESS 同樣也支援雙斜線的注釋, 但是編譯成 CSS 的時候自動過濾掉。 
    // 你好我是一個單行注釋, 在編譯成CSS檔案是我将被過濾掉
.class { color: white }

變量

基本使用

  • LESS中也可以設定變量，然後通過變量可以改變整個網站的設計風格。良好的掌握LESS中變量的用法，是LESS的基礎。
  • 使用方法：在“

    @

     ”後添加變量名稱然後與變量值用冒号“

    :

     ”連結。 
    @nice-blue: #5B83BE;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

/** 編譯為css之後 **/
#header { color: #6C94CF; }

用變量名定義為變量

  • 示例： 
    @loen: "I am loen.";
@var: 'loen';

content: @@var;

/** 編譯為css之後 **/
content: "I am loen.";
  • 解析：

    @@var

     中的

    @var

     編譯後變為

    loen

     ，此時less代碼變為

    content: @loen

     ，而

    @loen

     則被認為是另一個變量，其值為

    I am loen.

     ，是以最終的結果如上所示。
注意: LESS 中的變量為完全的 ‘常量’ ，是以隻能定義一次。

混合

基礎混合

  • 在 LESS 中我們可以定義一些 通用 的屬性集為一個class，然後在另一個class中去調用這些屬性。 
    .bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
  • 如果我們現在需要在其他class中引入通用的屬性集，那麼我們隻需要在任何class中像下面這樣調用就可以了: 
    #menu a {
  color: #111;
  .bordered; //引用屬性集
}
.post a {
  color: red;
  .bordered; //引用屬性集
}

/** 編譯後的css **/
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
    任何 CSS

    class

     ,

    id

     或者

    元素

     屬性集都可以以同樣的方式引入.

帶參混合

  • 在 LESS 中，還可以像函數一樣定義一個帶參數的屬性集合: 
    .border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
  • 調用： 
    #header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

/** 編譯為css **/
#header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
  • 參數數設定預設值 
    .border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
  • 調用： 
    #header {
  .border-radius;  
}

/** 編譯為css **/
#header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

@arguments 變量

  • 如果屬性集合需要傳進來的參數比較多, 你又不想單獨處理每一個參數的話,可以使用

    @arguments

     .

    @arguments

     包含了所有傳遞進來的參數。類似于javascript中函數的預設參數

    argument[]

     。 
    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

#leftbox {
.box-shadow(2px, 5px);
}

/** 編譯為css後 **/
#leftbox {
  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
}
    @arguments 儲存了所有參數通過

    空格

     隔開的字元串

模式比對

簡單參數比對

  • 有些情況下，我們想根據傳入的參數來改變混合的預設呈現： 
    .mixin (dark, @color) {
  color: darken(@color, 10%); // darken 是Less自帶的函數用以計算顔色的深色
}
.mixin (light, @color) {
  color: lighten(@color, 10%); // lighten 計算顔色的淺色
}
.mixin (@_, @color) {// @_ 接受任意值
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

/** 編譯為css後 **/
.class {
  color: #a2a2a2;
  display: block;
}
    原理：.mixin就得到傳入的是

    light

     ，第一個混合定義并未被比對，因為它隻接受

    dark

     做為首參。第二個混合定義被成功比對，因為它隻接受

    light

     。第三個混合定義被成功比對，因為它接受任意值，隻有被比對的混合才會被使用。變量可以比對任意的傳入值，而變量以外的固定值就僅僅比對與其相等的傳入值。
    當然傳參也不限定于一個，可以多個不定的參數。

導引

  • 當我們想根據 表達式 進行比對，而非根據 值和參數 比對時，導引就顯得非常有用。
    在 c,php 等程式設計語言中,條件判斷一般使用

    if/else

     實作 Less 為了盡可能地保留CSS的

    可聲明性

     ，通過導引混合而非if/els e語句來實作條件判斷，因為Less已在 @media query特性中被定義。 
    //when關鍵字用以定義一個導引序列
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

/** 編譯為css後 **/
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}
  • 導引中可用的全部比較運算有：

    > >= = =< <

     。此外，關鍵字

    true

     隻表示布爾真值，下面兩個混合是相同的： 
    .truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

//除去關鍵字true以外的值都被視示布爾假：
.class {
  .truth(40); // 将不比對以上定義
}
  • 導引序列使用逗号

    ,

     分割，隻要有一個符合條件就會執行
  • 導引可以無參數，也可以對參數進行比較運算： 
    @media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
  • 最後，如果想基于

    值的類型

     進行比對，可以使用

    is*

     函式： 
    .mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

常見的檢測函式

  • iscolor isnumber isstring iskeyword isurl
  • 示例： 
    .mixin (@a, @b: 0) when (isnumber(@b)) {
    width: @a px;
    height: @b px;
}
.mixin (@a, @b: black) when (iscolor(@b)) {
    color: @a;
    background-color: @b;
}
// 調用
.nav {
.mixin(100,100);
}
.banner {
.mixin(#333,#efefef);
}

/** 編譯為css後 **/
.nav {
  width: 100 px;
  height: 100 px;
}
.banner {
  color: #333;
  background-color: #efefef;
}

更多檢測函式

  • ispixel ispercentage isem
  • 示例： 
    .mixin (@a, @b: 0) when (ispixel(@b)) {
    width: @a;
    height: @b;
}
.mixin (@a, @b: 50%) when (ispercentage(@b)) {
    max-width: @a;
    max-height: @b;
}
// 使用
.nav {
.mixin(100px,100px);
}
.banner {
.mixin(80%,60%);
}

/** 編譯為css後 **/
.nav {
  width: 100px;
  height: 100px;
}
.banner {
  max-width: 80%;
  max-height: 60%;
}

邏輯運算

  • and

     運算符 ，相當于

    與

     運算

    &&

     ，必須條件全部為 true才會執行 
    .mixin (@a) when (isnumber(@a)) and (@a > 0) {
    z-index: @a;
}

.leftbox {
.mixin(12);
}

/** 編譯為css後 **/
.leftbox {
  z-index: 12;
}

  • ,

     逗号分隔符：相當于

    或

     運算

    ||

     ，隻要有一個條件為true 就會執行 
    .font(@size:20px) when (@size>50px) , (@size<100px){
    font-size: @size;
}

.desc{
	.font(6px);
}
/** 編譯為css後 **/
.desc{
	font-size:6px;
}

  • not

     運算符，相當于

    非

     運算

    !

     ，進行取反操作, 是以當條件為false, 就會執行 
    .mixin (@b) when not (@b > 0) {
    left: @b;
}

.gameball {
.mixin(-15);
}

/** 編譯為css後 **/
.gameball {
  left: -15;
}

嵌套規則

  • 使用嵌套規則可以使樣式代碼看起來更具有層次感。 
    /** css代碼 **/
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

// less
#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}
  • &：如果寫 串聯選擇器 ，而不是寫後代選擇器，就可以用到&了。這點對僞類尤其有用如

    :hover

     和

    :focus

     。 
    .bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

/** 編譯為css**/
.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

運算

  • 任何數字、顔色和變量都可以進行運算。 
    @base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
  • LESS 的運算已經超出了我們的期望，它能夠分辨出顔色和機關。括号也同樣允許使用。并且可以在複合屬性中進行運算。 
    @var: 1px + 5;
/* 6px */

width: (@var + 5) * 2;
/* width:22px; */

border: (@width * 2) solid black;
/* border: 44px solid black; */

Color 函數

  • LESS 提供了一系列的顔色運算函數. 顔色會先被轉化成 HSL 色彩空間, 然後在通道級别操作： 
    lighten(@color, 10%);     // 傳回比 @color 亮 10％的顔色
darken(@color, 10%);      // 傳回比 @color 暗 10％的顔色

saturate(@color, 10%);    // 飽和度增加 10%
desaturate(@color, 10%);  // 飽和度減少 10%

fadein(@color, 10%);      //透明度減少 10%
fadeout(@color, 10%);     // 透明度增加 10%
fade(@color, 50%);        // 設定透明度 50%

spin(@color, 10);         // 傳回顔色比@color大10度的顔色
spin(@color, -10);        // 傳回比@color小10度的顔色

mix(@color1, @color2);    // 傳回 @color1 和 @color2 的混合
  • 在一種顔色的通道上建立另一種顔色： 
    hue(@color);        // 傳回@color的 hue 頻道
saturation(@color); // 傳回@color的 飽和度 通道
lightness(@color);  // 傳回@color的 亮度 通道

@new: hsl(hue(@old), 45%, 90%);

注：未完待續。

系統學習 less
上一篇: springMVC 系統學習 day01
下一篇: 沒法掌控自己的命運，但自己的體重我還不能掌控了，不就那麼幾斤肉嗎

繼續閱讀