一、简介
1.1 css新特性
css支持变量、css支持方法计算等这些是css的新特性，但是兼容性很差
1）css新特性
a）原生css支持变量
原生css支持变量，但是兼容性很差。目前只在谷歌中有效
>>>>>> 未使用变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
/**css样式*/
div{
width:100px;
height:100px;
margin:20px 0px;
}
.d1{
background-color: red;
}
.d2{
color:red;
}
.d3{
border:2px solid red;
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>
</body>
</html>
>>>>>> 使用变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
html{
/**原生css也支持变量的设计*/
--c:red;
--length:100px;
}
/**css样式*/
div{
width:var(--length);
height:var(--length);
margin:20px 0px;
}
.d1{
background-color:var(--c);
}
.d2{
color:var(--c);
}
.d3{
border:2px solid var(--c);
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>
</body>
</html>
b）原生css支持方法计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
html{
/**原生css也支持变量的设计*/
--c:red;
--length:100px;
}
/**css样式*/
div{
width:calc(190px*2);
height:var(--length);
margin:20px 0px;
}
.d1{
background-color:var(--c);
}
.d2{
color:var(--c);
}
.d3{
border:2px solid var(--c);
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>
</body>
</html>
2）css新特性缺点
css虽然有新特性，但是兼容性很差，基本上IE都不支持这些新特性。
1.2 less的特点
1）less特点
less是css的预处理语言。
1. 它是css的增强版。通过less可以编写更少的代码，实现更强大的样式。
2. less的语法大体上和css相同，但是less增加了许多新特性。
所以浏览器无法执行less。必须将less转换为css，才能执行。
2）less来源
由于css的某些缺点。所以程序员提出了预处理less。
less语法大体上和css相同，但是增加了许多新特性，比如变量等。
程序员使用less写完样式之后，然后less在翻译为css样式。
1.3 less翻译css工具
1）less的使用
>>>>>> 1) 在vscode中安装easyless
>>>>>> 2) 新建less文件，然后编写样式，保存后会自动生成css文件
2）配置less，修改样式时，定位less的代码
a）问题：修改样式，less的代码难以定位
我想修改这段样式时，如下图所示，这段样式指定的行数是css文件中的行数，
而不是less中的行数。
所以造成修改样式时，less代码难以定位的问题
b) 解决方式：配置less即可
>>>>>> 在vscode中找到less介绍，复制这段配置
"less.compile": {
"compress": true, // true => remove surplus whitespace
"sourceMap": true, // true => generate source maps (.css.map files)
"out": true// false => DON'T output .css files (overridable per-file, see below)
}
compress：是否压缩
sourceMap：是否要源码地图
out：是否输出
>>>>>> 配置即可
>>>>>> 然后重新保存less，会生成map文件，即源码地图文件。重新看页面，就可以看到样式对应的less中的代码行了
二、less基础
2.1 注释
+++ less中注释：
1) // 注释内容
该注释不会翻译到css中
2) /** 注释内容 */
该注释会翻译到css中
+++ css中注释：
1) /** 注释内容 */
2.2 变量
定义变量:
@w: 200px;
@h: 200px;
使用变量:
1)变量可以作为样式值、选择器名称
2)变量可以用作计算。
1) 变量作为样式值、url样式值、选择器名
>>>>>> 变量作为样式值
less:
@link-color: #428bca;
a,.link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;
}
css:
a,
.link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}
>>>>>> 变量作为url样式值
less：
@url:'../images';
div{
background:url("@{url}/3.jpg");
}
css：
div {
background: url("../images/3.jpg");
}
>>>>>> 变量作为选择器名
less:
@name:box;
#@{name}{
width:200px;
}
.@{name}{
width:200px;
}
css:
#box {
width: 200px;
}
.box {
width: 200px;
}
2) 变量用作计算
less
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
css
#header {
width: 10px;
height: 20px;
}
3) 变量在less文件中定义无顺序要求
less
#header {
width: @width;
}
@width: 10px;
css
#header {
width: 10px;
}
2.3 混合（mixins）
混合作用：
混合主要为了重复样式引用。
混合实现：
1.样式引用
定义一组样式，然后在其他样式中直接引用这组样式。
2.样式扩展
.box1:extend(.box2){};
3.混合函数
1）样式引用
less
.box1{
width:200px;
}
.box3{
.box1;
}
css
.box1 {
width: 200px;
}
.box3 {
width: 200px;
}
2）样式扩展
.box2:extend(.box1){};
box2继承box1的样式，并且在基础上进行扩展
>>>>>> 案例
less
.box1{
width:100px;
height:100px;
}
.box2:extend(.box1){
color:red;
}
css
.box1,.box2 {
width: 100px;
height: 100px;
}
.box2 {
color: red;
}
3）混合函数（mixins）
混合函数不会被编译到css。只有在引用时才会被编译到css
a) 定义不带参数的混合函数
定义不带参数的混合函数：
.box1(){ color:red; }
使用：
1)方式一：
.box2{
.box1;
}
2)方式二：
.box2{
.box1();
}
>>>>>> 案例
less
.box1(){
width:200px;
}
.box3{
.box1;
}
css
.box3 {
width: 200px;
}
b) 定义带有参数的混合函数
定义带有参数的混合函数
.box(@w ,@h,@color){
width:@w;
height:300px;
background-color: @color;
}
使用：
1) 方式一
.box1{
.box(200px,200px,#fff);
}
2) 方式二
.box1{
.box(@color:#fff,@h:200px,@w:300p);
}
>>>>>> 案例1
less
.box(@w ,@h,@color){
width:@w;
height:300px;
background-color: @color;
}
.box1{
.box(@color:#fff,@h:200px,@w:300p);
}
css
.box1 {
width: 300p;
height: 300px;
background-color: #fff;
}
>>>>>> 案例2
less
.box(@w ,@h,@color){
width:@w;
height:300px;
background-color: @color;
}
.box1{
.box(200px,300px,red);
}
css
.box1 {
width: 200px;
height: 300px;
background-color: red;
}
b) 定义带有参数的混合函数，并且定义参数默认值
less
.box(@w:200px ,@h:200px,@color){
width:@w;
height:300px;
background-color: @color;
}
.box1{
.box(@color:red);
}
css
.box1 {
width: 200px;
height: 300px;
background-color: red;
}
4）less内置混合函数
在zeal中，less下的function都是less自定义的函数。
我们这里只是简单介绍下比较常用的内置函数。
a）darken(red, 20%) 变暗
less
.box1{
color:darken(red,10%);
}
css
.box1 {
color: #cc0000;
}
b）average(#ff6600, #000000); 颜色取平均值
less
.box1{
color:average(#ff6600, #000000);
}
css
.box1 {
color: #803300;
}
2.4 嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
1）嵌套
less
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
css
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
2）嵌套中使用& 表示当前选择器的父级
less
.box1 {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
css
.box1 {
display: block;
zoom: 1;
}
.box1:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
2.5 运算
1.算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
1）如果可能的话，算术运算符在加、减或比较之前会进行单位换算。
计算的结果以最左侧操作数的单位类型为准
2）如果单位换算无效或失去意义，则忽略单位。
无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
2.变量、样式中都可以使用运算。
在less中所有的数值都可参与运算。
1）运算案例
// 所有操作数被转换成相同的单位
@cc: 5cm + 10mm; // 结果是 6cm
@cc: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@cc: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
@base: 2cm * 3mm; // 结果是 6cm
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
2）在less中所有数值都可以运算
less
@cc:12+14px;
.box1{
width:@cc*2;
height:500px/2;
color:red+15;
}
css
.box1 {
width: 78px;
height: 500px/2;
color: #ff0f0f;
}
2）颜色运算案例
less
@cc:12+14px;
.box1{
color:red+15;
width:@cc;
}
css
.box1 {
color: #ff0f0f;
width: 26px;
}
2.6 模块化 import
1.模块化
定义多个less文件，每个文件写不同类型的样式。
通过import，可以将其他的less引入到当前文件中。即将导入文件的代码复制到本文件中。
2.导入的作用：
1）将导入的文件的代码复制到本文件中。
2）通过这种方式，可以将less模块化。
3.可以导入less文件、css文件。
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
三、less使用案例
3.1 a.less
ul li{
background-color: red;
width:100px;
height:100px;
}
3.2 a.css（保存a.less，会自动生成a.css文件）
3.3 index.html
在index.html引入a.css即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="/a.css" />
</head>
<body>
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
