摘要:單位值需要統一,如果參數存在單位不同,會報錯。亮度,單位百分數。增加到最大值了對色彩透明減少得到是一個混色灰度色值將兩種顏色混合,默認情況下,是取兩種顏色的十六進制轉為十進制相加后的平均值。
CSS編譯語言
編譯瀏覽器中使用:less.min.js
Node中編譯
lessc demo.less // 直接在cli中輸出 lessc demo.less test.css // 將把demo.less 編譯到 test.css 中 (lessc url newUrl) lessc --clean-css demo.less test.css // 將demo.less 編譯到 test.css 文件并且壓縮 (插件:less-plugin-clean-css)
工程化工具
fis使用插件: fis-parser-less
match();中配置插件,然后處理拓展名。
fis.match("**.less", { parser: fis.plugin("less"), rExt: ".css" });
gulp使用插件:gulp-less
var gulp = require("gulp"), less = require("gulp-less"); // 編譯less gulp.task("less1", function () { gulp.src("*.less") .pipe(less()) .pipe(gulp.dest("test")); }); // 啟動任務 gulp.task("default", ["less1"]);嵌套規則
通過 {} 來嵌套處理。大括號內部定義的元素的樣式。
body { div { width: 100px; height: 100px; background: cyan; } }變量
通過 less @ 來定義變量
定義:@space: 100px;
使用:width: @space
@space: 20px; @BgColor: cyan; @color: #fff; ul { padding: @space * .5; background: @BgColor; width: @space * 6; height: @space * 2; li { float: left; width: @space * 2; height: @space; list-style: none; text-align: center; line-height: @space; a { color: @color; padding: @space*.15 @space*.15; text-decoration: none; } } li:hover { background: @color; a { color: @BgColor; } } }混合
在Less中對繼承的一種實現,混合是創建一個類,并且將該類在其它類中實現。
定義:.link-style {}
使用:.demo1 { a { .link-style } }
// mix 混合 .box-style { width: 400px; height: 300px; background: cyan; margin: 0 auto; } .box1 { .box-style; background: tan; } .box2 { .box-style; width: 1000px; }方法傳參
混合是一種繼承,多個類繼承的樣式是不一樣的。可以對混合函數傳參。
定義: .className( @arg ) { width: @arg; }
使用: .classname(100px);
// mix 傳參 .box-style( @w ) { width: @w * 10; height: 300px; background: cyan; margin: 0 auto; } .box1 { .box-style(400px); background: tan; } .box2 { .box-style; width: 1000px; }
混合和方法區別:
在編譯后,定義的混合還存在,變成CSS文件中的普通的樣式條
在編譯后,定義的方法在CSS文件中不存在.
如果沒有指定默認參數,使用方法的時候,并未傳遞參數,編譯的時候,會報錯。
默認參數定義:.className( @w: 100px ) { width: @w; }
.box-style( @w: 100px ) { width: @w * 10; height: 300px; background: cyan; margin: 0 auto; }arguments
表示方法中的所有參數。實現對所有變量的引用
.box-border ( @w: 1px, @s: solid, @c: #ccc) { border: @arguments; } .box { margin-bottom: 10px; .box-border(1px, solid, cyan); } .box1 { .box-border(); }improtant
提升權重
在less中important 不僅僅可以對單個css屬性添加,還可以對方法添加,實現對繼承多個屬性的important屬性提升權重。
.box { .box-style(100px) !improtant; color: #ccc !improtant; }條件判斷
通過用when() 方法來判斷條件。(注意:不需要添加單位).
類似switch條件判斷
.size ( @w, @h ) when ( @w > 200 ) { width: @w; height: @h; } .size (@w, @h ) when ( @w = 200 ) { width: @w; height: @h; } .size ( @w, @h ) when ( @w < 200 ) { width: @w; height: @h; }
使用關鍵字 and 和 not
多個條件 and, 配合when 關鍵字 使用 : when () and ()
否定判斷條件 not, 配合 when 關鍵字 使用 : when not()
// 判斷在 300 - 500 范圍之間 .size ( @w, @h ) when ( @w > 300 ) and ( @w < 500 ) { width: @w; height: @h; }
// 判斷不小于200 .size( @w, @h ) when not( @w < 200 ) { width: @w; height: @h; }內置函數 Math函數
floor(): 向下取整
ceil() : 向上取整
round() : 四舍五入
percentage(); 將數值轉化為百分數,(一般參數中不需要帶%單位)
min(); 參數中的最小值,單位值需要統一,如果參數存在單位不同,會報錯。如果參數中沒有帶單位,編譯后的值也是沒有單位。
max(); 參數中最大值。單位值需要統一,如果參數存在單位不同,會報錯。如果參數中沒有帶單位,編譯后的值也是沒有單位。
div { width: ceil(100.1px); height: floor(100.8px); margin-top: round(20.5em); } p { width: percentage(1); } h1 { width: max(200, 100px, 300, 230px); height: min(30px, 31px, 20px); background: tan; }色彩函數
rgb()
rgb(red, green, blue);
把原始的rgb值轉成16進制色值.(注意不可使用變量)
background: rgb(100, 12, 109); // 編譯后:background: #640c6d;
// 編譯報錯 @color: "100"; div { background: rgb(@color, @color, @color); }
rgba()
rgba(red, green, blue ,alpha);
編譯后按照原來的rgba();的格式顯示在CSS中
background: rgba(100, 12, 109, .3); // 編譯后: background: rgba(100, 12, 109, 0.3);
hsl()
hsl(h, s, l);
表示色相,飽和度,亮度模式.
h: 某一色值(0-360)
s:色彩飽和度, 單位百分數。
l: 亮度,單位百分數。0%表示黑色,100%表示白色.
編譯成CSS之后是16進制數值
background: hsl(200, 30%, 10%); // 編譯后: background: #121c21;色彩通道
red() 獲取定義色值中的紅色通道
green(); 獲取定義色值的綠色通道
blue(); 獲取定義色值的藍色通道。
alpha(); 獲取定義的rgba();的alpha();透明度通道
background: rgb(red(@color), red(@color), red(@color)); background: rgb(green(@color), green(@color), green(@color)); background: rgb(blue(@color), blue(@color), blue(@color)); background: rgba(red(@color), green(@alphaColor), blue(@color), alpha(@alphaColor));
hue(); 獲取色彩中的色值,結果是一個數字
saturation(); 獲取色彩中的飽和度,結果是一個百分數
lightness(); 獲取色彩中的亮度,結果百分數
@color: #00BCD4; background: rgb(hue(@color), hue(@color), hue(@color)); // background: #bbbbbb; margin: hue(@color); // margin: 186.79245283; width: saturation(@color); // width: 100%; height: lightness(@color); // height: 41.56862745%;色彩操作
fade(); 對色彩做透明度處理
fade(color, alpha);
background: fade(@color, 10%);
fadeIn(); 對色彩透明度增加,當第一個參數不透明的顏色,得到的結果是一個16進制不透明顏色。(增加到最大值100%了)
background: fadeIn(@color, 10%);
fadeOut(); 對色彩透明減少
background: fadeOut(@color, 90%);
greyscale(); 得到是一個混色灰度色值
background: greyscale(@color);
mix(); 將兩種顏色混合,默認情況下,是取兩種顏色的十六進制轉為十進制相加后的平均值。第三個參數表示去的數值,是個百分數,表示色彩混合的一個權重。
background: mix(@color, @color2); background: mix(@color, @color2, 30%);
saturate(); 增加飽和度
參數1:顏色。
參數2:飽和度的增加量
background: saturate(@color2, 30%);
desaturate(); 減少飽和度
background: desaturate(@color2, 30%);
lighten(); 提高色彩亮度
參數1:顏色
參數2:提高的亮度值
background: lighten(@color2, 50%);
darken(); 降低顏色亮度
background: darken(@color2, 50%);色彩混合
只能處理色彩,不能處理圖片
softlight(); 柔光處理
參數1: 底色
參數2:添加色
hardlight(); 強光處理
參數1: 底色
參數2:添加色
background: softlight(@color, @color2); background: hardlight(@color, @color2);字符串函數
escape(); 將字符串做url轉碼
參數:需要轉碼的字符串
e(); 不對字符串做編譯
background: e("rgba(10, 200, 210, .3)");
replace(); 替換字符串的子字符串
參數1:源字符串
參數2:被替換的字符串
參數3:替換的字符串
div { content: relace("this color is tan", "tan", "cyan"); }命名空間
& : 當前所在的class
引用混合時,要將屬性賦值給誰就放在誰的里面
.box1 { .bg { background: tan; } } .box2 { .header { .box1 .bg; } }作用域
在Less中,作用域是塊級作用域,定義在塊內部的變量,在外界訪問不到。
訪問變量的順序,就近原則。
對于函數,它的存在依賴塊級作用域,定義在塊內部的函數,在外界訪問不到,但是可以使用命名空間使用它。
對于變量,它存在依賴塊級作用域,定義在塊內部的變量,外界訪問不到,不能通過命名空間訪問,是一種私有變量。
@w: 100px; .box1 { .sayW(){ @w: 300px; } width: @w; .sayW(); } .box1{ p { width: @w; } } .box2 { width: @w; }
如果函數在塊中執行后,函數作用域會擴展帶過去。也就是變量在定義的塊中可以訪問。
@w: 100px; .box1 { .sayW(){ @w: 300px; } width: @w; .sayW(); } .box1{ p { width: @w; } } .box2 { .box1 .sayW(); // 函數通過命名空間執行 width: @w; // @w: 300px; }文件導入
語法:@import url;
通過@import導入一個文件內容,Less文件中,可以使用導入文件中的變量,混合,方法。編譯后,被導入的文件中的內容會保留下來。(導入的文件也會被編譯)
@import "base/var.less";插值
語法:@{key}
作用:將變量插入一個字符串中(注意:key前面沒有@符號,@符號放在{}外面)
div { content: "@{content}下雨了,下雨天"; }
@dir: top; div { bottom-@{dir}: 1px solid cyan; }表達式
在Less的字符串中,使用JavaScript表達式;
content: `["h", "e", "l", "l"].join("")`;
需要在``中編寫JavaScript表達式.
div { content: `["h", "e", "l", "l", "o"].join("")`; }Less目錄結構
根據項目需求使用Less目錄的結構
app.less 入口文件 variables.less 全局變量 mixins.less 全局混淆 init.less 初始化頁面 mixins.less 全局混淆 scaffoldings.less 布局 form.less 表單組件 utils.less 工具類 buttons.less 按鈕組件 nav.less 導航組件 list.less 列表組件 footer.less 底部導航
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111377.html
摘要:是一門預處理語言,它擴展了語言,增加了變量函數等特性,使更易維護和擴展。所以在生產環境中,我們需要事前把文件編譯為正常的后,在相應文件中引入,以后用戶訪問的都是編譯好的,為不是拿現編譯的。代碼編譯為的結果 Less和CSS的區別 HTML和CSS不屬于編程語言而是屬于標記語言,很難像JS一樣定義變量、編寫方法、實現模塊化開發等。LESS是一門CSS預處理語言,它擴展了CSS語言,增加了...
摘要:例如解析現在流行的預編譯語言和的優點簡單,易于維護,管理更加容易高效的進行開發使用實現配色將變得非常容易。變量避免編譯,有時候需要輸出一些不正確的語法或者使用一些不認識的專有語法,在前面加入。對于剛接觸的預編譯的前端,我推薦用。 1、什么是Less? ? less官網:Less is More , Than CSS -少即是多,比CSS ? 官網gitHub:https:/...
摘要:學習筆記之目錄說明源代碼里面的目錄是這樣的只給出部分文件顧名思義,為整個定義的全局變量。定義在中使用的灰色和品牌顏色。這部分定義的主要色成功失敗警告等等。之后也定義了默認背景色。 less學習筆記之bootstrap 目錄說明 源代碼里面的目錄是這樣的(只給出部分): .csscomb.json │ .csslintrc │ alerts.less │ badges.less ...
閱讀 4619·2021-10-25 09:48
閱讀 3210·2021-09-07 09:59
閱讀 2166·2021-09-06 15:01
閱讀 2692·2021-09-02 15:21
閱讀 2731·2019-08-30 14:14
閱讀 2182·2019-08-29 13:59
閱讀 2514·2019-08-29 11:02
閱讀 2531·2019-08-26 13:33