一、 什么是Less.css
Less.css是一種動態(tài)樣式語言，屬于CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態(tài)語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。
Less.css可以在多種語言、環(huán)境中使用，包括瀏覽器端、桌面客戶端、服務端。
官網地址
二、 編譯工具
- Koaloa編譯：國人開發(fā)的LESS/SASS編譯工具。
- Nodes.js庫
- 瀏覽器端使用
三、 Less中的注釋
- 可以使用CSS中的注釋（//）—— 是會被編譯**的，即在.css文件中可見
- 也可以用//注釋 —— 不會被編譯的，不會再.css中保留
//編譯的時候會自動過濾掉
聲明編碼格式，防止亂碼@charset "utf-8";
四、 變量
Less中聲明變量用@開頭
less中，想聲明變量的話，一定要用@開頭 例如:@變量名：值
@test_width:300px;
@test_height:300px;
.box{
width: @test_width;
height: @test_height;
background-color: red;
}
五、 混合 (Mixin)
混合(mixin)變量
例： .border{border:10px solid red;}
帶參數的混合
.border-radius(@radius){css代碼}
可設默認值
.border-radius(@radius:5px){css代碼}
目的：以前寫的（之前定義過的）樣式拿過來重用
.border{
border:5px solid pink;
}
.box{
width: @test_width;
height: @test_height;
background-color: red;
.border;
}
.box2{
.box;//用.box的用樣式
margin-left: 100px;
}
混合可帶參數
.border_02(@border_width){
border: @border_width solid green;
}
.test_hunhe{
.border_02(30px);
}
混合_帶默認值
.border_03(@border_width:10px){
border: @border_width solid yellow;
}
.test_hunhe_03{
.border_03();
}
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.radius_test{
width: 200px;
height: 200px;
background-color: yellow;
.border_radius(20px);
}
六、 匹配模式
相當于js中的if，但不完全是；得滿足條件后才能匹配
.sanjiao{
width: 0;
height: 0;
overflow: hidden;//用來處理ie6最小高度問題
border-width: 10px;
border-color:transparent transparent red transparent;//上面紅色
border-style: dashed solid dashed dashed;//在ie6下有個黑色的邊，解決方案，哪個方向有顏色哪個方向是solid,其他的是dashed
}
匹配模式
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color:@c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
無論選擇誰都得帶上我，即使不選啥
.triangle(@_,@w:5px,@c:#ccc){
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao_02{
.triangle(right,@w:50px);
}
匹配模式的定位
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(r){
position: fixed;
}
七、 運算
任何數字、顏色或者變量都可以參與運算預算應該被包裹在括號中
@test_01:300px;
.test_01{
width: @test_01 + 20px;//只有有一個人帶單位就可以
height: @test_01 - 20 * 5;
position: absolute;
left:(@test_01 + 20)*3;
color: #ccc - 10;//less會轉化為255,然后輸出
}
八、 嵌套規(guī)則
兩種用法
&對偽類的使用 — hover或 focus
&對連接的使用— &_nav
正常我們寫css的時候
.list{}
.list li{}
.list li a{}
.list li span{}
用了css之后我們就這樣寫
.list{
width: 600px;
list-style: none;
margin: 30px auto;
overflow: hidden;
li{
height: 30px;
line-height: 30px;
background-color: aqua;
margin-bottom: 5px;
/*a{
float: left;
}*/
//嵌套層數越多，匹配的次數就越多，盡量少嵌套一些東西
}
a{
float: left;
&:hover{
//&代表上一層選擇器,&=a ;若父級是.title ,子級是.title_nav = &_nav
color: red;
background-color: blue;
}
}
span{
float: right;
}
}
九、 @arguments
@arguments包含了所有傳遞進來的參數。
如果你不想單獨處理每一個參數的話就可以像這樣寫
原來的辦法傳參
.border_arg(@w:30px,@c:red,@xx:solid){
border: @w @c @xx;
}
現(xiàn)在的利用argguments
.border_arg(@w:30px,@c:red,@xx:solid){
border: @arguments;
}
.test_arguments{
.border_arg();
}
.test_arguments_2{
.border_arg(40px);
}
十、 避免編譯
有的時候我們需要輸出一些不正確的CSS語法或者使用一些LESS不認識的專有語法
要輸出這樣的值我們可以在字符串前加上一個~
例如：width:~’calc(100% - 30px)’;
.test_03{
width: calc(300px - 20px);
}
.test_04{
width: ~'calc(300px - 20px)'; //想不讓less算，讓瀏覽器算 用在calc 或者濾鏡
}
十一、 !important 關鍵字
回味所有混合所帶來的樣式，添上!important
調試的時候加，平時用的時候最好不要加
.test_important{
.border_radius() !important;
}
====
十二、 其他的常用東西
定義清浮動方式
.clearFix{
&:after{
content: "";
display: block;
clear: both;
}
zoom: 1;
}
.list{
.clearFix;
}
ie6下需要將img的border:none；
定義浮動
.fl(@fl:left){
float: @fl;
display: inline;//解決ie6下雙邊距
}
.fr(@fr:right){
float: @fr;
display: inline;
}
.list{
.clearFix();//這樣的方式是為了區(qū)分less還是css
}
引入外部的文件(一些庫或公共的)
.less文件引入
@import "base"; 默認后綴名是.less所以不用寫
.css文件引入
@import(less) "a.css"; //注意(less)有空格，貌似我沒用出來有待研究
