Less的使用-Less变量、Less嵌套和运算
燕扬
01-Less的使用-Less变量
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>Less的使用-Less变量</title>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div>
我的颜色也是粉色
</div>
</body>
</html>
my.less
// 变量是指没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用
// 变量名区分大小写 @color 和@Color 是两个不同的变量
// 2.定义一个字体为14像素的变量
@font14: 14px;
// 1.定义一个粉色的变量
@color:pink;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}
my.css
body {
background-color: pink;
}
div {
color: pink;
font-size: 14px;
}
a {
font-size: 14px;
}
02-Less嵌套
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>Less嵌套</title>
<style>
/* .header {}
.header a {} */
</style>
<link rel="stylesheet" href="nest.css">
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="logo">传智播客</div>
</div>
</body>
</html>
nest.less
.header {
width: 200px;
height: 200px;
background-color: pink;
// less嵌套写法1. 子元素的样式直接写到父元素里就好了
a {
color: red;
// less嵌套写法2.如果有伪类、交集、伪元素选择器 内层选择器的前面没有&，则被解析为父选择器的后代；如果有&符号，则被解析为父元素自身或父元素的伪类
&:hover {
color: blue;
}
}
}
.nav {
&::brfore {
content: "";
}
.logo {
color: green;
}
}
nest.css
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
.header a:hover {
color: blue;
}
.nav::brfore {
content: "";
}
.nav .logo {
color: green;
}
03-less运算
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>Less运算</title>
<link rel="stylesheet" href="count.css">
<!-- 注意事项
1.运算符的左右两侧必须有一个空格隔开
2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
3.两个数参与运算，如果两个数都有单位，并且两个单位不一样，那么最后的结果以第一个结果为准 -->
</head>
<body>
<div></div>
<img src="1.png" alt="">
</body>
</html>
count.less
@basefont: 50px;
html {
font-size: @basefont;
}
@border: 5px + 5;
div {
width: 200px - 50;
height: ( 200px + 50px ) * 2;
border: @border solid red;
background-color: #666 - #222;
}
img {
// 除法要加括号，否则不起作用
width: (82rem / @basefont);
height: (82rem / @basefont);
}
// 注意事项
// 1.运算符的左右两侧必须有一个空格隔开
// 2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
// 3.两个数参与运算，如果两个数都有单位，并且两个单位不一样，那么最后的结果以第一个结果为准
count.css
html {
font-size: 50px;
}
div {
width: 150px;
height: 500px;
border: 10px solid red;
background-color: #444444;
}
img {
width: 1.64rem;
height: 1.64rem;
}
类似资料：