LESS-1-基础

一、概念

1.什么是CSS预处理器?

CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)；CSS预处理器可以让你的 CSS 更加简洁，适应性更强，代码更直观等诸多好处；
简而言之: CSS预处理器就是升级版CSS；

2.常见的CSS预处理器

Less、 Sass 、Stylus

1.为什么需要less?

1.1CSS的语法虽然简单, 但它同时也带来一些问题
1.2CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,
1.3造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念

2.什么是less(Leaner Style Sheets)

2.1Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
2.2它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
2.3一句话：用类似JS的语法去写CSS

4.less基本使用:

第一种方式：（存在性能问题）

4.1在浏览器中直接运行
编写less文件–>引入less文件–>引入less.js–>运行
less.js文件的来源（网页最下面有个下载）：http://lesscss.cn/
注意点:
一定要先引入less.css再引入less.js(这里引入less.css时要在stylesheet后面加上/less)，在运行的时候才通过less.js对less文件进行加工处理，这样存在性能问题。
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效

第二种方式(现在学的是自己转换，后面学到可以通过工具自动转换)

4.2提前预编译
编写less文件–>利用工具转换为css文件–>引入css文件
考拉客户端: http://koala-app.com/index-zh.html
(刷新、编译后自动在对应文件下生成一个.css文件)
开源中国 : https://tool.oschina.net/less
构建工具配置loader自动编译: 后续课程内容
注意点:
无需引入less.js, 无需在服务端运行

---

二、less中的注释

less中的注释和JS中的注释一样, 也有单行注释和多行注释。 less中单行注释和多行注释最大的区别在于: 是否会被编译。

• 单行注释不会被编译(不会出现在编译后的文件中)
• 多行注释会被编译 (会出现在编译后的文件中)

---

三、变量

1.什么是变量?
和js中的概念基本一样

2.less中定义变量的格式
@变量名称: 值;

3.less中使用变量的格式
@变量名称;

4.和js一样可以将一个变量赋值给另外一个变量
@变量名称 : @变量名称;

5.和js一样less中的变量也有全局变量和局部变量
定义在{ }外面的就是全局的变量, 什么地方都可以使用；
定义在{ }里面的就是局部变量, 只能在{ }中使用；

注意定: less中的变量是延迟加载的, 写到后面也能在前面使用；

6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响，和js一样在访问变量时会采用就近原则；

---

1.什么是变量插值?
在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量；
如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式；

2.变量插值的格式
格式: @{变量名称}

---

四、Less中的混合

1.什么是less中的混合(Mix in)?
将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可；
在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来；
本质就是ctrl+c --> ctrl + v

2.less中混合的注意点:

• 如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码；
• 如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码；

3.混合后，结构为后代关系，加上 & 则为交集关系；例1：

.a{
  .b{  }
}
上面处理后为：.a .b{ }  //有空格

例2:
.a{
  &.b{  }
}

上面处理后为：.a.b{ }  //无空格

---

五、Less中的可变参数混合;

less中的…表示可以接收0个或多个参数；
如果形参列表中使用了…, 那么…必须写在形参列表最后；

.animate(@name, @time, ...){
  //transition: @name @time @mode @delay;
  transition: @arguments;  //less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
}
div{
  width: 200px;
  height: 200px;
  background: red;
  //transition: all 4s linear 0s;
  //.animate(all, 4s, linear, 0s);
  .animate(all, 4s, linear, 0s);
}
div:hover{
  width: 400px;
  height: 400px;
  background: blue;
}

---

六、Less中的匹配模式：

@_: 表示通用的匹配模式

什么是通用的匹配模式?
无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码；

用边框制作一个三角符号:

