LESS 用法入門

時間 2019-11-10

標籤用法入門简体版

原文原文鏈接

　　本文旨在加深對 LESS 的理解和記憶，供本身開發時參考。相信對沒有接觸過 LESS 的程序員仍是有用的，大佬繞路。javascript

1、安裝和使用 LESScss

　　1.1 安裝html

　　使用命令行安裝 LESS　java

npm install -g less

　　1.2 使用node

　　less 有多種的使用方法，在這裏我向你們介紹最經常使用的倆種方法。程序員

　　第一種是直接在瀏覽器中使用：web

去下載一個你要的 less.js 腳本；
建立一個文件來放置你的樣式，好比說style.less
添加下面的代碼到你的 HTML 的 <head> 中。

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

<script src="less.js" type="text/javascript"></script>

　　請注意「link」的「rel」屬性。你須要在屬性值後面使用「/less」，LESS才起做用。你也須要在「link」樣式表後面引入"script"。若是你正在使用「HTML5」語法，我沒法想像爲何你不會用呢？你能夠少去「type=‘text/css’」和「type='text/javascript'」。npm

　　第二種就是在命令行中使用：　編程

lessc style.less style.css

　　而後會在項目目錄生成 style.css 文件，在 html 中引入便可。若是在編譯過程當中出現錯誤，將會在命令行中提示你。瀏覽器

　　Less 是用 JavaScript 寫的，因此須要額外的 Node.js 或者網頁瀏覽器纔可以運行它。你能夠在你的網站中引入 less.js ，這樣在真正的運行環境下它就能夠自動編譯，但這個過程很是緩慢，因此不建議這麼使用。推薦的方式是提早編譯成 CSS 代碼而且將一個正常的發展版本備份在線上。固然還有不少可視化的的程序幫助你編譯 less 文件，可是在本篇文章中咱們將使用 node.js。

2、基本用法

　　2.1 變量

　　Less 的一個主要功能就是可讓你像在其它高級語言中同樣聲明變量，這樣你就能夠存儲你常用的任何類型的值：顏色，尺寸，選擇器，字體名稱和 URL 等。less 的哲學是在可能的狀況下重用CSS語法。

　　這裏，咱們聲明瞭兩個變量，一個是背景顏色，一個是文本顏色，它們都是十六進制的值。less 代碼以下：

@background-color: #ffffff;
@text-color: #1A237E;

.box{
    width: 500px;
    height: 500px;
    background-color: @background-color;
}
p{
    color: @text-color;
}

　　編譯後的 css 代碼以下：　

.box {
  width: 500px;
  height: 500px;
  background-color: #ffffff;
}
p {
  color: #1A237E;
}

　　在上面的例子當中，背景顏色是白色，文本顏色是黑色。比方說，如今咱們要切換兩者的值，也就是黑色的背景和白色的文本，咱們只須要修改兩個變量的值就能夠了，而不是手動的去修改每一個值。

　　閱讀更多有關 Less 變量的內容，請看這裏。

　　2.2 Mixins

　　Less 容許咱們將已有的 class 和 id 的樣式應用到另外一個不一樣的選擇器上。下面這個例子能夠清楚地說明這一點。　

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

　　轉換成 css 代碼以下：　

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

　　若是你不想 mixin 也以一種規則的形式出如今 CSS 代碼中，那麼你能夠在它的後面加上括號：

#circle(){
    background-color: #4CAF50;
    border-radius: 100%;
}

#small-circle{
    width: 50px;
    height: 50px;
    #circle
}

#big-circle{
    width: 100px;
    height: 100px;
    #circle
}

　　此時編譯成 CSS :　

#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

　　Mixin 另外一個比較酷的功能就是它支持傳入參數，下面這個例子就爲 circle 傳入一個指定寬高的參數，默認是 25px。這將建立一個 25×25的小圓和一個 100×100 的大圓。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

　　轉換成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

　　在官方文檔瞭解更多關於 mixin 的知識。

　　2.3 嵌套

　　嵌套可用於以與頁面的HTML結構相匹配的方式構造樣式表，同時減小了衝突的機會。下面是一個無序列表的例子。

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

