CSS預編譯語言——less初級入門

一、 什么是Less.css

Less.css是一種動態樣式語言,屬于CSS預處理語言的一種,它使用類似CSS的語法,為CSS的賦予了動態語言的特性,如變量繼承運算函數等,更方便CSS的編寫和維護。
Less.css可以在多種語言、環境中使用,包括瀏覽器端、桌面客戶端、服務端。
官網地址

二、 編譯工具

  1. Koaloa編譯:國人開發的LESS/SASS編譯工具。
  2. Nodes.js庫
  3. 瀏覽器端使用

三、 Less中的注釋

  1. 可以使用CSS中的注釋(//)—— 是會被編譯**的,即在.css文件中可見
  2. 也可以用//注釋 —— 不會被編譯的,不會再.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,然后輸出
}

八、 嵌套規則

兩種用法
&對偽類的使用 — 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;
}

現在的利用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();//這樣的方式是為了區分less還是css
}
引入外部的文件(一些庫或公共的)

.less文件引入
@import "base"; 默認后綴名是.less所以不用寫
.css文件引入
@import(less) "a.css"; //注意(less)有空格,貌似我沒用出來有待研究

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 再談CSS 預處理器2016-09-09 Justineo JavaScript轉自:http://efe.bai...
    抓住時間的尾巴吧閱讀 1,604評論 0 2
  • Less作為 CSS 的一種擴展,不僅完全兼容 CSS 語法,而且連新增的特性也是使用 CSS 語法,你可以在任何...
    zhangivon閱讀 584評論 0 1
  • 簡介 CSS(層疊樣式表)是一門歷史悠久的標記性語言,同 HTML 一道,被廣泛應用于萬維網(World Wide...
    老夫的天閱讀 1,994評論 1 29
  • 這幾天,心里糾結地實在難受,睜眼閉眼,仿佛他都在面前。好想鼓起勇氣,買一張高鐵票直達他的城市,告訴他:我,其實,也...
    elenahym閱讀 358評論 0 3
  • 什么是ViewPager ViewPager:實現兩個完整畫面之間的轉換 基本用法 1.在布局文件中加入ViewP...
    獅_子歌歌閱讀 529評論 0 1