當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Less 的用法

發布時間：2023/12/2 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Less 的用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. node.js

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

node.js 的安裝

官網：http://nodejs.cn/

在命令行檢驗是否安裝成功

切換到項目目錄，初始化了一個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"/> </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;}} }

運算

@color:#333; #box{width:100%;height:60px;background-color:@color #111; }

calc()

@var:50vh/2; #box{width:calc(50% (@var - 20px)); }

固定函數

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

注釋

//單行注釋// /*多行注釋*/

引入其他less文件

@import "other.less";

總結

以上是生活随笔為你收集整理的Less 的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS flex布局
下一篇：自适应宽度元素单行文本省略用法探究