less

less

---

环境安装

一、安装nodejs

在部分win8系统当中没法安装：

解决办法的是 已管理员权限运行cmd而后再按写命令切换到安装包目录，直接命令执行

二、安装完成nodejs以后

检测是否安装完成 node –v 查看版本

而后检测 npm是否自带 npm –v 查看版本

三、命令行安装：npm install –g less

四、Lessc –v 查看版本 是否安装成功

五、lessc test.less test.css,编译成css

介绍

官网 http://lesscss.org/

中文网 (http://lesscss.cn/) http://www.1024i.com/demo/less/

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义本身的样式规则，这些规则最终会经过解析器，编译生成对应的 CSS 文件。LESS 并无裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

webstorm中自动编译：

自动：新建一个less文件，webstorm顶部会有提示是否监听动态编译，点击yes，肯定

手动：设置=》Tools=》File Watchers =》设置选项

file type：less

program：找到node中的lessc.cmd解析器

语法

一、/注释：在css当中可使用，全部编译的过程中生成在css文件/ 二、//注释：css不支持,不会编译在css文件

三、必须写好 @charset "UTF-8";在编译，若是晚了就删掉css从新编译

变量

一、必须@前缀，：是等于的意思，必须分号结束；

二、不能以数组开头，不能包含特殊字符，区分大小写

三、变量用于字符拼接使用方法

 

 

 

 

 

 

 

 

@mainColor:#e92323;

@className:box;

div{

  background: @mainColor;

}

a:hover{

  color: @mainColor;

}

.@{className}{

  color: @mainColor;

}

 

 

Mixin混入

类混入

 

 

 

xxxxxxxxxx

 

 

 

 

.w50{

  width: 50%;

}

.f_left{

  float: left;

}

.f_right{

  float: right;

}

/*类混入*/

.w50-f_left{

  .w50();

  .f_left();

}

 

 

函数混入

定义函数

函数不会被翻译成css，调用才会

 

 

 

xxxxxxxxxx

 

 

 

 

.f_left(){

  float: left;

}

.f_right(){

  float: right;

}

 

 

带参数的函数及调用

参数能够有默认值

 

 

 

xxxxxxxxxx

 

 

 

 

.w50(){

  width: 50%;

}

.f(@direction:left){//给参数设置默认值

  float: @direction;

}

.borderRadius(@width:100px){

  border-radius: @width;

  -webkit-border-radius:@width;

  -moz-border-radius:@width;

  -o-border-radius:@width;

  -ms-border-radius:@width;

}

.w50-f_left{

  .w50();//调用函数

  .f(right);//调用函数

  .borderRadius(20px);//调用函数

}

 

 

嵌套

一、后代关系

二、须要链接的状况

 

 

 

xxxxxxxxxx

 

 

 

 

.wjs_app{

  display: block;

  img{

    display: none;

  }

  /*须要链接的状况：&*/

  &:hover{

    img{

      display: block;

      position: absolute;

      left: 50%;

      margin-left:-60px;

      border: 1px solid #ccc;

      border-top: none;

      top:40px;

      z-index: 100000;

    }

  }

  > div{

    display: block;

  }

}

 

 

import导入

已有一个banner.less

 

 

 

xxxxxxxxxx

 

 

 

 

@import "banner";

 

 

运算及函数

 

 

 

xxxxxxxxxx

 

 

 

 

@num:5;

ul{

  width: 100%*@num;

  li{

    width: 100%/@num;//数值计算

    color: red+yellow+blue;//颜色计算

    background: gray*0.3;

    /*内置函数*/

    border-color: darken(red,20%);//内置函数

  }

}

 

 

使用

• 没法在浏览器端直接使用、
• 浏览器不识别less
• 必须解析成css代码
• 经过less解析插件（javascript插件）http://lesscss.cn/#download-options下载less.js
• 要加type属性
• less.watch()自动更新无需刷新
• 以http形式打开网页预览

 

 

内置函数

例子

 

 

 

xxxxxxxxxx

 

 

 

 

@back:#333;

.test{

  border: 1px solid @back*2;

  background: lighten(#000, 10%);

  color:darken(#000, 10%);

}

 

 

escape(@string); // 经过 URL-encoding 编码字符串

e(@string); // 对字符串转义

%(@string, values...); // 格式化字符串

unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位

color(@string); // 将字符串解析为颜色值

data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()

ceil(@number); // 向上取整

floor(@number); // 向下取整

percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%

round(number, [places: 0]); // 四舍五入取整

sqrt(number); // * 计算数字的平方根

abs(number); // * 数字的绝对值

sin(number); // * sin函数

asin(number); // * arcsin函数

cos(number); // * cos函数

acos(number); // * arccos函数

tan(number); // * tan函数

atan(number); // * arctan函数

pi(); // * 返回PI

pow(@base, @exponent); // * 返回@base的@exponent次方

mod(number, number); // * 第一个参数对第二个参数取余

convert(number, units); // * 在数字之间转换

unit(number, units); // * 不转换的状况下替换数字的单位

color(string); // 将字符串或者转义后的值转换成颜色

rgb(@r, @g, @b); // 转换为颜色值

rgba(@r, @g, @b, @a); // 转换为颜色值

argb(@color); // 建立 #AARRGGBB 格式的颜色值

hsl(@hue, @saturation, @lightness); // 建立颜色值

hsla(@hue, @saturation, @lightness, @alpha); // 建立颜色值

hsv(@hue, @saturation, @value); // 建立颜色值

hsva(@hue, @saturation, @value, @alpha); // 建立颜色值

hue(@color); // 从颜色值中提取 hue 值（色相）

saturation(@color); // 从颜色值中提取 saturation 值（饱和度）

lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）

hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）

hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）

hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）

red(@color); // 从颜色值中提取 'red' 值（红色）

green(@color); // 从颜色值中提取 'green' 值（绿色）

blue(@color); // 从颜色值中提取 'blue' 值（蓝色）

alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）

luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）

saturate(@color, 10%); // 饱和度增长 10%

desaturate(@color, 10%); // 饱和度下降 10%

lighten(@color, 10%); // 亮度增长 10%

darken(@color, 10%); // 亮度下降 10%

fadein(@color, 10%); // 透明度增长 10%

fadeout(@color, 10%); // 透明度下降 10%

fade(@color, 50%); // 设定透明度为 50%

spin(@color, 10); // 色相值增长 10

mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色

greyscale(@color); // 彻底移除饱和度，输出灰色

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 若是 @color1 的 luma 值 > 43% 输出 @darkcolor，不然输出 @lightcolor

multiply(@color1, @color2);

screen(@color1, @color2);

overlay(@color1, @color2);

softlight(@color1, @color2);

hardlight(@color1, @color2);

difference(@color1, @color2);

exclusion(@color1, @color2);

average(@color1, @color2);

negation(@color1, @color2);

iscolor(@colorOrAnything); // 判断一个值是不是颜色

isnumber(@numberOrAnything); // 判断一个值是不是数字（可含单位）

isstring(@stringOrAnything); // 判断一个值是不是字符串

iskeyword(@keywordOrAnything); // 判断一个值是不是关键字

isurl(@urlOrAnything); // 判断一个值是不是url

ispixel(@pixelOrAnything); // 判断一个值是不是以px为单位的数值

ispercentage(@percentageOrAnything); // 判断一个值是不是百分数

isem(@emOrAnything); // 判断一个值是不是以em为单位的数值

isunit(@numberOrAnything, "rem"); // * 判断一个值是不是指定单位的数值