Less-學習筆記

這是less官網的介紹：

http://www.1024i.com/demo/less/document.html

你們都是在一塊兒學習，最好的地方無疑就是官網，不過每一個人學習方式和基礎不一樣，以致於學完後掌握纔會出現差別

開源中國提供了好的直接編譯器：

http://tool.oschina.net/less

接下來就開始學習和了解less的使用和優點。

 一.@：變量的使用

1.原生css的一些不方便

咱們先看咱們常常寫的css：

.aa{ height:200px; background:#066;}
.bb{ height:200px; background:#066;}
.dd{ height:200px; color:#066;width:100px;}

咱們發現，高度取值相同咱們卻要寫3次，顏色取值也是要寫屢次，這時候若是css像語言同樣，能夠定義一個變量，這裏面存放公用取值，假如能以下方式實現：

var hei1="200px";
var cor1="#066";
.aa{ height:hei1; background:cor1;}
.bb{ height:hei1; background:cor1;}
.dd{ height:hei1; color:cor1;width:100px;}

這樣咱們就會很是的方便，在書寫css的時候一樣取值應用變量就ok了。

2.less帶來的優點

經過@在less中咱們能夠定義變量和賦值，而且被任何部分去引用，還能夠二次定義替換和後定義被引用

less文件：

/*最基本變量聲明*/
@nice-blue: #5B83AD;
#dd1 { color: @nice-blue; }
/*變量內容加法操做*/
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#dd2 { color: @light-blue; }
/*變量互相引用*/
@w10: "10px";
@10: 'w10';
@content: @@10;
#dd3 { width: @content; }
/*變量的做用域和二次賦值*/
@var: "10px";
#dd4 {
    @var: "20px";
    #dd5 {
        @var: "30px";
        width: @var;
        @var: "40px";
    }
    width: @var;
}
/*變量可按需去查找*/
#dd6 {
    width: @ww;
}
@ww: "200px";

 編譯後css文件：

/*最基本變量聲明*/
#dd1 {
  color: #5B83AD;
}
/*變量內容加法操做*/
#dd2 {
  color: #6c94be;
}
/*變量互相引用*/
#dd3 {
  width: "10px";
}
/*變量的做用域和二次賦值*/
#dd4 {
  width: "20px";
}
#dd4 #dd5 {
  width: "40px";
}
/*變量可按需去查找*/
#dd6 {
  width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

 每一次註釋下都是一種用法，

我的感受相互引用和二次賦值咱們用的不會太多，用起來彷佛麻煩了，

在二次定義中咱們發現了編譯css的時候，{]做爲做用域，一樣遵循能夠訪問到外側和當前層變量的設置，並不能訪問到同級內部變量的設置。

二：Mixins：函數的使用

 1.原生css的一些不方便

咱們常常書寫的css：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee2 {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

咱們發現.bordered的定義在下面都會被使用到，若是咱們在#ee1和#ee2能直接獲取到.bordered會方便得多，相似以下的功能：

var .bordered={
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  .bordered
}
#ee2 {
  color: red;
 .bordered
}

能夠經過他的名字去引用到樣式，不過咱們可能更須要他能夠這樣實現：

.bordered{
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  .width
}
.width{
  width:20px;
  .bordered
 }
#ee1 {
  color: #111;
  .bordered
}
#ee2 {
  color: red;
 .bordered
}

css之間能夠經過類名等互相調用，而且拿到的是其中的樣式

2.less帶來的優點

less爲咱們提供了這種處理辦法，咱們能夠定義出通用和選擇器和對應樣式，而且其餘選擇器引用這個通用選擇器名字就能夠引入裏面的樣式；咱們在這種通用選擇器還能夠設置參數，和函數同樣，參數能夠賦值給裏面樣式的取值

less文件：

/*最基本通用內容使用*/
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#ee1 {
    color: #111;
    .bordered;
}
#ee2 {
    color: red;
    .bordered;
}
/*帶參數的使用*/
.width2(@w) {
    width:@w;
}
#ee3 {
    color: #111;
    .width2("100px");
}
#ee4 {
    color: red;
    .width2("200px");
}
/*多個參數使用*/
.border3(@w,@sty,@color) {
    border:@w @sty @color;
}
#ee5 {
    color: #111;
    .border3("1px","solid","#000");
}
#ee6 {
    color: red;
    .border3("3px","solid","#ccc");
}
/*多個參數經過arguments統一賦值*/
.border4(@w,@sty,@color) {
    border:@arguments;
}
#ee7 {
    color: #111;
    .border4("1px","solid","#000");
}
#ee8 {
    color: red;
    .border4("3px","solid","#ccc");
}

css文件：

/*最基本通用內容使用*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee2 {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
/*帶參數的使用*/
#ee3 {
  color: #111;
  width: "100px";
}
#ee4 {
  color: red;
  width: "200px";
}
/*多個參數使用*/
#ee5 {
  color: #111;
  border: "1px" "solid" "#000";
}
#ee6 {
  color: red;
  border: "3px" "solid" "#ccc";
}
/*多個參數經過arguments統一賦值*/
#ee7 {
  color: #111;
  border: "1px" "solid" "#000";
}
#ee8 {
  color: red;
  border: "3px" "solid" "#ccc";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

arguments統一變量參數賦值，針對複合樣式是很是有用的，不帶參數處理，那就是徹底引用樣式了，帶了參數，咱們能夠在使用通用樣式名的時候去根據狀況去賦值

3.less函數mixin的其餘提供

：：：：：!important咱們能夠加上，這個優先權的設置在ie上有時候仍是要用的

