碼上快樂

相關內容    簡體    繁體

less css框架的學習

本文轉載自   查看原文   2014-03-13 16:11   4815 

     

什么是LESSCSS

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。

LESSCSS可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

語言特性快速預覽：

變量：

變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

LESS源碼：

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

編譯后的CSS：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合（Mixins）

混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。

LESS源碼：

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

編譯后的CSS：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，並且代碼看起來更加的清晰。

LESS源碼：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

編譯后的CSS：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>less</title>
    <meta name="description" content="LESSCSS���Ĺ���">
    <meta name="keywords" content="LESS,LESSCSS,CSS">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet/less" href="main.less">
    <script src="less-1.5.0.min.js"></script>
 
  </head>
  <body>
   <div id="header"></div>
   <div class="header"><h1>標題</h1><p><a href="###">less嵌套</a></p></div>
   <div id="desaturate">運算</div>
   <div id="desaturatefoot">函數</div>
   <div id="box-shadow"></div>
   <div id="footer"></div>
  </body>
</html>


main.less:

.rounded-corners (@radius: 5px) {     -webkit-border-radius: @radius;     -moz-border-radius: @radius;     -ms-border-radius: @radius;     -o-border-radius: @radius;     border-radius: @radius; }

#header {     .rounded-corners;  width:100px;  height:100px;  background:red;   } #footer {     .rounded-corners(10px);  width:100px;  height:100px;  background:red;  margin-top:100px; }

.header {     h1 {         font-size: 26px;         font-weight: bold;     }     p {         font-size: 12px;         a {             text-decoration: none;             &:hover {                 border: 1px solid red;             }         }     } }

@the-border: 1px; @base-color: #111; @red:        #842210;

#desaturate {     color: (@base-color * 3);     border-left: @the-border solid red;     border-right: (@the-border * 2) solid red;  width:50%;  height:100px;  background:green; } #desaturatefoot {     color: (@base-color + #003300);     border: 3px  solid desaturate(@red, 10%);//飽和度比@red少10%  width:50%;  height:100px;  background:gray; }

//@arguments 包含所有傳遞進來的參數 .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {     box-shadow: @arguments;     -moz-box-shadow: @arguments;     -webkit-box-shadow: @arguments;  width:50%;  height:100px;  background:green; }

#box-shadow{     .box-shadow(2px, 5px); }

函數和運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼，如果你願意的話可以操作屬性值。

LESS源碼：

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

編譯后的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

更多說明

更多更詳細的語法特性請參見語言文檔

快速上手

LESSCSS的使用是很容易的，首先，使用你最常使用的代碼編輯器，按LESSCSS的語法規則寫好.less文件，接下來，使用編譯工具它編譯成.css，最后再引入頁面即可。

GUI編譯工具

為方便起見，建議初學者使用GUI編譯工具來編譯.less文件，以下是一些可選GUI編譯工具：

  1. koala(Win/Mac/Linux)

    國人開發的LESSCSS/SASS編譯工具。下載地址：http://koala-app.com/index-zh.html

  2. Codekit(Mac)

    一款自動編譯Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含語法檢查、圖片優化、自動刷新等附加功能。下載地址http://incident57.com/codekit/

  3. WinLess(Win)

    一款LESS編譯軟件。下載地址http://winless.org/

  4. SimpleLess(Win/Mac/Linux)

    一款LESS編譯軟件。下載地址http://wearekiss.com/simpless

Node.js庫

LESSCSS官方有一款基於Node.js的庫，用於編譯.less文件。

使用時，首先全局安裝less（部分系統下可能需要在前面加上sudo切換為超級管理員權限）：

npm install -g less

接下來就可以使用lessc來編譯.less文件了：

lessc example/example.less example/example.css

更多選項可以直接運行lessc查看說明。

瀏覽器端使用

LESSCSS也可以不經編譯，直接在瀏覽器端使用。

使用方法：

  1. 下載LESSCSS的.js文件，例如lesscss-1.4.0.min.js。

  2. 在頁面中引入.less文件

    <link rel="stylesheet/less" href="example.less" />

    需要注意rel屬性的值是stylesheet/less，而不是stylesheet。

  3. 引入第1步下載的.js文件

    <script src="lesscss-1.4.0.min.js"></script>

