学习目标:
快速入门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文件