CSS_LESS 语法/函数详解

最新推荐文章于 2023-12-21 22:19:51 发布

转载最新推荐文章于 2023-12-21 22:19:51 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ranzige/p/3654296.html

文章标签：

#javascript #ViewUI

嵌套规则

 
    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>