less写法

http://lesscss.cn/

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

一：node上使用

    $ npm install -g less

  三个命令行用法：

     $ lessc styles.less

    $ lessc styles.less styles.css

    $ lessc styles.less styles.css

代码用法

   var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css); });

    输出

   .  class { width: 2; };

配置：

var less = require('less')

   less.render('.class { width: (1 + 1) }',

            {

              paths: ['.', './lib'], // Specify search paths for @import directives

             filename: 'style.less', // Specify a filename, for better error messages

              compress: true // Minify CSS output },

              function (e, output) { console.log(output.css); });

二 浏览器端使用

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

       <script src="less.js" type="text/javascript"></script>

增加了选项的写法

<!-- set options before less.js script --> <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script>

或者

<script src="less.js" data-poll="1000" data-relative-urls="false"></script> <link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

 

案例：

变量的使用

变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。    

@color: #4D926F;

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

等价css的

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

2.混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.rounded-corners (@radius: 5px) {     //泪如雨下啊：有了这个函数，以后再也不用每个样式里面写那么多兼容了，每次只要.rounded-corners(8px)   .rounded-corners(10px).  Awesome
    -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;
}

3.）嵌套：我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

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

4）函数和运算：  运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

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