CSS_LESS 文法/函數詳解

最後更新：2014-04-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

嵌套規則

`01`	`#header {` `color:` `black; }#header .navigation {` `font-size:` `12px;`

`02`	`}#header .logo {`

`03`	`width:` `300px;`

`04`	`}#header .logo:hover {` `text-decoration:` `none;`

05 }

06

`07`	`#header {` `color:` `black; .navigation {` `font-size:` `12px;`

`08`	`} .logo {` `width:` `300px;`

`09`	`&:hover {` `text-decoration:` `none` `}`

10 }

11 }

變數:

`1`	`@nice-blue:` `#5B83AD;`

`2`	`@light-blue: @nice-blue` `+` `#111;`

`3`	`#header {` `color: @light-blue; }`

偽類寫法:

1 a{

`2`	`color:` `red;`

`3`	`&:hover{color:blue;}`

`4`	`&:active{color:green;}`

5 }

COLOR顏色函數:

`01`	`lighten(@color,` `10%); // return a color which is` `10%` `lighter than @color`

`02`	`darken(@color,` `10%); // return a color which is` `10%` `darker than @color`

03

`04`	`saturate(@color,` `10%); // return a color` `10%` `more saturated than @color`

`05`	`desaturate(@color,` `10%); // return a color` `10%` `less saturated than @color`

06

`07`	`fadein(@color,` `10%); // return a color` `10%` `less` `transparent` `than @color`

`08`	`fadeout(@color,` `10%); // return a color` `10%` `more` `transparent` `than @color`

`09`	`fade(@color,` `50%); // return @color with` `50%` `transparency`

10

`11`	`spin(@color,` `10); // return a color with a` `10` `degree` `larger` `in hue than @color`

`12`	`spin(@color,` `-10); // return a color with a` `10` `degree` `smaller` `hue than @color`

13

`14`	`mix(@color1, @color2); // return a` `mix` `of @color1` `and @color2`

DEMO_HTML:

Google/Firefox瀏覽器適用,IE瀏覽器不相容.

`01`	`<!doctype html>`

02 <html>

03 <head>

`04`	`<meta` `charset="UTF-8">`

`05`	`<title>Document</title>`

`06`	`<link` `rel="stylesheet/less"` `type="text/css"` `href="less/styles.less"` `/>`

`07`	`<script` `src="less-1.5.0.min.js"` `type="text/javascript"></script>`

08 </head>

09 <body>

`10`	`<div` `id="content">`

`11`	`<div` `style="height:30px;color:#FFF;background-color:#000;">對照文本顏色</div>`

`12`	`<h1>這裡是標題啦</h1>`

`13`	`<h2>內容標題檔案</h2>`

`14`	`<h3>再一種顏色</h3>`

`15`	`<p>一種新顏色</p>`

16 </div>

`17`	`<script>`

`18`	`less.watch(); //自動重新整理`

`19`	`</script>`

20 </body>

21 </html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS_LESS 文法/函數詳解

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support