2019獨角獸企業重金招聘Python工程師標準>>>

一,變量

基本使用

Less:

.@{selector} {width: 100px;height: 100px;@{property}: #000;background: url("@{bgImg}/test.png");&:after {display: block;content: @@var;} } @selector: box; @bgImg: "../img"; @property: color; @name: "你好啊"; @var: "name";

生成CSS:

.box {width: 100px;height: 100px;color: #000;background: url("../img/test.png"); }.box:after {display: block;content: "你好啊"; }

字符串插值

@base-url: "http://abc.com"; background-image: url("@{base-url}/images/bg.png");

選擇器插值

//Less @name: blocked; .@{name} {color: black; }//輸出css .blocked {color: black; }

二,運算

任何數字、顏色或者變量都可以參與運算

@base: 5%; @filler: @base * 2; @other: @base + @filler;color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;

LESS 的運算已經超出了我們的期望，它能夠分辨出顏色和單位,括號也同樣允許使用,并且可以在復合屬性中進行運算:

@var: 1px + 5; width: (@var + 5) * 2; border: (@width * 2) solid black;

三,Mixin混合

基本使用和extend

Less:

/*不加括號顯示樣式,生成并集選擇器組合*/ .public {width: 100px;height: 100px; } .public() {/*加括號隱藏樣式,生成在調用者里,代碼重復*/width: 100px;height: 100px; } nav:extend(.public) {background-color: #f00; } div {&:extend(.public);background-color: #00f; } footer {.public;background-color: #cccccc; }

生成CSS:

/*不加括號顯示樣式,生成并集選擇器組合*/ .public, nav, div {width: 100px;height: 100px; } nav {background-color: #f00; } div {background-color: #00f; } footer {/*隱藏樣式,生成在調用者里,代碼重復*/width: 100px;height: 100px;background-color: #cccccc; }

模式匹配

Less:

.mixin (dark, @color) {background-color: darken(@color, 10%); } .mixin (light, @color) {background-color: lighten(@color, 10%); } .mixin (show) {display: block; } .mixin (hide) {display: none; }div {width: 100px;height: 100px;.mixin(show);//.mixin(hide);.mixin(dark,red) }

生成CSS:

div {width: 100px;height: 100px;display: block;background-color: #cc0000; }

命名空間

Less:

/*加括號隱藏了樣式 .div命名空間*/ .div() {width: 200px;height: 200px;background-color: #000;div {width: 50px;height: 50px;background-color: #f00;}.color {color: skyblue;}&:hover{background-color: lighten(rgb(0, 0, 0), 20%);} } /*這樣使用*/ nav {.div; } nav p {.div > .color; }

生成CSS:

nav {width: 200px;height: 200px;background-color: #000; } nav div {width: 50px;height: 50px;background-color: #f00; } nav .color {color: skyblue; } nav:hover {background-color: #333333; } nav p {color: skyblue; }

作用域

(類似于JS作用域鏈,一層一層網上找,找到為止)
Less:

@color: #ccc; .box {@color: #eee;.gray {color: @color;} } .box2 {.gray {color: @color;} }

生成CSS:

.box .gray {color: #eeeeee; } .box2 .gray {color: #cccccc; }

!important

Less:

.box() {@color: #eee;background-color: #f00;width: 100px;height: 200px;.gray() {color: @color;} } nav {/*可以使繼承到的混合集所有屬性都添加!important*/.box !important;.box > .gray; }

生成CSS:

nav {/*可以使繼承到的混合集所有屬性都添加!important*/background-color: #f00 !important;width: 100px !important;height: 200px !important;color: #eeeeee; }

Parametric Mixins(參數混合)

Less:

/*可以設定參數,也可以同時設置默認值*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {-webkit-transition: @property @duration @function @delay;-moz-transition: @property @duration @function @delay;-ms-transition: @property @duration @function @delay;-o-transition: @property @duration @function @delay;transition: @property @duration @function @delay; } /*等同于上式,Less中也有arguments*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {-webkit-transition: @arguments;-moz-transition: @arguments;-ms-transition: @arguments;-o-transition: @arguments;transition: @arguments; } div1 {.transition; } div2 {.transition(@duration: 2s); } div3 {.transition(@duration: 3s;@property: width;) }

生成CSS:

div1 {-webkit-transition: all 1s linear 0s;-moz-transition: all 1s linear 0s;-ms-transition: all 1s linear 0s;-o-transition: all 1s linear 0s;transition: all 1s linear 0s; } div2 {-webkit-transition: all 2s linear 0s;-moz-transition: all 2s linear 0s;-ms-transition: all 2s linear 0s;-o-transition: all 2s linear 0s;transition: all 2s linear 0s; } div3 {-webkit-transition: width 3s linear 0s;-moz-transition: width 3s linear 0s;-ms-transition: width 3s linear 0s;-o-transition: width 3s linear 0s;transition: width 3s linear 0s; }

Less:

.test(@width:100px;@height:100px;) {width: @width; //可以不需要執行體,只為了獲得返回值@result: (@width + @height) / 2; }div {.test; //call the mixinpadding: @result; //use the return value }

生成CSS:

div {width: 100px;padding: 100px; }

高級參數用法與 @rest 變量

.mixin (...) { // 接受 0-N 個參數 .mixin () { // 不接受任何參數 .mixin (@a: 1) { // 接受 0-1 個參數 .mixin (@a: 1, ...) { // 接受 0-N 個參數 .mixin (@a, ...) { // 接受 1-N 個參數//此外 .mixin (@a, @rest...) {// @rest 表示 @a 之后的參數// @arguments 表示所有參數 }

Mixin Guards(導引表達式/混合保護)

我們可以在mixin中設置條件；常用的條件運算符：>、>=、<、<=、=；我們設定的條件還可以使用IS函數：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

//->LESS代碼.mixin (@a) when (lightness(@a) >= 50%) {background-color: black;}.mixin (@a) when (lightness(@a) < 50%) {background-color: white;}.box1{.mixin(#ddd);}.box2{.mixin(#555);}//->編譯為CSS的結果.box1 {background-color: black;}.box2 {background-color: white;}

when是在設置條件，除了像上面的寫法外，我們還可以通過when設置多個條件，而且條件中可以使用is函數

//->LESS代碼:使用IS函數.mixin (@a; @b: 0) when (isnumber(@b)) { ... }.mixin (@a; @b: black) when (iscolor(@b)) { ... }//->LESS代碼:多條件，可以使用and或者逗號間隔.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... //你可以使用關鍵詞 and 在 guard 中加入額外的條件:.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }//或者，使用關鍵詞 not 否定條件：.mixin (@b) when not (@b > 0) { ... }

我們還可以通過與&特性結合實現'if'類型的語句

//->LESS代碼:這里的意思是如果為true,.box的文字顏色才是白色@my-option: true;& when (@my-option = true) {.box {color: white;}}

四,Loops(遞歸/循環)

在Less中，混合可以調用它自身。這樣，當一個混合遞歸調用自己，再結合Guard條件表達式，就可以寫出循環結構。使用遞歸循環最常見的情況就是生成柵格系統的CSS
Less:

/*生成柵格系統*/ @media screen and (max-width: 768px){.generate-columns(12);.generate-columns(@n, @i: 1) when (@i <= @n) {.column-xs-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i+1));} } @media screen and (min-width: 768px){.generate-columns(12);.generate-columns(@n, @i: 1) when (@i <= @n) {.column-sm-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i+1));} }

生成CSS:

@media screen and (max-width: 768px) {.column-xs-1 { width: 8.33333333%; }.column-xs-2 { width: 16.66666667%; }.column-xs-3 { width: 25%; }.column-xs-4 { width: 33.33333333%; }.column-xs-5 { width: 41.66666667%; }.column-xs-6 { width: 50%; }.column-xs-7 { width: 58.33333333%; }.column-xs-8 { width: 66.66666667%; }.column-xs-9 { width: 75%; }.column-xs-10 { width: 83.33333333%; }.column-xs-11 { width: 91.66666667%; }.column-xs-12 { width: 100%; } } @media screen and (min-width: 768px) {.column-sm-1 { width: 8.33333333%; }.column-sm-2 { width: 16.66666667%; }.column-sm-3 { width: 25%; }.column-sm-4 { width: 33.33333333%; }.column-sm-5 { width: 41.66666667%; }.column-sm-6 { width: 50%; }.column-sm-7 { width: 58.33333333%; }.column-sm-8 { width: 66.66666667%; }.column-sm-9 { width: 75%; }.column-sm-10 { width: 83.33333333%; }.column-sm-11 { width: 91.66666667%; } .column-sm-12 { width: 100%; } }

五,Merge(兼并)

+代表以逗號分隔，+_代表多個之前以空格分隔
Less:

.mixin(){/*內陰影*/box-shadow+: inset 0 0 10px #555; } .scale(@num){transform+_: scale(@num); } div{width: 100px;height: 100px;background-color: #f00;margin: 100px auto;.mixin;box-shadow+: 0 0 20px black;transform+_: translateX(100px);.scale(2); }

生成CSS:

div {width: 100px;height: 100px;background-color: #f00;margin: 100px auto;/*內陰影*/box-shadow: inset 0 0 10px #555, 0 0 20px black;transform: translateX(100px) scale(2); }

六,Parent Selectors

Less:

.box(){border-color: #f00;top {/*名稱寫死的后代選擇*/width: 10px;}&:hover {background-color: #00f;}&.current {/*選擇當前選擇器并且class為current*/color: red; }&>top{/*名稱寫死的直接后代選擇*/width: 11px;}&-top {/*根據選擇器名稱變化的直接選中*/background-color: #fff;}& &-top{/*根據選擇器名稱變化的后代選擇*/width: 12px;}&>&-top{/*根據選擇器名稱變化的直接后代選擇*/width: 13px;}&,&-top{/*根據選擇器名稱變化的并集選擇*/height: 14px;}&-top+&-main{/*根據選擇器名稱變化的兄弟選擇*/height: 15px;}&+&{/*根據選擇器名稱變化的兄弟選擇*/height: 16px;} }nav {.box; }

生成CSS:

nav {border-color: #f00; } nav top {width: 10px; } nav:hover {background-color: #00f; } nav.current {color: red; } nav > top {width: 11px; } nav-top {background-color: #fff; } nav nav-top {width: 12px; } nav > nav-top {width: 13px; } nav, nav-top {height: 14px; } nav-top + nav-main {height: 15px; } nav+nav{height: 16px; }

改變選擇器順序，下面的案例中，選擇器.no-border-radius &會前置插入它的父選擇器.header .menu，最后變成.no-border-radius .header .menu形式輸出：

//->LESS代碼 .header {.menu {border-radius: 5px;.parent & {/*增加權重?*/background-color: #f00;}} }//->輸出的CSS .header .menu {border-radius: 5px; } .parent .header .menu {/*增加權重?*/background-color: #f00; }

七,Import Directives(導入指令)

從其他樣式表中導入樣式。

//->LESS代碼 @import "public.less"; //默認把指定文件的less也編譯 @import "header.less"; //默認把指定文件的less也編譯@import (reference) "public.less"; //設置僅導入指定文件的less但不編譯

除了reference以外我們還可以配置一些其他的參數值:
inline：在輸出中包含源文件但不加工它
less：將文件作為Less文件對象，無論是什么文件擴展名
css：將文件作為CSS文件對象，無論是什么文件擴展名
once：只包含文件一次（默認行為） multiple：包含文件多次

八,注釋

CSS 形式的注釋在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */ .class { color: black }

LESS 同樣也支持雙斜線的注釋, 但是編譯成 CSS 的時候自動過濾掉:

// Hi, I'm a silent comment, I won't show up in your CSS .class { color: white }

九,內置函數

Less函數手冊

轉載于:https://my.oschina.net/sichunchen/blog/1548468

總結

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

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