Less语言与CSS

1.变量

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

2.混合： class B引入一个定义好的class A

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

3.嵌套规则

一个选择器中嵌套另一个选择器来实现继承

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

4.函数 & 运算

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

5.@arguments

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

6.判断：多个条件用“，”隔开，都符合才为true

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

常见的检测函式：

iscolor
isnumber
isstring
iskeyword
isurl

判断一个值是纯数字，还是某个单位量，可以使用下列函式：

ispixel
ispercentage
isem

& 符号的使用：写串联选择器，对于伪类尤其有用

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

7.Color 函数

颜色会先被转化成 HSL 色彩空间

lighten(@color, 10%);     // 返回比color颜色浅10%
darken(@color, 10%);      // 返回比color颜色暗10%

saturate(@color, 10%);    // 更饱和
desaturate(@color, 10%);  // 不饱和
fadein(@color, 10%);      // 不透明
fadeout(@color, 10%);     // 更透明
fade(@color, 50%);        // 透明性

spin(@color, 10);         // 返回色泽高10度的颜色
spin(@color, -10);        //

mix(@color1, @color2);    // 混合

8.Math 函数

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

9.命名空间

#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;
}

10.作用域

首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;

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

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

11.Importing

@import "lib.less"; //后缀可不带
@import "lib";

@import "lib"; //不用Less处理

12.字符串插值@{}

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

13.避免编译：字符串前加上一个 ~，用 “”包含

14.JavaScript表达式：加上反引号`

使用

1.客户端使用

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

<script src="less.js" type="text/javascript"></script>

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。

要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

2.在服务器端

$ npm install less

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

配置

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Minify CSS output
});

3.在命令行下使用

终端调用 LESS 解析器

$ lessc styles.less

将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件

$ lessc styles.less > styles.css

使用

1.客户端使用

监视模式

2.在服务器端

3.在命令行下使用

猜你喜欢