less(css预处理)

用法

 

1. 必须在head内

2. 样式文件必须先加载

   

   

   

 

变量

 

普通用法&＃xff1a;

&＃64;nice-blue:#555;

#header { color: &＃64;nice-blue; }

 

用变量名定义变量&＃xff1a;

&＃64;fnord: "I am fnord.";

&＃64;var: &＃39;fnord&＃39;;

content: &＃64;&＃64;var;

 

变量只能定义一次

 

混合

 

定义一些通用的属性为一个class&＃xff0c;然后在另一个class中去调用&＃xff08;id同理&＃xff09;

 

普通用法&＃xff1a;

.bordered {

    border-top: dotted 1px black;

}

#menu a{

    color:#111;

    .bordered;

}

 

带参数混合&＃xff1a;或设置默认值 .bordered(&＃64;color:#f00){...}

.bordered(&＃64;color) {

    border-top: dotted 1px black;

}

#menu a{

    color:#111;

    .bordered(blue);

}

 

 

&＃64;arguments 变量&＃xff1a;包含了所有传递进来的参数

.box-shadow( &＃64;x:0, &＃64;y:0, &＃64;blur:1px, &＃64;color:#000 ){

    box-shadow:&＃64;arguments;

}

.box-shadow(2px,5px);

输出&＃xff1a;

box-shadow:2px 5px 1px #000;

 

模式匹配

 

根据不同的参数和值

 

.mixin (dark, &＃64;color) {

    color: darken(&＃64;color, 10%);

}

.mixin (light, &＃64;color) {

    color: lighten(&＃64;color, 10%);

}

.mixin (&＃64;_, &＃64;color) {

    display: block;

}

&＃64;switch: light;

.class {

    .mixin(&＃64;switch, #888);

}

得到的css是&＃xff1a;

.class {

    color: #a2a2a2;

    display: block;

}

 

 

 

根据表达式

 

全部比较运算有   >  >&＃61;  &＃61;  &＃61;<  <

除去关键字true以外的值都被视示布尔假

所有条件用逗号进行分隔&＃xff1a;.mixin (&＃64;a) when (&＃64;a > 10), (&＃64;a <-10) { ... }

 

.mixin (&＃64;a) when (lightness(&＃64;a) >&＃61; 50%) {

    background-color: black;

}

.mixin (&＃64;a) when (lightness(&＃64;a) <50%) {

    background-color: white;

}

.mixin (&＃64;a) {

    color: &＃64;a;

}

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

得到的css是&＃xff1a;

.class1 {

  background-color: black;

  color: #ddd;

}

.class2 {

  background-color: white;

  color: #555;

}

 

根据值的类型

 

例如&＃xff0c;.mixin (&＃64;a, &＃64;b: 0) when (isnumber(&＃64;b)) { ... }

常见的检测函数&＃xff1a;iscolor、isnumber、isstring、iskeyword、isurl

判断一个值是纯数字&＃xff0c;还是某个单位量&＃xff1a;ispixel、ispercentage、isem

 

使用and / not关键字&＃xff1a;与、或条件

 

.mixin (&＃64;a) when (isnumber(&＃64;a)) and (&＃64;a > 0) { ... }

.mixin (&＃64;b) when not (&＃64;b > 0) { ... }

 

 

 

 

嵌套

 

#header        { color: black;

  .navigation  { font-size: 12px }

  .logo        { width: 300px;

    &:hover    { text-decoration: none } //&是串联选择器&＃xff0c;相当于 .logo:hover{...}

  }

}

 

运算

 

使用变量

&＃64;base: 5%;

&＃64;filler: &＃64;base * 2;

 

变量和变量的运算

&＃64;other: &＃64;base &＃43; &＃64;filler;

 

颜色&＃xff1a;除法、加法

color: #888 / 4;

background-color: &＃64;base-color &＃43; #111;

 

尺寸&＃xff1a;乘法、加法 &＃xff08;可以使用括号&＃xff09;

&＃64;var: 1px &＃43; 5;

width:(&＃64;var&＃43;5)*2;

 

穿插在复合属性中

border:(&＃64;width*2) solid black;

 

 

color函数

 

lighten(&＃64;color, 10%);

darken(&＃64;color, 10%);

saturate(&＃64;color, 10%);

desaturate(&＃64;color, 10%);

fadein(&＃64;color, 10%);

fadeout(&＃64;color, 10%);

fade(&＃64;color, 50%);

spin(&＃64;color, 10);

spin(&＃64;color, -10);

mix(&＃64;color1, &＃64;color2)

hue(&＃64;color);

lightness(&＃64;color);

&＃64;new: hsl(hue(&＃64;old), 45%, 90%); //&＃64;new 将会保持 &＃64;old的 色调, 但是具有不同的饱和度和亮度.

 

Math函数

 

round

ceil

floor

percentage

 

其他点

 

命名空间

 

1.定义一些属性集&＃xff0c;打包在bundle中

#bundle {

  .button () {

    display: block;

    &:hover { background-color: white }

  }

  .tab { ... }

  .citation { ... }

}

2.这样引入使用

#header a{

    color:orange;

    #bundle > .button;

}

 

 

作用域

 

&＃64;var: red;

#page {

  &＃64;var: white;

  #header {

    color: &＃64;var; // white

  }

}

#footer {

  color: &＃64;var; // red  

}

 

注释

 

/* hello,comment! */

// hi,comment!

但是&＃xff0c;双斜线的注释在编译的过程中会被过滤掉

 

Importing

 

&＃64;import "lib.less";

&＃64;import "lib";//可以省略.less后缀

&＃64;import "lib.css";//less不会对它进行处理

 

字符串中插入变量&＃xff1a;&＃64;{varName}

 

&＃64;base-url: "//abc.com";

background-image: url("&＃64;{base-url}/images/bg.png");

 

避免编译&＃xff1a;在字符串前加上一个 ~

 

.class{

    filter: ~"ms:always.say";

}

 

使用js表达式&＃xff1a;在字符串前后加上一个反引号

 

&＃64;var: &＃96;"hello".toUpperCase() &＃43; &＃39;!&＃39;&＃96;;

&＃64;height: &＃96;document.body.clientHeight&＃96;;

&＃64;color: color(&＃96;window.colors.baseColor&＃96;);

 

 

 

 

 

;