Less随笔

LESS随笔

less学习网址： http://www.bootcss.com/p/lesscss/

引入

在浏览器引入

• 引入.less文件时需要设置rel的属性值为“stylesheets/less”

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

• 然后引入less.js

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

  注意.less文件必须在less.js之前引入

在服务器端使用

• 安装

npm install less --save

• 使用

只要安装了LESS，就可以在NODE中如此使用

var less = require('less');

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

会输出

.class {
  width: 2;
}

LESS的语法

LESS是CSS的一种扩展.在现有CSS的基础上添加许多功能

变量

@color:#000;
@colors:#111 + @color;
#header{color:@colors}
编译之后输出
#header{color:#111}

注意：LESS中变量为常量，只能定义一次

混合

在LESS中我们可以定义一些通用的属性为class类，然后再另一个类中去调用这个类：

.father{
  margin:2px;
  padding:2px
}
如果需要调用这个通用的类则这样使用：
.child{
  color：#fff；
  .father；
}

带参数的混合

在LESS中还可以像函数一样去定义带参数订单属性集合

.father(@color:red){
  color:@color;
  background-color:@color
}
在其他的类中这样调用
#header{
  .father(#000)
}
解析生成
 #header{
  color:#000;
  background-color:#000
}          

@argument变量

@argument包含了传递进来的参数，可以带有默认值

.father(@x:0,@y:0,@blur:1px,@color:#000){
  box-shadow:@arguments;
}
.father(2px,5px)
将会输出
box-shadow:2px,5px,1px,#000

嵌套规则

LESS可以让我们以嵌套的方式编写层叠样式

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

运算

任何数字，颜色或者变量都可以参与进来运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS可以分辨颜色和单位

Color函数

LESS提供一系列颜色运算函数，颜色会被转化成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

LESS中的Math函数

round() //四舍五入
ceil（） //向上取整
floor（） //向下取整
percentage（0.5） //输出50%，将一个值转化为百分比

命名空间

有时候为了更好的组织CSS或为了更好的封装，可以直接定义一个属性集，后面可以重复使用

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

需要使用时如此使用

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

作用域

LESS的作用域和其他编程语言类似，首先会从本地查找，没找到的话会像父级查找，直到找到为止

@var: red;

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

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

Importing

通过@import引入

@import “style.css”

js表达式

js表达式也可以在.less中使用，可以通过反引号的方式使用