第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

導(dǎo)入 less ： @import "less"; 導(dǎo)入less文件后面不需要加后綴； 導(dǎo)入 css： @import (less) "body.css"; 注意 (less) 后面的空格；

清除浮動 .clearfix:after{ content:""; display:block; clear:both; } .clearfix{ zoom:1; } 可用@import “xx”的方式導(dǎo)入less(可應(yīng)用于導(dǎo)入變量的情景，less為后綴的文件可以省略后綴) 導(dǎo)入css時: @import "xxx.css",用這種方法，該css不會被編譯出來 到入css并且編譯出來:@import (less) "xxx.css"（(less)和xxx.css之間應(yīng)該有空格），該@import語句放在less文件中的位置跟編譯出css得位置保持一致

font合并寫法： ? ?{ ? ? ?@h:10px; ? ? ?font-size:22px; ? ? ?color:#575757; ? ? ?font-family:"微軟雅黑"; ? ?} ? ?{ ? ? ?color:#575757; ? ? ?font:22px/@h "微軟雅黑"; ? ?}

&符號代表的是父級的類名或者id名

&_nav相當于.title_nav

.title ?.title_nav 兩個類(后者是前者的子類) 此時title_nav 可用&_nav的寫法

避免編譯 ~'....' ~"...." 如: width:～'calc(300px-30)'; 那么此時calc(300px-30)就不會由less編譯 即: ～'代碼';那么此時的代碼就不會編譯了

!important關(guān)鍵字，會為所有混合所帶來的樣式，添加上!important

@arguments變量：終究還是變量，顧名思義，代表多個參數(shù)，適用場景，同一個CSS樣式屬性對應(yīng)多個屬性值，例如border:1px solid pink;如果屬性值以參數(shù)方式傳遞，就可以使用@arguments代替對應(yīng)參數(shù)。如何引用？和以往一樣，傳參時要對應(yīng)傳參，中間可以用","或者";"隔開，如果少傳，則按順序匹配。

?0

LESS嵌套規(guī)則 less中的嵌套 嵌套越多，匹配次數(shù)越多次，所以盡量少嵌套。 .list{ .... li{ .... } a{ &:hover{ color:red } // & 代表上一層選擇器，這里的上一層選擇器是a } }

可以進行加減乘除運算，只要有一個帶像素的即可， 符號兩邊需要空格

Less中的運算 @test_01:300px; .box_02{ ?width:@test_01 + 20; ?height: (@test_01 - 200) * 5; ?background:#ccc - 10; }

匹配模式：

1、css三角（兼容ie低版本）：

.sanjiao{

????width: 0;

????height: 0;

????overflow: hidden;

????border-width: 10px;

????border-color: transparent transparent red transparent;

????border-style: dashed dashed solid dashed;

}

2、less三角(下三角)

.triangle(bottom，@w：5px，@c：#ccc){

????border-width: @w;

????border-color: @c transparent transparent transparent;

????border-style: solid dashed dashed dashed;

}

//注意：@_? 代表的是 編譯后始終默認帶上以下的樣式

.triangle(@_，@w：5px，@c：#ccc){

?????width: 0;

????height: 0;

????overflow: hidden;

}

.sanjiao{

????.triangle(top, 50px);

}

三角形 .triangle(top,@w:10px,@c:#ccc){ border-width:@w; border-color:transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .triangle(bottom,@w:10px,@c:#ccc){ border-width:@w; border-color:@c transparent transparent transparent; border-style:solid dashed dashed dashed; }

混合：<br> ? ?①不帶參數(shù)，聲明方式 .border_radius{};引用方式 .border_radius<br> ? ?②帶參數(shù)，<br> ? ? ? ?第一種情況無默認值： <br> ? ? ? ? ? ?聲明方式 .border_raidus(@radius){};引用方式 .border_radius(5px) 必須傳參<br> ? ? ? ?第二種方式有默認值：<br> ? ? ? ? ? ?聲明方式 .border_radius(@radius:5px){}; 引用方式 .border_radius() 必須帶括號或者傳一個參數(shù) .border_radius(10px);

less中聲明變量，用@開頭，例如：

@變量名：值

使用

height:@變量名;

LESS的注釋：

1. ? /* 內(nèi)容是被編譯的，保留進.CSS文件中 */

2. // 內(nèi)容不被編譯，不出現(xiàn)在.CSS文件中

避免編譯：

a:hover與less嵌套：

&代表上一層選擇器

匹配模式

默認會被編譯的css：（后面參數(shù)不可省略）

less工具：

1,注釋/**/與//的差別

2,定義變量 格式@a=12;

? ? ? ? ? ? ? ? ? ?@test_width:300px;

3,混合寫法:使得less更方便簡潔：

? ?1>，class等樣式類直接寫入

? ?2>，可帶參數(shù)的寫法（參數(shù)可帶默認值）