less語法（一） --- Less語言特性

時間  2019-11-29
標籤 語法 語言 特性 简体版
原文   原文鏈接

1、less語言特性css

1.1   概覽java

　　做爲 CSS 的一種擴展，LESS CSS 不只向下兼容 CSS 的語法，並且連新增的特性也是使用 CSS 的語法。這樣的設計使得學習 LESS 很輕鬆，並且你能夠在任什麼時候候回退到 CSS。web

 

1.2 變量app

1.2.1 變量的定義和使用less

　　定義變量：less定義變量使用 「@變量名: 變量值」 的方式定義；函數

　　使用變量：在須要使用定義好的變量的css屬性後面直接使用 「@變量名」 便可。學習

例如：在less文件中代碼以下url

@width : 100px;  //定義變量
.w {
    width: @width;   //使用變量
}

1.2.2 變量的做用域spa

　　若是對同一個變量定義兩次的話，在當前做用域中最後一次定義的將被使用。這不 CSS 的機制相似，最後一次定義的值會成爲這個屬性的值。若定義在嵌套乊中，那麼這個變量就叧能服務亍這個嵌套乊內的屬性了。變量也是沒有順序可言的，只要頁面裏有（便可以在變量定義以前使用），都會按順序覆蓋，按順序加載。例如設計

@width : 1px;
.meng {
    @width : 2px;
    .long {
        @width : 9000px;
        width:@width;
        @width : 22px;
    }
    width: @width;
}

　　編譯後爲：

.meng {
    width: 2px;
}
.meng .long {
    width: 22px; //注意此處是22px，而不是9000px
}

　　

例2：在變量定義以前使用：

.header {
    width: @width;   //在變量定義前使用變量是徹底能夠的，這和其餘語言有區別
}
@width: 50px;

　　

1.2.3 字符串插值

　　Less能夠經過@{變量名} 的方式進行字符串插值（字符串的拼接）。例如

@logoUrl = "http://www.XXX.com";
image {
    background-image: url("@{logoUrl}/image/logo.peg")
}

　　編譯後的CSS爲：

image {
    background-image: url("http://www.XXX.com/image/logo.png")
}

　　

1.2.4 選擇器插值

　　Less能夠經過 @{變量名} 的方式對CSS的選擇器進行插值。例如：

@mySelected: my-class;  //注意此處不能使用雙引號或單引號，選擇器插值只是單純的將變量的所有去替換

.@{mySelected}: {   //選擇器前面的點 .  表示是類選擇器，若是是id選擇器，使用#
    width: 100px;
}

　　編譯後的CSS

.my-class {
   width: 100px;
}

　　

1.2.5 media query  做爲變量

　　若是你但願在 media query 中使用 LESS 變量，你能夠直接使用普通的變量方式。由於「~」後面的值是不被編譯的，因此能夠用做 media query 的參數。小例子以下

:LESS 代碼

@singleQuery: ~"(max-width: 768px)";
div{
    background-color: red;
}
@media screen and @singleQuery {
    div {
        background-color: blue;
    }
}

　　編譯後的CSS

div{
    background-color: red;
}
@media screen and (max-width: 768px) {
    div {
        background-color: blue;
    }
}

　　

1.2.6 用一個變量值的變量

　　在定義變量值時使用其它的變量

Less代碼：

@meng : 5201314px;    
@loveDay : meng;
div {
    width:@@loveDay;  //須要使用兩個@，至關於@loveDay = meng, 第一個@和@loveDay的結合爲@meng 即 5201314px
}

編譯後的CSS

div {
  width: 5201314px;  
}

 

1.3  混合

　　在 Less 中，混合能夠將一個定義好的 class A （一組已經定義好的樣式）輕鬆的引入到另外一個 class B 中，從而簡單實現 class B 繼承 class A 中的全部屬性。咱們還能夠帶參數地調用，就像使用凼數同樣

1.3.1 繼承類名

　　在 LESS 中，能夠定義一些通用的屬性集爲一個 class，而後在另外一個 class中去調用這些屬性。若是咱們如今須要在其餘 class 中引入那些通用的屬性集，那麼咱們叧須要在任何 class 中調用就能夠了。任何 CSS class, id 屬性集均可以以一樣的方式引入。例如：

.common-box {   //前面的點 . 表示CSS的選擇器，也可使用 # 等選擇器
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEE;
    .common-box;
    span{
          .span;
          width: 100px;
          height: 100px;
    }
}

　　編譯後的CSS 

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEEE;
    width: 100%;
    height: 50%;
}

body span {
    display: block;
    width: 100px;
    height: 100px;
}

　　

1.3.2 帶參數混合和默認值混合

　　在 LESS 中，還能夠像函數同樣定義一個帶參數的屬性集合，參數能夠定義默認值，當不傳參數時，使用默認值。而後在其餘選擇器中像函數同樣調用它。示例以下：

