CSS预处理器之Less

CSS预处理器

什么是CSS预处理器

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

常见的CSS预处理器

• Less
• Sass
• Stylus

CSS预处理器-Less

为什么需要less

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

什么是less

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

less基本使用

在浏览器中直接运行

• 需要引入less.js文件
• 一定要先引入less.css再引入less.js
• 如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效

提前预编译

• 编写less文件
• 利用工具转换为css文件
• 引入css文件

文档

• 中文：https://less.bootcss.com/
• 英文：http://lesscss.cn/features/
• 预编译：https://tool.oschina.net/less

Less

less注释

• less中的注释和JS中的注释一样, 也有单行注释和多行注释
• 单行注释不会被编译(不会出现在编译后的文件中)
• 多行注释会被编译 (会出现在编译后的文件中)

// 编译前
// index.less 我不会被编译
/*
我会被编译
*/
*{
  padding:0;
  margin:0;
}

// 编译后
/*
我会被编译
*/
*{
  padding:0;
  margin:0;
}

less变量

// 定义变量
@变量名称: 值;
// 使用变量
@变量名称;
// 将一个变量赋值给另外一个变量
@变量名称 : @变量名称;

• 全局变量:定义在{}外面的就是全局的变量, 什么地方都可以使用
• 局部变量:定义在{}里面的就是局部变量, 只能在{}中使用
• less中的变量是延迟加载的, 写到后面也能在前面使用
• 不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响
• 访问变量时会采用就近原则

less变量插值

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

// 变量插值的格式
@{变量名称}

less运算

• less中的运算和CSS3中新增的calc函数一样, 都支持加、减、乘、除运算
• CSS3calc函数有兼容性问题，而less中的运算则不存在兼容性问题

div{
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
 // 编译前
  margin-left: (-200px / 2);
 // 编译后   margin-left: -100px;
}

less混合

将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可，在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来

注意点

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

// 编译前less文件
@w:300px;
@h:300px;

.center{  // .center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.father{
  width: @w;
  height: @h;
  background: #00a7f7;
  .center;
  .son{
    width: @w/2;
    height: @h/2;
    background: #333333;
    .center
  }
}

// 编译后css文件
.center { // 若为 .center() 编译后没有此部分
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.father {
    width: 300px;
    height: 300px;
    background: #00a7f7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.father .son {
    width: 150px;
    height: 150px;
    background: #333333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

less带参数混合

/*
// 带参数混合
.whc(@w,@h,@c){
  width: @w;
  height: @h;
  background: @c;
}
*/
// 带默认参数混合
.whc(@w:100px,@h:100px,@c:red){
  width: @w;
  height: @h;
  background: @c;
}

.box1{
  //.whc(200px,200px,red);
  //.whc();
  // 给混合的指定形参传递数据,若不指定会按顺序传递
  .whc(@c:green);
}
.box2{
  //.whc(100px,100px,green)；
  .whc()
}

less可变参数

• less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
• less中的 ... 表示可以接收0个或多个参数
• 如果形参列表中使用了..., 那么 ... 必须写在形参列表最后

.animate(@name, @time, @mode, @delay){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}

// 接收0个或多个参数
.animate(...){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}

// 至少传一个参数
.animate(@name, ...){ 
  //transition: @name @time @mode @delay;
  transition: @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-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
  border-width: @width;
  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.less";
@import "xxx"

less内置函数

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

混杂方法

// 获取图片尺寸
image-size("file.jpg"); 
image-width("file.jpg"); 
image-height("file.jpg");

单位转换

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)

具体使用可参考 https://less.bootcss.com/functions/

less层级结构

• 如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
• &的作用,是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可

// 转换前
.father{
  width:300px;
  .son{
     &:hover {  // :hover {
        background:red;
     }
     width:200px;
   }
}
// 转换后
.fathrt{
  width:300px;
}
.father .son{
  width:200px;
}
.father .son:hover { //.father .son :hover {
  background:red;
}

less中的继承

对于许多重复性代码，编译后希望只有一份，可以使用继承，转换后使用并集选择器来实现继承

// less
.common{
    font-size:16px;
}
.father:extend(.common){
    width:200px;
    .son:extend(.common){
        width:100px;
    }
}
// css
.common,.father,.father .son{
  font-size: 16px;
}
.father {
  width: 200px;
}
.father .son{
  width: 100px;
}

less中的条件判断

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

// 当宽度等于100时，才执行括号中的代码
.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;
}

// 当单位为 px 才执行括号中的代码
.size(@width,@height) when (ispixel(@width)){
  width: @width;
  height: @height;
}