less复盘

麦忙
584 阅读5分钟

前言

我在前端开发中常用的预处理是less，今天重新看下了less官网，做了一些整理，感兴趣的小伙伴可以看下，有错误，望指出

初始less

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="container">
    <header></header>
    <section></section>
    <footer></footer>
  </div>
</body>
</html>

less中的注释

  • 以// 开头的注释，不会编译到css文件中
  • 以/**/包裹的注释会被编译到css文件中

less的嵌套

这个很简单也是常用的，层层嵌套，更加方便

.container {
  width: @width;
  height: @height;
  background-color: @color;
  header {
    color: #fff;
  }
}

less的变量

使用@来声明一个变量:@pink:pink

  • 作为普通属性值来使用：直接使用@pink
@height: 600px;
@width: 600px;
@color: #000;
.container {
  width: @width;
  height: @height;
  background-color: @color;
}
  • 作为选择器和属性名：#@{selecto的值}的形式
@select:.container;
@bg:background-color;

@{select} {
  width: @width;
  height: @height;
  @{bg}: @color;
}

  • 作为URL:@{url} 同样的用法就不赘述了

  • 变量的延迟加载
    这里的延迟加载的意思在变量的作用区域之间，会先最后一个声明的变量为准

/*
变量的延迟加载
*/
@var:0;
.class {
  @var:1px;
  .brass {
    @var:2px;
    padding:@var;
    @var:3px;
  }
  padding:@var;
}

编译后

/*
变量的延迟加载
*/
.class {
  padding: 1px;
}
.class .brass {
  padding: 3px;
}

less中的嵌套规则

  • 基本嵌套规则
.container {
  width: @width;
  height: @height;
  background-color: @color;
  header {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
}
  • &的使用
    &表示同级目录
.container {
  width: @width;
  height: @height;
  background-color: @color;
  header {
    width: 100px;
    height: 100px;
    background-color: pink;
    &:hover {
      background: #000;
    }
  }
}

编译后

.container {
  width: 600px;
  height: 600px;
  background-color: #000;
}
.container header {
  width: 100px;
  height: 100px;
  background-color: pink;
}
.container header:hover {
  background: 000;
}

less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

  • 普通混合
    普通混合样式会出现在编译过后的文件中
.juzhong {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  position: relative;
  header {
    .juzhong
    &:hover {
      background: 000;
    }
  }
}

编译后

.juzhong {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container {
  width: 600px;
  height: 600px;
  background-color: #000;
  position: relative;
}
.juzhong .container header:hover {
  background: 000;
}
  • 不带输出的混合
    不带输出的混合编译后不会出现定义的样式，语法上只需要加上括号
.juzhong() {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  position: relative;
  header {
    .juzhong
    &:hover {
      background: 000;
    }
  }
}

编译后

.container {
  width: 600px;
  height: 600px;
  background-color: #000;
  position: relative;
}
.juzhong .container header:hover {
  background: 000;
}
  • 带参数的混合且含有默认值
@height: 600px;
@width: 600px;
@color: #000;
.juzhong(@w:100px,@h:100px) {
  width: @w;
  height: @h;
  background-color: pink;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  position: relative;
  header {
    .juzhong(100px,100px);
    &:hover {
      background: 000;
    }
  }
}

编译后

.container {
  width: 600px;
  height: 600px;
  background-color: #000;
  position: relative;
}
.container header {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container header:hover {
  background: 000;
}
  • 命名参数
    当我不想按照参数顺序进行传输或者只传某一个值时，就需要用到命名顺序
@height: 600px;
@width: 600px;
@color: #000;
.juzhong(@w:100px, @h:100px) {
  width: @w;
  height: @h;
  background-color: pink;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  position: relative;
  header {
    .juzhong(@h:300px);  // 重点
    &:hover {
      background: 000;
    }
  }
}
  • 匹配模式
    现在我想在页面中写一个三角形，但是我想更加方便的改变箭头所指的方向，这个时候我哦们就可以利用匹配模式
@height: 600px;
@width: 600px;
@color: #000;
/*
@w:boder-width;
@c:border-color;
 */
.triangle(@w,@c) {
  width: 0px;
  height: 0px;
  border-width: @w;
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
  overflow: hidden;
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  position: relative;
  .sjx {
    .triangle(40px,red)
  }
}

但是这样写没有达到我们的需求，想要改变箭头方向就要去更改我们定义的混合，很不方便，这个时候我们可以采用匹配模式

@height: 600px;
@width: 600px;
@color: #000;

/*
triangle需要与下面定义的名字一样，括号里写@_,这样在加载定义的混合之前会先加载我们定义.triangle(@_),用于提取公共样式
*/
 .triangle(@_,@w,@c) {   // 这里的参数一定与下面的保持一致，否则不解析
  border-width: @w;
  width: 0px;
  height: 0px;
  overflow: hidden;
 }
 /*
  @w:boder-width;
  @c:border-color;
 */
.triangle(L,@w,@c) {
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
}

.triangle(R,@w,@c) {
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent @c;
}

.triangle(T,@w,@c) {
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent @c transparent;
}

.triangle(B,@w,@c) {
  border-style: solid dashed dashed dashed;
  border-color: @c transparent transparent transparent;
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  .sjx {
    .triangle(B,40px,red)
  }
}
  • arguments变量
@height: 600px;
@width: 600px;
@color: #000;
.border(@width,@style,@color) {
  border:@arguments;
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  header {
    width: @width;
    height: 100px;
    .border(1px,solid,#ccc)
  }
}

less的计算

less的计算的一方带单位就可以(加减乘除)

header {
    width:(100+100px)
}

less的继承

继承需要使用关键字extend,其实就是将别人的样式拿来为我所用

.parentstyle {
  font-size: 100px;
}
.container {
  width: @width;
  height: @height;
  background-color: @color;
  header:extend(.parentstyle) {
    color: #fff;
  }
}

编译后

.parentstyle,
.container header {
  font-size: 100px;
}
.container {
  width: 600px;
  height: 600px;
  background-color: #000;
}
.container header {
  color: #fff;
}

less的引入

你可以引入一个或者多个.less文件，然后这个文件中的所有的变量都可以在当前的less项目中使用

@import './main.less' // 后缀可以去除

@import(reference) './main' // 使用less文件但是不输出

@import(less) './main' // 将文件作为less文件，无论什么扩展名
avatar
文章
阅读
粉丝