rem适配布局---3. less
1. less介绍
less是一门CSS扩展语言，也成为CSS预处理器，作为CSS一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法之上，为CSS加入程序式语言的特性。它在CSS语法的基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的缩写，并降低了CSS的维护成本。
less官网：http://lesscss.cn/
less是css的预处理语言，它扩展了css的动态特性。
2. 安装
- 先安装node.js, node.js下载网站：http://nodejs.cn/download/
- 在cmd中输入node -v 查看版本号证明安装成功
- 在node.js环境中安装less，继续输入npm install -g less进行安装
- 在cmd中使用命令lessc -v查看版本号，证明安装成功
3. 使用
首先创建后缀名为less的文件（my.less），在这个less文件里面书写less语句
- less变量
- less编译
- less嵌套
- less运算
3.1 less变量
变量是指没有固定的值，可以改变的。因为我们css中的一些颜色和数值等经常使用。
@变量名: 值;
命名规范：
- 必须有@为前缀
- 不包含特殊字符
- 不能以数字开头
- 大小写敏感
html文件
<body>
<div>
我的颜色是 粉色
</div>
</body>
less文件
//格式 @变量名：值；
//错误的命名 @1color @color~@#
//变量名区分大小写 @color 和@Color是两个不同的变量
//定义一个粉色的变量
@color: pink;
//定义了一个字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
3.2 less编译
本质上，less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对的css文件。所以要把less文件编译生成css文件，这样的html页面才可以使用。
vscode中的一个EasyLESS插件可以用来把less文件编译为css文件
- 安装完毕插件后，重新加载下vscode,只要保存一下less文件，会自动生成css文件。my.less---->my.css
- 在html页面中引入my.css文件就可以了
<link rel="stylesheet" href="06_my.css">
3.3 less嵌套
- 内存选择器前面没有&符号，则它被解析为父选择器后代
less中的写法
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的样式直接写在父元素的里面就好了
a {
color: red;
}
}
css中的写法对比
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
- 如果有&符号，它就被解析为父元素自身或者父元素的伪类
预见：交集、伪类、伪元素选择器，less中的写法：
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的样式直接写在父元素的里面就好了
a {
color: red;
// 2. 如果有伪类、交集、伪元素选择器则内层选择器前面要加&
&:hover {
color: blue;
}
}
}
.nav {
.logo {
color: green;
}
&::before {
content:"";
}
}
css中的对比写法
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
.header a:hover {
color: blue;
}
.nav .logo {
color: green;
}
.nav::before {
content: "";
}
html结构
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="logo">传智播客</div>
</div>
</body>
3.4 less运算
在less中任何数字、颜色、变量都可以参与运算，less提供了加减乘除(+、-、*、/)运算符。
less中的写法
@baseFont: 50px;
html {
font-size: @baseFont;
}
@border: 5px + 5;
div {
//2
width: 200px - 50;
height: (200px + 50) * 2;
border: @border solid red;
//对颜色进行算术运算
background-color: #666-#222;
}
// 对于rem布局，图片是82px html文字大小50px 所以图片转换为rem单位后的大小是82/50rem
img {
//3
width: 82rem / @baseFont;
//rem和px一样 前面不要留空格
// height: 82/50 rem;
height: 82rem / @baseFont;
}
//1.运算符左右两侧必须敲一个空格
//2.两个数参与运算，只有一个数有单位，则最后的运算结果的单位以最后一个数为准
//3.两个数参与运算，如果两个数都有单位，而且不一样的单位，则最后的结果以第一个单位为准
css中的写法
html {
font-size: 50px;
}
div {
width: 150px;
height: 500px;
border: 10px solid red;
background-color: #444444;
}
img {
width: 1.64rem;
height: 1.64rem;
}