需要特別注意的是，由於瀏覽器端使用時是使用ajax來拉取.less文件，因此直接在本機文件系統打開（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less文件，導致樣式無法生效。

還有一種情況容易導致樣式無法生效，就是部分服務器（以IIS居多）會對未知后綴的文件返回404，導致無法正常讀取.less文件。解決方案是在服務器中為.less文件配置MIME值為text/css（具體方法請搜索）。或者還有一種更簡單的方法，即是直接將.less文件改名為.css文件即可。

更多說明

更多使用上的說明請參見使用說明。

更新說明

1.4.0

1.4.0已經正式發布，這個版本引入了一些新特性，如派生（extends）、data-uri函數以及更多的數學函數。詳細的變更情況請查看更新日志。

在這個版本中，有一些不兼容的變化。

  • @import-once被移除，現在@import的默認行為就是只引入一次（和舊版本@import-once功能一樣）。
  • 像(~".myclass_@{index}") {...}這樣在選擇器中插入變量的語法不再被支持，請使用.myclass_@{index} {...}來代替，這種新語法在1.3.1以上版本中都支持。
  • 用於瀏覽器的less.js不再包含es5-shim.js。因為我們之前用的es5-shim.js版本中有一些錯誤，而新版本的體積又明顯變大了。使用時請根據需要選用es5-shim或者是只在現代瀏覽器中使用。

  • 引入了一種“嚴格運算模式”（可選），在嚴格運算模式中，數學運算必須被括號包裹，如：

    (1 + 1)  // 2
1 + 1    // 1+1

    在1.4.0中，這個選項默認被關閉，但我們希望在未來的某個時間將它默認設置為開啟。我們建議你升級代碼的寫法，並打開嚴格運算模式。（在命令行中加上-strict-math=on或者是在JavaScript代碼中加入strictMath:true。）帶括號的寫法與舊版的less編譯器兼容。

  • 引入了一種“嚴格單位模式”（strictUnits:true或者strict-units=on），這將強制讓lessc驗證單位的合法性。例如4px/2px結果為2，而不是2px，而4em/2px將報錯。目前沒有將這個選項默認打開的計划，但它可能在排查bug的時候有用。
  • 單位的運算功能已完成，所以(4px * 3em) / 4px以前結果是3px，但現在是3em。但是，我們沒有取消有單位數字向無單位數字轉換的功能，除非“嚴格單位模式”被開啟。

你可以現在就將選擇器中插入變量、運算、單位的涉及到的變化應用到代碼中去，這些變化能很好地與less 1.3.3兼容。

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>less</title>
    <meta name="description" content="LESS CSS框架簡單實例">
    <meta name="keywords" content="LESS,LESSCSS,CSS">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet/less" href="main.less">
    <script src="less-1.5.0.min.js"></script>
 
  </head>
  <body>
   <div id="header"></div>
   <div class="header"><h1>標題</h1><p><a href="###">less嵌套</a></p></div>
   <div id="desaturate">運算</div>
   <div id="desaturatefoot">函數</div>
   <div id="box-shadow"></div>
   <div id="footer"></div>
  </body>
</html>

main.less文件類似於css文件

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
 width:100px;
 height:100px;
 background:red;
 
}
#footer {
    .rounded-corners(10px);
 width:100px;
 height:100px;
 background:red;
 margin-top:100px;
}

.header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border: 1px solid red;
            }
        }
    }
}

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#desaturate {
    color: (@base-color * 3);
    border-left: @the-border solid red;
    border-right: (@the-border * 2) solid red;
   width:50%;
   height:100px;
   background:green;
} 

 

#desaturatefoot {
    color: (@base-color + #003300);
    border: 3px  solid desaturate(@red, 10%);//飽和度比@red少10%
    width:50%;
    height:100px;
    background:gray;
}

//@arguments 包含所有傳遞進來的參數
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
 width:50%;
 height:100px;
 background:green;
}

#box-shadow{
    .box-shadow(2px, 5px);
}

GUI編譯工具koala(Win/Mac/Linux)就是講。less文件轉換成css文件

   


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 LESS CSS 框架簡介(轉) react dva框架 使用less 和css modules less入門及基礎學習（建議有css基礎） 快速生成CSS--LESS學習總結 CSS和LESS less學習----less變量 【css】動態的 css——less YUI3 CSS框架學習 less學習---less的嵌套規則 LESS CSS 實例
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM