CSS预处理器之less

最新推荐文章于 2023-08-22 17:07:58 发布

ilove~

最新推荐文章于 2023-08-22 17:07:58 发布

阅读量270

点赞数 1

分类专栏： CSS预处理文章标签： less

本文链接：https://blog.csdn.net/weixin_43689603/article/details/108970219

版权

CSS预处理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习目标：

快速入门CSS预处理器之less

安装

我们就以vscode为例子，如果你还没有使用vscode的话，建议使用vscode，免费而且插件非常之多，用起来很方便，话不多说开始吧!

首先:
(1) 下载安装node.js，官网下载： https://nodejs.org/zh-cn/
(2) 按 Win+R 输入 CMD
(3) 输入npm install -g less 回车，等待安装完毕即可

做完上面的步骤后就可以开始下面的步骤了
先在扩展里面找一个easy LESS进行安装，它会帮你自动编译，点击一下安装就可以了
在这里插入图片描述
然后点击文件 => 首选项 => 设置 => 输入easy => 在setting.json中编辑，在大括号内加入下面内容：

"less.compile": {
        "compress": false,
        "sourceMap": false,
        "out": "../css/", // less 放在less文件夹下，less文件夹和css文件夹同级，
    }

图片如下:（关注圈起来的那部分就行了）
在这里插入图片描述
在.less里面点击保存后会他自动生成.css文件在刚刚指定的上面out属性的路径里

那么开始介绍less的使用吧!

基本语法：

变量:

通过@变量名: 属性来定义一个属性，然后在其它属性中可以调用这个变量名来使用该属性,如

@borderColor: red;

那么在其他地方需要使用红色这个元素时就可以通过调用@borderColor变量来使用红色，

border: 1px solid @borderColor;

先看图
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/01.css">
  <title>Document</title>
</head>
<body>
  <h1>test less</h1>
  <ul>
    <li>1内容</li>
    <li>2内容</li>
    <li>3内容</li>
  </ul>
</body>
</html>

less文件

body {
  background-color: antiquewhite;
  color: yellow;
  font-size: 20px;
}

//单行注释
/* 多行注释 */
@borderColor: red;
@bgImgURL: "../assets/img";

ul {
  background: url("@{bgImgURL}/bg.jpg") no-repeat;
}

li {
  border: 1px solid @borderColor;
}

less编译后的css文件
可以看到设置后的单行注释没有编译到css文件中

body {
  background-color: antiquewhite;
  color: yellow;
  font-size: 20px;
}
/* 多行注释 */
ul {
  background: url("../assets/img/bg.jpg") no-repeat;
}
li {
  border: 1px solid red;
}

效果
在这里插入图片描述
注意点：

在使用变量定义字符串进行拼接时记得要注意用{}把变量名圈起来
如该例子中的设置背景

@bgImgURL: "../assets/img";
ul {
  background: url("@{bgImgURL}/bg.jpg") no-repeat;
}

还有变量名虽然可以随意设置但是别用中文命名，还可以直接在属性设置是进行加减乘除，比如@w100=100px,在后续中其他需要使用这个时可以直接设置属性为@w-test = @w100 + 50px,这时候你设置的这个@w-test属性值就为150px了，注意在+左右留一个空格，如果是两个变量相加的后可以忽略这个空格。

混入: 这次直接给出less文件与编译后的文件，相信大家应该能更容易理解 less文件

.error(@color:red,@Size: 14px){
  color: @color;
  font-size: @Size;
}

.title {
  .error()
}

.content {
  .error(orange, 20px)
}

先解释一下上面的less，你可以把.error(){}当成一个函数，但是要注意前面还有一个点
error是你设置的名字,你可以在设置时给属性设置默认值，在其他属性需要使用这些属性时可以直接使用.error()，当然你可以传入你需要改变的值，那么给出编译后的css文件就一目了然了
less编译后的css文件

.title {
  color: red;
  font-size: 14px;
}
.content {
  color: orange;
  font-size: 20px;
}

模式匹配:

还是老样子，直接上less图再解释

.sjx(@_,@color,@size){
  width: 0;
  height: 0;
  border: @size solid @color;
  border-color: transparent;
}
.sjx(left,@color,@size){
  border-left-color: @color;
}
.sjx(right,@color,@size){
  border-right-color: @color;
}
.sjx(top,@color,@size){
  border-top-color: @color;
}
.sjx(bottom,@color,@size){
  border-bottom-color: @color;
}
.triangle {
  .sjx(bottom,orange,50px)
  /*.sjx(bottom,20px,@color:orange)*/
}

附上解释:
.sjx(){}这个是不是跟上面的混入很熟悉，没错，一样的写法，那么开始解释它里面形参:

@_时公共匹配的模块,其它left,right,top,bottom都是你自己随便定义的名字，那么当你需要使用里面的属性时，你只需跟混入一样调用即可，如上面我调用的时bottom的这个模块，那么它就会用bottom里面的属性合并上公共模块的属性，就组成了上面.triangle里面的元素
less编译后的css文件

.triangle {
  width: 0;
  height: 0;
  border: 50px solid orange;
  border-color: transparent;
  border-bottom-color: orange;
}

还有博主上面那个注释的设置效果跟上面的效果是一样的

嵌套与颜色函数: 解释这个的时候先看一下html文件

<!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/04.css">
</head>
<body>
  <ul>
    <li>1内容</li>
    <li>2内容</li>
    <li>3内容</li>
    <li>4内容</li>
    <li>5内容</li>
    <li>6内容</li>
    <li>7内容</li>
    <li>8内容</li>
    <li>9内容</li>
  </ul>
</body>
</html>

上面的DOM树是不是body包裹着ul，然后ul里面包裹着一堆li，好了，那么可以看less文件了
less文件

ul {
  list-style: none;

  li:nth-of-type(1){
    background-color: red;
  }
  li:nth-of-type(2){
    background-color: darken(#ff0000,10%);
  }
  li:nth-of-type(3){
    background-color: darken(#ff0000,20%);
  }
  li:nth-of-type(4){
    background-color: darken(#ff0000,30%);
  }
  li:nth-of-type(5){
    background-color: darken(#ff0000,40%);
  }
  li:nth-of-type(6){
    background-color: darken(#ff0000,50%);
  }
  li:nth-of-type(7){
    background-color: mix(#ff0000,#0000ff);
  }
  li:nth-of-type(8){
    background-color: saturate(#ee8787,50%)
  }
  li:nth-of-type(9){
    background-color: spin(#ff0000,30);
  }
}

欸，是不是可以看出什么来，那么我们先去掉里面的元素，当初看结构就可以一目了然了

ul {
	li {}
	li {}
	...
	li {}
}

现在可以看出来了吧，它的使用就跟我们刚刚说的DOM树的层级关系一样的，那么看他编译后的CSS文件

ul {
  list-style: none;
}
ul li:nth-of-type(1) {
  background-color: red;
}
ul li:nth-of-type(2) {
  background-color: #cc0000;
}
ul li:nth-of-type(3) {
  background-color: #990000;
}
ul li:nth-of-type(4) {
  background-color: #660000;
}
ul li:nth-of-type(5) {
  background-color: #330000;
}
ul li:nth-of-type(6) {
  background-color: #000000;
}
ul li:nth-of-type(7) {
  background-color: #800080;
}
ul li:nth-of-type(8) {
  background-color: #ff7676;
}
ul li:nth-of-type(9) {
  background-color: #ff8000;
}

可以看出，它编译后的css文件自动把DOM树的层级关系加了上去,还有当你需要li:hover的时候

错的写法:
li {
	:hover {
	
	}
}
正确的写法
li {
	&:hover {
	//&相当于父元素
	}
}
当然你也可以这样
li {

}
li:hover {

}

lighten(@color,10%) 比@color亮 10%的颜色
darken(@color,10%) 比@color暗10%的颜色

saturate(@color,10%) 比@color饱和 10%的颜色，你可以理解为香艳的意思
desaturate(@color,10%) 与上面相反

spin(@color,10) 色相值+10
spin(@color,-10) 色相值-10
色相就是假如各种颜色组成一个轮盘，你加上一个值，你就相当于在轮盘上旋转一定角度后，这时所指向的颜色

mix(@color,@color) 混合这个两种颜色

效果图如下:
在这里插入图片描述

继承:

直接给代码，一目了然：
less代码如下:

.test {
  color: red;
}

.test-extend:extend(.test){
  font-size: 14px;
}

css代码如下:

sky-test {
  border-color: red;
}
.test,
.test-extend {
  color: red;
}
.test-extend {
  font-size: 14px;
}

可以看出，继承.test后会，.test-extend复刻一份.test里面的所有属性

条件判断: 直接看图应该可以很明确知道，左边是less文件，右边是编译后的css文件

在这里插入图片描述

加油，陌生人！

ilove~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS预处理器之less

学习目标：快速入门CSS预处理器之less安装我们就以vscode为例子，如果你还没有使用vscode的话，建议使用vscode，免费而且插件非常之多，用起来很方便，话不多说开始吧!首先:(1) 下载安装node.js，官网下载： https://nodejs.org/zh-cn/(2) 按 Win+R 输入 CMD(3) 输入npm install -g less 回车，等待安装完毕即可做完上面的步骤后就可以开始下面的步骤了先在扩展里面找一个easy LESS进行安装，点击一下安装就可
复制链接

扫一扫

专栏目录