css-Less

• 介绍
• 语法

介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。

但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。

less需要 nodejs支持。

安装： > npm install -g less

查看:    > lessc

编译

命令编译： 

> lessc  aaa.less aaa.css

@charset "utf-8";
@bgColor:red;
body{
  background-color:@bgColor;  
}

html页面引入：

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

或

<style type="text/css" >
	@import url("index.css");
</style>

Koala外部编译器可编译Sass和Less文件：

安装地址：http://koala-app.com/index-zh.html

在内部将less文件放入到一个less文件夹下，同时建立css文件夹，则会自动将less文件转化为css文件。

因编译后的css，如果压缩，Output Style:Compress, 如果有问题不好跟踪，因此在设置中建立map地址映射（资源地图文件）。 》Setting -》Less -》Default Options -》Sourse Map.

这样就会在页面css跳出时，直接映射到less文件上。

Webstorm 内置编译器：

File-》Setting -》 Tools -》 File watcher -》 Add Less（添加Less）

注意：npm已经添加有less命令，同时 注意output路径中默认是编译到同级目录下，因此如果不同级注意 ../css/*****

语法：

•  注释
•  变量
•  混合（mixins）

 变量

@charset "utf-8";
@bColor: green;
@boderColor: red;
@imgurl: "../img";
body{
    background-color:@bColor;
}
div{
    border: solid 1px @boderColor;
}
div{
    background-image: url("@{imgurl}/01.png");
}

 变量使用

》@变量名： 变量值；   在使用的地方 @变量名， 注意变量值应为css内容。

》@变量名： 拼接字符串；      "@{变量名}拼接内容"  注意 要为{}括号

注释

　　// 单行注释，编译后不保留，因css本身不支持 //

      /**/ 多行注释，编译后保留

 混合

    犹如js函数一般，将一部分css，包裹在一个函数中，在使用的地方直接调用即可。

.font(@color: #ffffff, @size: 14px){
　　font-size: @size;
　　color: @color;
}


.error{
.font(#ff0000, 18px);
}
.normal{
　　.font();
}

 混合定义： 》.混合(@参数名:默认参数值){****}  

 注意：必须以 点 开头， 混合中的参数为形参，可传可不传，使用如同js方法一样使用即可。

// TODO