在vue和react的开发中,常常使用到了less作为css的处理方式。Less作为css的预处理语言,它保留了css的所有功能,在此基础上增加了许多变量、循环 、继承等特性,拓展了css的用法。
1.使用less
- 本地使用less
按照官网可以下载less.js文件,也可以直接使用cdn服务,在这里我直接使用了cdn,先上代码。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Less</title>
<link rel="stylesheet/less" type="text/css" href="main.less" >
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
</body>
</html>
新建了index.html文件,引入了less文件,注意这里rel值为"stylesheet/less",接着又引入了less的cdn文件。样式文件引入一定要放在less.js之前
// main.less
@color: #5B83AD;
body {
background-color: @color;
padding:50px;
}
保存后打开浏览器,一般情况下会发现报错
这是因为通过ajax来获取less文件的,本地打开会有跨域或者获取不到的问题,网上有许多解决方案,可以修改浏览器属性,还可以用npm包解决,我是通过后者解决的,贴上解决方案。
利用http-server将本地网站放到本地服务器上(解决file协议跨域问题)
再次打开,就可以看到整个页面的样式已经被我们修改好了。
- 服务端打开
npm install -g less
全局安装less,接下来可以使用命令行对less进行处理了
lessc styles.less > styles.css // 将styles.less转译成css代码并且输入到styles.css文件中
2.变量
less的变量很容易理解,也让整个样式文件更加方便管理,只要修改一处代码,就可以改变多处的样式
@color: #5B83AD;
@light-color: yellow;
还可以用变量名作为变量
@name: "John";
@var: "name";
content: @@var;
输出后:
content: "John" // 当然,这种方式不常用
@color: blue;
@var: color;
body {
background-@{var}: @color;
padding:50px;
}
// 当变量用于样式名时,必须要用{}包裹变量名
3.混合
我们可以使用less去定义一些通用的class作为集合,然后在另一个class中去调用它们,比如有这样这样一个类:
.font-base {
color: green;
font-size: 10px;
}
.font-a {
.font-base;
font-style: italic;
}
输出:
.font-a {
color: green;
font-size: 10px;
font-style: italic;
}
我们还可以加上参数进行混合,有点函数传参的味道
// 可以加上默认值
.base-color(@color: yellow) {
color: @color;
background-color: @color;
}
// 调用.base-color类,传递color值,如果不传,将默认为yellow
.box-a {
.base-color(blue)
}
@arguments代表了所有传递进来的变量
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #fff) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow (5px, 2px)
输出:
box-shadow: 5px 2px 1px #fff;
-moz-box-shadow: 5px 2px 1px #fff;
-webkit-box-shadow: 5px 2px 1px #fff;
4.嵌套
嵌套是less中最常用的功能,嵌套往往让整个样式更加直观简介。
.box {
color: yellow;
.brand {
font-size: 20px;
}
}
输出
.box { color: yellow; }
.box .brand { font-size: 20px; }
&代表了上一层选择器的名字,例子:
.box {
color: yellow;
.brand {
font-size: 20px;
}
&-size {
height: 100px;
widows: 200px;
background-color: green;
&::after {
content: "less"
}
&:hover{
background-color: black
}
}
}
输出
.box {
color: yellow;
}
.box .brand {
font-size: 20px;
}
.box-size {
height: 100px;
widows: 200px;
background-color: green;
}
.box-size::after {
content: "less";
}
.box-size:hover {
background-color: black;
}
5.导入
导入less文件时,后缀名可带可不带
@import "styles.less";
@import "styles";
如果要导入css文件,需要加上后缀
@import "styles.css"
6.作用域
在less中也有作用域,和JavaScript的作用域相似
@color: yellow;
#header {
background-color: @color; // yellow
}
.box {
@color: blue;
background-color: @color; // blue
}
7.注释
// 单行注释
/*
多行注释
*/