.triangle(@_, @width, @color){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
 
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
 
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
  
  border-width: @width;
   border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

div{
  //混合的匹配模式, 就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
  
  //.triangle(Down, 80px, green);
  //.triangle(Top, 80px, green);
  //.triangle(Left, 80px, green);
  .triangle(Right, 80px, green);
}

---

七、Less中导入其他less

@import  “ xxx”  //  xxx为另一个less文件的名字
Div { 
 }

---

八、less中的内置函数

由于less的底层就是用JavaScript实现的,
所以JavaScript中常用的一些函数在less中都支持

// 混杂方法
  image-size("file.jpg"); // => 100px 50px
  image-width("file.jpg"); // => 100px
  image-height("file.jpg"); // => 50px

// 单位转换
 convert(9s, "ms"); // => 9000ms
 convert(14cm, mm); // => 140mm
 convert(8, mm); // => 8

// 列表
 @list: "A", "B", C, "D";
 length(@list); // => 4
 extract(@list, 3); // => C
 
// 数学
 ceil(2.1); // => 3 向上取整
 floor(2.1); // => 2 向下取整
 percentage(.3); // => 30% 转百分比
 round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
 sqrt(25cm); // => 5cm 取平方根
 abs(-5cm); // => 5cm 取绝对值
 pi(); // => 3.141592653589793 圆周率π
 max(3px, 42px, 1px, 16px); // => 42px
 min(3px, 42px, 1px, 16px); // => 1px

// 字符串
 replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"

// 判断类型
 isnumber(56px); // => true 是否含数字
 isstring("string"); // => true
 iscolor(#ff0); // => true
 iscolor(blue); // => true
 iskeyword(keyword); // => true
 isurl(url(...)); // => true
 ispixel(56px); // => true
 isem(7.8em); // => true
 ispercentage(7.8%); // => true
 isunit(4rem, rem); // => true 是否为指定单位
 isruleset(@rules); // => true 是否为变量
 
// 颜色操作
 增加饱和度
 saturate(color, 20%)
 减少饱和度
 desaturate(color, 20%)
 增加亮度
 lighten(color, 20%)
 减少亮度
 darken(color, 20%)
 降低透明度
 fadein(color, 10%)
 增加透明度
 fadeout(color, 10%)
 设置绝对不透明度(覆盖原透明度)
 fade(color, 20%)
 旋转色调角度
 spin(color, 10)
 将两种颜色混合，不透明度包括在计算中。
 mix(#f00, #00f, 50%)
 与白色混合
 tint(#007fff, 50%)
 与黑色混合
 shade(#007fff, 50%)
 灰度，移除饱和度
 greyscale(color)
 返回对比度最大的颜色
 contrast(color1, color2)
 
// 颜色混合
 每个RGB 通道相乘，然后除以255
 multiply(color1, color2);
 与 multiply 相反
 screen(color1, color2);
 使之更浅或更暗
 overlay(color1, color2)
 避免太亮或太暗
 softlight(color1, color2)
 与overlay相同，但颜色互换
 hardlight(color1, color2)
 计算每个通道(RGB)基础上的两种颜色的平均值
   average(color1, color2)

例：
@str: "./../images/1.jpg";
@str2: replace(@str, "1", "2");
div{
  width: 200px;
  height: 200px;
  //background: url(@str2);
  background: desaturate(yellow, 50%);
}
div:hover{
  background: saturate(yellow, 50%);
}

---

九、less中的继承

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/*
1.less中的继承和less中混合的区别
1.1使用时的语法格式不同
1.2转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)
*/
.father:extend(.center){
  width: 300px;
  height: 300px;
  background: red;
  //.center;
  .son:extend(.center){
    width: 200px;
    height: 200px;
    background: blue;
    //.center;
  }
}

---

十、Less中的条件判断

less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码;
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断;

.size(@width,@height) when (@width = 100px){  // 满足该条件时才执行下面的代码
  width: @width;
  height: @height;
}
 
// (),()相当于JS中的 ||

.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}
 
// ()and()相当于JS中的 &&

.size(@width,@height) when (@width = 100px)and(@height = 100px){
  width: @width;
  height: @height;
}
 
.size(@width,@height) when (ispixel(@width)){
  width: @width;
  height: @height;
}
div{
  .size(100px,100px);
  background: red;
}

---

-End