Less 安裝及基本用法

更新時(shí)間：2018年05月05日 20:54:24 作者：littleWriter

這篇文章主要介紹了Less 安裝及基本用法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

node.js是一個(gè)前端的框架自帶一個(gè)包管理工具npm

node.js 的安裝

官網(wǎng)：http://nodejs.cn/

在命令行檢驗(yàn)是否安裝成功

切換到項(xiàng)目目錄，初始化了一個(gè)package.json文件

安裝與卸載jQuery包（例子）　　安裝

　　卸載

安裝淘寶鏡像

2. 安裝less

試一試：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
</head>
<body>
<div id="box">
  <ul>
    <li>你好</li>
    <li>hello</li>
  </ul>
</div>
</body>
</html>

style.less

#box{
 width:200px;
 height:200px;
 background-color:blue;
 ul{
  color:white;
  li{
   line-height:50px;
  }
 }
}

在命令行中輸入lessc xxx.less xxx.css，

如下：

用瀏覽器打開test.html 看一下效果吧3. less 的基本用法

https://less.bootcss.com/

變量

@red:red;
@w:200px;
#big{
  width:@w;
  height:@w;
  background-color:@red;
  #small{
    width:@w;
    height:@w;
    background-color:@red;
  }
}
p{
  color:@red;
}

混合

.bt{
  width:200px;
  height:200px;
  border-top:2px solid red;
  background-color:red;
}
#big{
  .bt;
  #small{
    .bt;
  }
}

•嵌套

#box{
  width:100%;
  height:60px;
  background-color:#ccc;
  h3{
    width:100%;
    height:20px;
    background-color:yellow;
  }
  ul{
    list-style:none;   
    li{
      height:40px;
      line-height:40px;
      float:left;
      padding:0 10px;
    }
  }
}

•運(yùn)算

@color:#333;
#box{
  width:100%;
  height:60px;
  background-color:@color+#111;
}
•calc()
@var:50vh/2;
#box{
  width:calc(50% + (@var - 20px));
}

•固定函數(shù)

@base:#f04615;
@width:0.5;
#box{
  width:percentage(@width);
  color:saturate(@base,5%);
  background-color:spin(lighten(@base,25%),8);
}

•注釋

//單行注釋//
/*多行
 注釋*/
•引入其他less文件
@import "other.less";

總結(jié)

以上所述是小編給大家介紹的Less安裝及基本用法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

相關(guān)文章

Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語(yǔ)言中比較特殊的一個(gè)，可以單獨(dú)使用作為判斷運(yùn)算符，也常被用于for...in循環(huán)中遍歷對(duì)象屬性
2011-09-09
typescript 類型any不能分配給類型never
本文主要介紹了typescript 類型any不能分配給類型never，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
javascript url幾種編碼方式詳解
下面小編就為大家?guī)?lái)一篇javascript url幾種編碼方式詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-06-06
Openlayers實(shí)現(xiàn)面積測(cè)量的方法
在Openlayers中,長(zhǎng)度和面積的測(cè)量均依賴ol/sphere模塊,長(zhǎng)度通過getLength方法計(jì)算,面積則通過getArea方法,面積測(cè)量不是計(jì)算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧
2024-11-11
Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
這篇文章主要介紹了Knockoutjs 學(xué)習(xí)系列(二)花式捆綁的相關(guān)資料,主要介紹了knockoutjs中各種綁定的使用方法，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JS如何判斷對(duì)象是否包含某個(gè)屬性
這篇文章主要介紹了JS如何判斷對(duì)象是否包含某個(gè)屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
html+css+js實(shí)現(xiàn)別踩白板小游戲
大家好,本篇文章主要的講的是html+css+js實(shí)現(xiàn)別踩白板小游戲，感興趣的同學(xué)趕快來(lái)看一看吧，覺得不錯(cuò)的話可以收藏一下哦，方便下次瀏覽
2021-11-11
js獲取css的各種樣式并且設(shè)置他們的方法
下面小編就為大家?guī)?lái)一篇js獲取css的各種樣式并且設(shè)置他們的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-08-08
JS模板實(shí)現(xiàn)方法
我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過程中，這帶來(lái)的問題更為嚴(yán)重。
2013-04-04
關(guān)于window.pageYOffset和document.documentElement.scrollTop
window.pageYOffset：Netscape屬性，指的是滾動(dòng)條頂部到網(wǎng)頁(yè)頂部的距離
2011-04-04