less学习笔记

什么是less

css预编译器，css预编译处理工具，可以让我们像编程一样去编译css，总之是很爽了

less的使用

参考教程其实是有很多的方法，这里我就学这一种，也是我觉得最好的，就是预编译功能，新建less文件，然后使用客户端程序编译成css文件，然后直接引用即可

less的语法

注释

/**/ 这个会编译成css注释
// 这个不会，那么要不要显示在css文件中，就看你自己选择了

变量

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

混合

举个例子：这是class A，其中有些样式，然后class B里面有一些样式恰好和A的一样，这是我们就可以把A,直接写进B里面替代那些重复的样式通用

.bordered {//通用类 A
  border-bottom: solid 2px black;
}
#menu a {//需要引用的类 B
  .bordered;
}
#menu a {//解析后
  color: #111;
  border-bottom: solid 2px black;
}

这里不仅是.class,什么#id,tag都是可以滴，不挑食

带有参数的混合

看到这是无语了，前些天看的js的oop编程各种头大，连css也沦陷了，也别什么混合了，明明是个函数，什么无参，有参，竟然还有arguments默认变量，慢慢习惯了…..
有参：

.border-radius (@radius) {//或者(@radiue:5px)
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px)

无参：

ap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

arguments变量：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  //arguments这个变量存储了所有传入的参数
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

模式匹配和导引表达式

前面差不多知道了含参的情况，再给变量传递不同的值时，对应css的属性值为传入的值，刚接触暂时这样理解模式匹配吧，模式匹配是干什么的呢。前面是改变属性值，但是我要是想改变属性怎么办，这时候就可以用模式匹配了，在参数中给个常量，匹配了就使用这个.class不匹配就使用其它的或不使用。

.mixin (dark, @color) {//模式一
  color: darken(@color, 10%);
}
.mixin (light, @color) {//模式二
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {//为变量，通用模式
  display: block;
}

调用

@switch: light;
.class{
  .mixin(@switch, #888);//匹配模式和通用模式
}

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
至于官方文档上说的，那啥匹配多个参数，似懂非懂…..

导引表达式

这个其实其实就是条件判断，相比于模式匹配的值匹配而言。关键字就是when.就是那首歌啦，当山峰没有棱角的时候，让它的棱角(border-radius)是5px;这个关键后面就是比较表达式了。什么> >= = <= <,还有一些函数判断值类型或者单位类型;;,

值类型	值类型	单位类型
iscolor()	isnumber()	ispercentage()
iskeyword()		ispixel()
isstring()	isurl()	isem()

给个案例

.mixin (@a) when (@a > 10), (@a < -10) { 
... }

最后就是not实现条件或，and关键字实现条件与

嵌套规则

平常我们这样写

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

在less中

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

或者

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

ps:这里面&符号起到的类似于字符串拼接意思，对于：hover等伪类很有用

运算

这个运算功能一般的就是加减乘除就行了。
然后提供了一堆的Color函数,先转化为HSL格式，然后再进行各种操作。

函数	功能
lighten(@color, 10%);	return a color which is 10% lighter than @color
darken(@color, 10%);	return a color which is 10% darker than @color
saturate(@color, 10%);	return a color 10% more saturated than @color
desaturate(@color, 10%);	return a color 10% less saturated than @color
fadein(@color, 10%);	return a color 10% less transparent than @color
fadeout(@color, 10%);	return a color 10% more transparent than @color
fade(@color, 50%);	return @color with 50% transparency
spin(@color, 10);	return a color with a 10 degree larger in hue than @color
spin(@color, -10);	return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);	return a mix of @color1 and @color2
hue(@color);	returns the hue channel of @color
saturation(@color);	returns the saturation channel of @color
lightness(@color);	returns the ‘lightness’ channel of @color

Math函数

Tables	Are
round(1.67);	returns 2
ceil(2.4);	returns 3
floor(2.6);	returns 2
percentage(0.5);	returns 50%

命名空间

更好地组织代码，重复使用的代码就可以这样

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

你只需要在 #header a中像这样引入 .button:

#header a {
  color: orange;
  #bundle > .button;
}

作用域

和其他函数编程一样啦，都是逐级向上查找

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

字符串插值和避免编译

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

我们可以将要避免编译的值用 “”包含起来，输出结果为:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

javascript表达式

这部分确实佷6，但是目前用不到就算了，就是可以在其中使用一些js的代码。