：：：：：在定義通用加參數咱們能夠認識默認值的，引用時不傳入實際參數就會採用默認取值

less：

/*帶參數的使用*/
.width2(@w:20px) {
    width:@w;
}
#ee3 {
    color: #111;
    .width2()!important;
}
#ee4 {
    color: red;
    .width2("200px");
}

css：

/*帶參數的使用*/
#ee3 {
  color: #111;
  width: 20px !important;
}
#ee4 {
  color: red;
  width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

 

三：嵌套使用

1.原生css的一些不方便

 針對層級嵌套，咱們原生css寫法：

.box{height:200px;}
.box div{ width:300px;}
.box div a{ color:#0C9;}

 咱們會以爲選擇器太多重複了，但願能實現以下的處理：

.box{height:200px;div{ width:300px;a{ color:#0C9;}}}

 他的後代元素就放在定義裏面

2.less帶來的優點

less幫咱們實現了這種免去重複選擇器的功能

less文件：

.box{
 height:200px;
 div{ 
  width:300px;
  a{ color:#0C9;}
 }
}

css文件：

.box {
  height: 200px;
}
.box div {
  width: 300px;
}
.box div a {
  color: #0C9;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

3.less嵌套僞類和篩選處理

：：：：：：&的使用，咱們看下面幾種原生css寫法

.box div a {
  color: #0C9;
}
.box div a.fous {
  width: 200px;
}
.box div a:hover {
  color: #000;
}

僞類效果和篩選器的使用是很是常見的，僞類除了：hover還有：first：last：active等；

篩選的實現就是.a.b或者div.a或者div.a.b.c這種形式

less也爲咱們提供了支持，就是在選擇器前加上 &，less文件：

.box{
 height:200px;
 div{ 
  width:300px;
  a{ color:#0C9;
   &.fous{width: 200px;}
   &:hover{color: #000;}
  }
 }
}

生成的css文件：

.box {
  height: 200px;
}
.box div {
  width: 300px;
}
.box div a {
  color: #0C9;
}
.box div a.fous {
  width: 200px;
}
.box div a:hover {
  color: #000;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

在定義樣式裏面經過 & 咱們就會把 &後面選擇器升一級，而且緊跟在上一級後面造成新的定義

4.less嵌套媒體查詢處理

原生css寫法：

@media screen and (max-width : 500px) {
 a{ color:#0C9;}
}
@media screen  and (min-width : 501px) and (max-width : 1024px) {
 a{ color:#000;}
}
@media screen and (min-width : 1024px) {
 a{ color:#ddd;}
}

咱們經過less去書寫：

a{ 
 @media screen and (max-width : 500px) {
  color:#0C9;
 }
 @media screen  and (min-width : 501px) and (max-width : 1024px) {
  color:#000;
 }
 @media screen and (min-width : 1024px) {
  color:#ddd;
 }
}

對比原生其實優點不是很大，原本這就是個麻煩的東西，能夠原諒

編譯後的css：

@media screen and (max-width: 500px) {
  a {
    color: #0C9;
  }
}
@media screen and (min-width: 501px) and (max-width: 1024px) {
  a {
    color: #000;
  }
}
@media screen and (min-width: 1024px) {
  a {
    color: #ddd;
  }
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

四.less系統函數的使用

這個就很是簡單了，和說的同樣就是用於計算和轉化的，

系統函數手冊地址：http://www.1024i.com/demo/less/reference.html 

咱們使用幾個測試一下：

@aa:0.5;
.dd{height:percentage(@aa);}
@bb:0.8;
.ee{height:pow(@bb,2);}

編譯後：

.dd {
  height: 50%;
}
.ee {
  height: 0.64;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

五.寫一個小頁面

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet" type="text/css" href="less.css"/>
</head>
<body>
 <div class="demo">
     <div class="demo-header">
         <span class="left">標題</span>
            <a href="#2" class="right">更多</a>
        </div>
        <div class="demo-con">
         <a href="#2">1111111111</a>
            <a href="#2">22222222222</a>
            <a href="#2">33333333333</a>
            <a href="#2">4444444444</a>
            <a href="#2">555555555</a>
        </div>
    </div>
</body>
</html>

書寫less：

.left{float:left;}
.right{float:right;}
@colorlink:#ddd;
@colorhover:#ffa;
.he50{
 height:50px;
 line-height:50px;
}
.demo{
 width:500px;
 height:500px;
 .demo-header{
  .he50;
  span{
   color:#000;
  }
  a{
   color:@colorlink;
   float:right;
   margin:0 10px;
   &:hover{color:@colorhover;}
  }
 }
 .demo-con{
  a{
   display:block;
   .he50;
   color:@colorlink;
   &:hover{color:@colorhover;}
  }
 }
}

轉義後：

.left {
  float: left;
}
.right {
  float: right;
}
.he50 {
  height: 50px;
  line-height: 50px;
}
.demo {
  width: 500px;
  height: 500px;
}
.demo .demo-header {
  height: 50px;
  line-height: 50px;
}
.demo .demo-header span {
  color: #000;
}
.demo .demo-header a {
  color: #ddd;
  float: right;
  margin: 0 10px;
}
.demo .demo-header a:hover {
  color: #ffa;
}
.demo .demo-con a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #ddd;
}
.demo .demo-con a:hover {
  color: #ffa;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

很簡單，很差看，最簡單使用了嵌套，變量和函數通用處理，也可見得出項目越大的話使用會更加方便。

五.其餘

咱們只是最簡單的使用和了解經常使用的方法，高級的都被去掉了，好比函數裏面的處理，嵌套&的高級使用等

除了高級的其實還有外部文件引用等。