　　編譯成 CSS 代碼：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

　　就像在其它高級語言中同樣， Less 的變量根據範圍接受它們的值。若是在指定範圍內沒有關於變量值的聲明， less 會一直往上查找，直至找到離它最近的聲明。

　　回到 CSS 中來，咱們的 li 標籤將有白色的文本，若是咱們在 ul 標籤中聲明 @text-color 規則。

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

　　編譯生成的 CSS 代碼以下：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

　　在這裏瞭解更多關於做用域的知識。

　　2.4 運算

　　你能夠對數值和顏色進行基本的數學運算。好比說咱們想要兩個緊鄰的 div 標籤，第二個標籤是第一個標籤的兩倍寬而且擁有不一樣的背景色。

@div-width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @div-width;
    background-color: @color - 100;
}

#right{
    width: @div-width * 2;
    background-color: @color;
}

　　編譯成 CSS 以下：

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #004590;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

　　2.5 函數　

　　Less 中有函數，這讓它看起來像一門編程語言了，不是嗎？

　　讓咱們來看一下 fadeout，一個下降顏色透明度的函數。　

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

　　編譯成 CSS 以下所示：

div {
    height: 50px;
    width: 50px;
    background-color: #004590;
}
div:hover {
    background-color: rgba(0, 69, 144, 0.5);
}

　　經過上述代碼，當咱們將鼠標懸浮在 div 上時，就能夠獲取半透明度的動畫效果，這比以前本身手動設置要簡單的多了。還有不少有用的函數去操縱顏色，檢測圖像的大小，甚至將資源做爲 data-uri 嵌入樣式表，在這裏查看這些函數的列表。

　　2.6 做用域（scope）

　　做用域是程序中的一個標準，LESS中也是。若是你在你樣式表的root級聲明一個變量，它在整個文檔中都是能夠調用的。然而，若是你在一個選擇器，好比id或者class中，從新定義了這個變量，那麼，它就只能在這個選擇器中可用了——固然是從新定義後的新值。

@color: #00c; /* 藍色 */

#header {
  @color: #c00; /* 紅色 */
   border: 1px solid @color; /* 紅色邊框 */
}

#footer {
  border: 1px solid @color; /*藍色邊框 */
}

　　由於咱們在 #header 中從新定義了 color 變量，變量的值將會是不一樣的並且只會在該選擇器中有效。它以前或者以後的全部地方，若是沒有被從新定義，都會保持那個原始的值。

　　2.7 註解

　　LESS 中容許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，並且可以經過處理並正確輸出。當行註釋，// comment，一樣能夠用可是不可以經過處理也不能被輸出。

　　2.8 導入

　　導入也至關符合標準。標準的 @import ‘classes.less’; 處理的很好。然而，若是你想要導入其它的 LESS 文件，那麼文件的擴展名是可選的，因此 @import ‘classes’; 也是可行的。若是你想要導入一些無需LESS 處理的內容，你可使用 .css 擴展 (好比， @import ‘reset.css’;)。

3、LESS 和 SASS 區別

　　以前寫過一篇 sass 的入門，因此確定有很多人會問這倆的區別。在這我說一下個人看法，可能不全。

　　LESS和Sass之間的主要區別是他們的實現方式不一樣，LESS是基於JavaScript運行,因此LESS是在客戶端處理。Sass是基於 Ruby 的，是在服務器端處理的。不少開發者不選擇LESS是由於LESS輸出修改過的CSS到瀏覽器須要依賴於Javascript引擎，而Javascript引擎須要額外的時間來處理代碼。固然在其它方面也是有一點小差異，例如; 在變量上LESS使用@，而Sass使用$，同時還有一些做用域上的差異。輸出格式上sass 提供4種輸出選項：nested, compact, compressed 和 expanded，然而 less 並無輸出設置................

1. 關於less的一些入門用法
2. less入門
3. less快速入門
4. Less 總結——快速入門
5. LESS從入門到精通
6. Less入門與安裝(轉)
7. vue2 less less-loader 的用法
8. Less 的用法
9. 使用Less爬坑 less引入報錯
10. LESS使用方法
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。