less_入门

less is more, Than CSS
CSS预处理器
Less CSS是一种动态语言，属于CSS预处理语言的一种，她使用类似于CSS的语法，为CSS赋予额动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护
LESS CSS可以在多种语言、环境中使用，包括浏览器端，桌面客户端、服务器端

先建一个文件main.less 这时后缀名就不是css了，在里面声明头部

@charset"utf-8"

通过koala软件把我们写的less编译成css
注意，引用的还是css,不是less
我们编辑的是less文件

2.less的注释

/**/ 会被编译
// 不会被编译
在css中没有//

3.变量
在less中可以使用@符号定义变量
@变量名:值

@text_width:300px;
//注意，是冒号，不是赋值等于号
.box {
  width:@text_width;
  height:100px;
  background: green;
}

4.混合

我们写了一个样式：

.border {
  border:5px solid pink;
}

这个样式想在某个div里面用，以往我们要在class中加上这个类名，现在直接在css中引用就行

.box {
  width:@text_width;
  height:100px;
  background: green;

  .border;
}

所以说我们可以混合使用我们定义的样式

混合可带参数：

.border2(@border_width){
  border: @border_width solid yellow
}
.box {
  width:@text_width;

  .border2(10px);
}

这样的话边框的像素，就不会固定下来

混合–默认参数

.border3(@border_width:30px){
  border: @border_width solid pink
}
.box {
  width:@text_width;
  .border3();
}

不写参数默认的是30px,但是例2如果是.border2(); less就会报错

什么时候用这种混合比较方便呢？
比如说CSS3各种兼容：

.border_radius(@radius:5px){
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius;
}
.test {
  .border_radius();
}

我们就不需要每次写三行了，如果不满意像素也可以自己改

5.匹配模式

纯css写一个三角：

.sanjiao {
  width:0;
  height:0;
  overflow:hidden;
// 处理IE6最小高度的问题
   border-width:10px;
   border-color: red transparent transparent transparent;
   想要哪里为底就显示哪个边框的颜色，其余的边框的颜色设置为透明
   border-style: solid dashed dashed dashed;
   //因为在IE6中会有一个黑色的边，解决方法是哪个方向有颜色，让它变成solid，其余的变成dashed
}

OK，我们现在开始也什么是匹配模式：

//匹配模式

.triangle(top,@w:5px,@c:#ccc){
   border-width:@w;
   border-color: transparent transparent @c transparent;
   border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
   border-width:@w;
   border-color: @c transparent transparent transparent;
   border-style: solid dashed dashed  dashed;
}
.triangle(left,@w:5px,@c:#ccc){
   border-width:@w;
   border-color: transparent @c transparent transparent;
   border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
   border-width:@w;
   border-color: transparent transparent transparent  @c;
   border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
  width:0;
  height:0;
  overflow:hidden;
}
.sanjiao1{
  .triangle(top);
}

根据我们输入的参数自动去匹配是哪个，其中@_样式放置的是这个样式的公共部分
这样我们想要任何方向的小三角自己定义就行

匹配模式定位：

//匹配模式定位
.pos(a) {
  position:absolute;
}
.pos(r) {
  position: relative;
}
.pos(f){
  position:fixed;
}
.pipei {
  width:200px;
  background:pink;
  height:200px;
  .pos(f);
  top:0;
}

相当于传了哪个字符，就用了哪个css样式

6.运算
less中的运算任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号之中
例如： +-*/

@test_01:300px;

.box_01 {
  width:@test_01 + 20;
  background: yellow;
  height:200px;
}
//注意20 可以带像素，也可以不带像素，两者只要有一个带像素就行

也可以带小括号

.box_01 {
  width:(@test_01 - 200) * 5;
}

颜色也可以运算：

 background: #ccc - 10;

比#ccc颜色暗了一点
颜色加减法基本不用

7.嵌套规则：

.list {
  height: 60px;
  padding: 0 10px;
  width: 800px;
  margin: 0 auto;

  li {
    padding: 0 20px;
    background: #CCC; 
  }
  a {
    float:left;
    &:hover{
      color:red
    };
  }
  span {
    float:right;
  }
}

&:代表它上一层的选择器
比以前写ul li 要省事

8.arguments 变量
@arguments包含了所有传递进来的参数
如果你不想单独处理每一个参数的话可以这样写：

.border_arg(@w:30px,@c:red,@XX:solid){
  border:@arguments
}
.test_arguments{
  .border_arg()
}

.border_arg(40px)就会把属性带过去
如果你不想写参数的时候就可以用arguments

9.避免编译，！important以及总结

在less中编写：

.test_03{
  width:calc(300px-30px);
}

在相应的CSS 中：

.test_03 {
  width: calc(270px);
}

我们看到less已经帮我们计算出来了，这个CSS3属性calc是让浏览器去计算的，而不是less去执行，所以我们要避免编译
方法是在避免编译的上面加上‘~’，数值用引号包裹起来

.test_03{
  width:~'calc(300px-30px)';
}

.test_03 {
  width: calc(300px-30px);
}

就不会被编译了

！important关键字
会为所有混合所带来的样式，添加上！important

.test_important{
  .border_radius() !important;
}
.test_important {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}

10.导入样式：

@import (less) 'a.css' //导入css文件，(less)后面有一个空格
@import 'ku'  //如果不加后缀名。默认是一个ku.less文件

写在哪里就会编译在哪里