CSS_LESS 语法/函数详解

最新推荐文章于 2024-11-25 05:45:00 发布

转载最新推荐文章于 2024-11-25 05:45:00 发布 · 162 阅读

文章标签：

#javascript #ViewUI

本文介绍 LESS CSS 的高级特性，包括嵌套规则、变量使用、伪类写法及颜色函数等。通过实例展示了如何利用这些特性提高 CSS 代码的可维护性和复用性。

嵌套规则

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; }

伪类写法:

1a{

2    color: red;

3    &:hover{color:blue;}

4    &:active{color:green;}

5}

COLOR颜色函数:

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

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

03 

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

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

06 

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

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

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

10 

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

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

13 

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

DEMO_HTML:

谷歌/火狐浏览器适用,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>