.width(@width: 10px) {  //此處能夠寫成@width, 也能夠寫成@width: 10px(表示默認值是10px) ,當調用該屬性集合時，不傳參數則使用默認值
 	width: @width;
	background-color: #000000;
	color: #FFFFFf;
}

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
	p {
		.width(50%);
		font-size: 25px;
	}
	span {
		.width(200px);
		font-size: 14px;
	}
}

　　編譯後的CSS

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
}
#app p {
	width: 50%;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 25px;
}
#app span {
	width: 200px;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 14px;
}

　　至關於將.width（@width）作爲一個函數來調用，傳入的參數就是當前選擇器選擇的元素的寬度。

 

1.3.3 隱藏屬性繼承

　　如上1.3.1中 .common-box 和 .span編譯後會存在於編譯後的CSS中，而1.3.2中 .width(@width)編譯後不會存在於編譯後的CSS中，若是想要定義一些公用的CSS屬性集合，又不但願編譯後這些屬性集合存在於編譯後的CSS中，能夠在定義是加上括號 () ，這樣編譯後的這些屬性集合就不會存在於CSS中。例如：

.width() {
    width: 100px;
}

div {
    background-color: red;
    .width();
}

　　編譯後的CSS

div {     //編譯後 .width() 不會存在於CSS中
    background-color: red;
    width: 100px;
}

　　

1.3.4 多參數混合

　　多個參數可使用分號戒者逗號分隔，這裏推薦使用分號分隔，由於逗號有兩重含義：它既能夠表示混合的參數，也能夠表示一個參數中一組值的分隔符。例如

