less的简单整理

less对比原生的css有很大优势，至少维护起来容易的多（别瞎写的情况下）

想想吧：

1. 产品突然说这个风格我不喜欢 换个风格吧（很合理吧）
2. 不同的class有很多相同的style（很正常吧）
3. 原本在同一个dom下的样式 在css文件里 分布的到处都是（很常见吧）
4. 想引入别人的css但是又不想直接cv大法

这些问题在css里都存在，解决这些问题的方式也有，但是很麻烦/可读性不高

为了解决这些问题less的引入就有道理了

简单说less对比css的优势：

1. 变量
2. 导入
3. 嵌入
4. 混入
5. 函数

1.变量

@color:red
div{
background:@clolr
}

2.导入

//output css
@import "studyLess.css";
.study {
  color: #ff6a00;
}

--@import 可以根据文件扩展名不同而用不同的方式处理
如果文件是.css的扩展名，将处理为CSS和@import语句保持原样。
如果为其他的扩展名将处理为less导入。
如果没有扩展名，将会为他添加.less扩展名，作为less导入。
example:
@import "foo";      // foo.less 导入为less文件
@import "foo.less"; // foo.less 导入为less文件
@import "foo.php";  // foo.php  导入为less文件
@import "foo.css";  // 语句保持原样，导入为css文件

以下选项可用于覆盖此行为。
语法：@import (keyword) "filename";
reference: 使用该less文件但是不输出它
inline: 包括在源文件中输出，但是不作处理
less: 将该文件视为less文件，无论其扩展名为什么
css: 将文件视为css文件，无论扩展名为什么
once: 该文件仅可导入一次 (默认)
multiple: 该文件可以多次导入
optional: 当没有发现文件时仍然编译

多个关键字 @import 是允许的，你必须使用逗号分隔关键字：
example: @import (optional, reference) "foo.less";

3.嵌入

@charset "UTF-8";
@mainColor:red;
.w50() {
  width: 50%;
}
.f(@direction){
  float: @direction;
}
.lwhb {
  .w50();
  .f(left);
  a {
    display: block;
    &:hover {
      color: @mainColor;
    }
  }
  >div {
    .w50();
  }
}

//在相同父节点下 很多子属性的合集

4.混入

Minix:函数混入/类名混入

@charset "UTF-8";
.w50() {
  width: 50%;
}
.lwhb {
  .w50();
}
//类名混入

@charset "UTF-8";
.w50() {
  width: 50%;
}
.f(@direction){
  float: @direction;
}
.lwhb {
  .w50();
  .f(left);
}
//函数混入

5.函数

 /*运算*/
@num:5;

  ul {
    width: 100%*@num;
    li {
      width: 100%/@num;
    }
  }

还有一些其他的运算类型：
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”); // * 判断一个值是否是指定单位的数值