less first try

在html中引入

1

2

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet/less"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"styles.less"</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"less.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

styles.less

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<code>// 變量</code>

<code>@</code><code>color</code><code>: </code><code>#4D926F</code><code>;</code>

<code>.variable {</code>

<code>  </code><code>color</code><code>: @color;</code>

<code>}</code>

<code>// 混合</code>

<code>.rounded-corners (@radius: </code><code>5px</code><code>) {</code>

<code>  </code><code>border-radius: @radius;</code>

<code>  </code><code>-webkit-border-radius: @radius;</code>

<code>  </code><code>-moz-border-radius: @radius;</code>

<code>#header {</code>

<code>  </code><code>.rounded-corners;</code>

<code>#footer {</code>

<code>  </code><code>.rounded-corners(</code><code>10px</code><code>);</code>

<code>// 嵌套規則</code>

<code>#nest {</code>

<code>  </code><code>h</code><code>1</code> <code>{</code>

<code>    </code><code>font-size</code><code>: </code><code>26px</code><code>;</code>

<code>    </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

<code>  </code><code>}</code>

<code>  </code><code>p {</code>

<code>    </code><code>font-size</code><code>: </code><code>12px</code><code>;</code>

<code>    </code><code>a {</code>

<code>      </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>      </code><code>&amp;:hover {</code>

<code>        </code><code>border-width</code><code>: </code><code>1px</code>

<code>      </code><code>}</code>

<code>    </code><code>}</code>

<code>// 函數 &amp; 運算</code>

<code>@the-</code><code>border</code><code>: </code><code>1px</code><code>;</code>

<code>@base-</code><code>color</code><code>: </code><code>#111</code><code>;</code>

<code>@red:        </code><code>#842210</code><code>;</code>

<code>#calculate {</code>

<code>  </code><code>color</code><code>: @base-color * </code><code>3</code><code>;</code>

<code>  </code><code>border-left</code><code>: @the-border;</code>

<code>  </code><code>border-right</code><code>: @the-border * </code><code>2</code><code>;</code>

<code>#function {</code>

<code>  </code><code>color</code><code>: @base-color + </code><code>#003300</code><code>;</code>

<code>  </code><code>border-color</code><code>: desaturate(@</code><code>red</code><code>, </code><code>10%</code><code>);</code>

生成css

<code>  </code><code>color</code><code>: </code><code>#4d926f</code><code>;</code>

<code>  </code><code>border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-webkit-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>5px</code><code>;</code>

<code>  </code><code>border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>-webkit-border-radius: </code><code>10px</code><code>;</code>

<code>  </code><code>-moz-border-radius: </code><code>10px</code><code>;</code>

<code>#nest h</code><code>1</code> <code>{</code>

<code>  </code><code>font-size</code><code>: </code><code>26px</code><code>;</code>

<code>  </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

<code>#nest p {</code>

<code>  </code><code>font-size</code><code>: </code><code>12px</code><code>;</code>

<code>#nest p a {</code>

<code>  </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

<code>#nest p a:hover {</code>

<code>  </code><code>border-width</code><code>: </code><code>1px</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#333333</code><code>;</code>

<code>  </code><code>border-left</code><code>: </code><code>1px</code><code>;</code>

<code>  </code><code>border-right</code><code>: </code><code>2px</code><code>;</code>

<code>  </code><code>color</code><code>: </code><code>#114411</code><code>;</code>

<code>  </code><code>border-color</code><code>: </code><code>#7d2717</code><code>;</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1651338