css less使用

less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
自己的理解：
Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标签设置样式。比如一个最常见的需求，在当前浏览器的需要多次引用同一个重复的属性值时候，使用less设置变量就可以轻松的解决，并且可以大大的减少了后期修改属性的工作量，我们只需修改这个变量的值即可。

使用方法

1.直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成css样式而存在于当前页面。
2.首先写好.less文件的语法，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。

下面演示用less.js编写less代码的方式
1.首先新建一个less文件，已.less的后缀命名。
2.然后在html页面head里面引用该less文件
3.直接使用CDN的方式引用less.js
4.在引用less.js之前，需要一个less变量，声明编译less的环境参数，所以最终所有引用文件如下：

<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
<script>
//编写一个简单的less代码
@base: #f938ab;  //以 @ + 变量名 的方式声明变量
div{
    background-color:@base;  //可以@+变量名 直接调用
    padding:50px;
}
</script>	
    <script type="text/javascript">
    //less变量的声明必须要在less.js的引用之前
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
    </script>
    //cdn的方式引入less.js
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

//下面演示运用软件的方式编写less代码 下面使用的是Koala
打开软件是以下界面：

然后将less所在的目录拖到界面中间
直接Compile按钮。将会自动将less代码解析成css代码并生成一个less.css文件，最后将less.css文件引入html页面即可。