.mixin(@width) {
    width-1: @width;
}
.mixin(@width; @height:2em) {
    width-2: @width;
    height-2: @height;
}
.mixin(@width; @height; @margin: 2em) {
    width-3: @width;
    height-3: @height;
    margin: @margin @margin @margin @margin;
}
h1 {
    .mixin(red);
}
div {
    .mixin(#000,3px);
}
span {
    .mixin(#fff,3px,5px);
}

　　編譯後的CSS

h1 {    //從上到下匹配，只要匹配到，就和執行，這裏第二個 .mixin雖然有兩個參數，可是第二個參數有默認值，因此也能匹配到。這點和java等高級語言不一樣
    width-1: #ff0000;
    width-2: #ff0000;
    height-2: 2em;
}
div {  //同理
    width-2: #000000;
    height-2: 3px;
    width-3: #000000;
    height-3: 3px;
    margin: 2em 2em 2em 2em;
}
span {
    width-3: #ffffff;
    height-3: 3px;
    margin: 5px 5px 5px 5px;
}

　　

1.3.5 @arguments 變量

　　使用@arguments能夠將全部的參數所有放到一個屬性後面。例如：

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime :
2s){
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -o-transition: @arguments;
    -ms-transition: @arguments;
    transition: @arguments;
}
div {
    .transition;
}
span {
    .transition (width);
}
h1 {
    .transition (height; 80s);
}
li {
    .transition (all; 80s; ease-out);
}
dd {
    .transition (color; 80s; ease-in-out; 30s);
}

　　編譯後的CSS

div {
    -webkit-transition: all 4s ease-in 2s;
    -moz-transition: all 4s ease-in 2s;
    -o-transition: all 4s ease-in 2s;
    -ms-transition: all 4s ease-in 2s;
    transition: all 4s ease-in 2s;
}
span {
    -webkit-transition: width 4s ease-in 2s;
    -moz-transition: width 4s ease-in 2s;
    -o-transition: width 4s ease-in 2s;
    -ms-transition: width 4s ease-in 2s;
    transition: width 4s ease-in 2s;
}
h1 {
    -webkit-transition: height 80s ease-in 2s;
    -moz-transition: height 80s ease-in 2s;
    -o-transition: height 80s ease-in 2s;
    -ms-transition: height 80s ease-in 2s;
    transition: height 80s ease-in 2s;
}
li {
    -webkit-transition: all 80s ease-out 2s;
    -moz-transition: all 80s ease-out 2s;
    -o-transition: all 80s ease-out 2s;
    -ms-transition: all 80s ease-out 2s;
    transition: all 80s ease-out 2s;
}
dd {
    -webkit-transition: color 80s ease-in-out 30s;
    -moz-transition: color 80s ease-in-out 30s;
    -o-transition: color 80s ease-in-out 30s;
    -ms-transition: color 80s ease-in-out 30s;
    transition: color 80s ease-in-out 30s;
}

　　

1.3.6 ！important 關鍵字

　　調用定義好的屬性集合時，在後面添加 ！important ，則在生產的CSS代碼中，該屬性集合中的屬性都會加上 ！important。例如：

.my (@width : 20px; @height : 50px){
    width:@width;
    height : @height;
}
.meng2 {
    .my !important;
}
.long2 {
    .my(40px) !important;
}

　　編譯後的CSS

.meng2 {
    width: 20px !important;
    height: 50px !important;
}
.long2 {
    width: 40px !important;
    height: 50px !important;
}

　　

1.3.7 高級參數用法

　　在屬性集合中可使用 ... 表示多個參數。例如：

.mixin1 (...) { //接收0-N個參數
    padding:@arguments;
}
.mixin2 (@a: #FFFFFF; ...) { //接收0-N個參數
    padding:@arguments;
}
.mixin3 (@a; ...) { //接收1-N個參數
    padding:@arguments;
}

　　　　

1.3.8 模式匹配與 Guard  表達式

　　LESS 提供了經過參數值控制 mixin 行爲的功能(至關於給定義的屬性集合一個標識，當調用時標識一致，則調用)。至關於java中方法的重載，只不過這裏須要定義一個標識來控制調用哪個 .mixin 。示例以下：

.mixin (dark; @color) {   //調用.mixin 若第一個參數是dark，則調用這個屬性集合
    color: darken(@color; 10%);
}
.mixin (light; @color) {  //調用.mixin 若第一個參數是light，則調用這個屬性集合
    color: lighten(@color, 10%);
}
.mixin (@a; @color) {   //調用.mixin 只要是兩個參數，都會調用這個屬性集合
    display: block;
}

@switch: light;
.long {
    .mixin(@switch; #888);
}
@switch2 : dark;
.meng {
    .mixin(@switch2; #666);
}

　　編譯後的CSS代碼

.long {
    color: #a2a2a2;
    display: block;    //由於調用是傳了兩個參數，全部必定會匹配到 .mixin(@a; @color)
}
.meng {
    color: #808080;
    display: block;
}

　　

1.3.9 條件混合

　　條件混合的語法： .屬性集合名（參數集合） when (條件表達式) {屬性集合}

1. 經過 LESS  自帶的函數判斷

.mixin (@a) when (lightness(@a) >= 50%) {  //lightness(@a >= 50%)是混合條件，即判斷調用.mixin時傳入的@a通過計算後是否大於等於50%，知足條件則混合該屬性
    background-color: black; 
}
.mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;2
}
.mixin (@a) {
    color: @a;
}
.meng {
    .mixin(#ddd);
}
.long {
    .mixin(#555);
}

　　編譯後的CSS

.meng {
    background-color: black;
    color: #dddddd;
}
.long {
    background-color: white;
    color: #555555;
}

　　

2. 運算符判斷

　　Guards 支持的運算符包括：> >= = =<  < .說明一下，true 關鍵字是惟一被判斷爲真的值，也就是這兩個混合是相等的

 

3. 多個條件

　　語法： .屬性集合名（參數集合） when (條件表達式),(條件表達式) {屬性集合}

　　多個 Guards 能夠經過逗號表示分隔，若是其中任意一個結果爲 true，則匹配成功。這個至關亍腳本中的或的意思

 

4. Guards 中的 and 和 not 

　　and語法（至關於js中的與）： .屬性集合名（參數集合） when (條件表達式) and (條件表達式) {屬性集合}  //表示兩個條件均爲true時才混合

　　not語法（至關於js中的非）： .屬性集合名（參數集合） when not (條件表達式) {屬性集合}  //當條件爲false時混合

 

1.4 Less的嵌套語法

　　Less的嵌套語法是指在一個選擇器中能夠嵌套其餘選擇器。例如：

div {
    color: red;
    .container {   //這裏是嵌套的 class選擇器
        background-color: #CCCCCC;
    }
    ul {
        width: 200px;
        li {
            height: 100px;
        }
    }
}

　　編譯後的CSS

div {
  color: red;  
}
div .container{
    background-color: #CCCCCC;
}
div ul {
    width: 200px;
}
div ul li {
    height: 100px;  
}

　　

1.5  & 的用法

　　嵌套語法編譯後是父子關係，而 & 連字符編譯後是僞類選擇器.例如：

div {
    a {
        color: red;
        &:hover {
            color: blue;
        }
        &:focus {
            background-color: #DDDDDD;
        }
    }  
}

　　編譯後的CSS

div a {
    color: red;
}
div a:hover {
    color: blue;
}
div a:focus {
    background-color: #DDDDDD;
}

　　

1.6 LESS  詳解之命名空間

　　LESS 中也有命名空間的概念。所謂的命名空間，是爲了更好組織 CSS 戒者單純是爲了更好的封裝，將一些變量戒者混合模塊打包起來，一些屬性集乊後能夠重複使用。例如：

@height:100px;
.meng {
    .meng_button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .meng_tab () {
        height:@height
        width:100px;
    }
    .meng_citation () {
        @height:200px;
        height:@height
    }
}
div {
    .meng > .meng_tab;
}
h1 {
    .meng > .meng_citation;
}

　　編譯後的CSS

div {
    height:100px;
    width: 100px;
}
h1 {
    height: 200px;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程