Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Less像是css的一种扩展升级,使程序员在读写时更加便利。标签嵌套对比css不用大量重复录写,计算上可以在写入公式后在css文件中查得到具体数值。可以通过变量,写入容器属性值,给多个标签内使用,方便使用和修改(全局变量和局部变量,不用像css一个一个慢慢找着修改了)。还可以通过函数进行一些判断。
在VSCode界面选择点击左侧最后一个方块堆叠图,在输入框中输入less,点击蓝色安装图标,可以根据自己的喜欢选择LESS插件,英语小白也可以像我一样在插件库中下载安装中文语言包(输入chinese)插件
在界面创建一个 (命名名称).less 文件,在文件中编写并保存,看是否会生成 .less 文件同名的 .css 后缀文件
.less无法直接在html文件上引入使用,可以引入预编译保存生成的.css文件。
.less 的编写格式会与 .css多少有些不同
在 less 中有多行注释(快捷键Shift+Alt+A)和单行注释(快捷键Ctrl+ / ),单行注释不会在css文件中生成,多行注释会生成
在写伪类和伪元素的时候,可以使用 & 来代替父元素
less文件生成css文件默认是在less文件的同一目录文件夹下,如果有大量less文件导出生成css文件,着对整理分类起到过多麻烦与不适。于是就得修改css生成路径与所在文件夹位置。
在 .less 文件编写的 最上方 写上 .css文件的生成路径,生成路径有相同名字的文件夹,则会生成在相同文件夹中,注意自己的命名不要不符合规范,和生成文件夹中是否有相同名称的文件。
命名一
// out:./命名css存放文件夹名/
命名二
// out:./命名css存放文件夹名/命名的.css
保存生成前
保存生成后
在安装的插件界面中找到所安装的插件,点击设置齿轮→扩展设置→在 settings.json中编辑→编写自己全局的 .css 的生成路径并 保存
在 .less 文件第一行添加: // out: false
// out:false
通常编写网页,我们会将多个网页的公共样式、可以通用的网页模块、和标签属性样式分类写入不同的css文件中并在多个网页中重复引入使用以节省编写时间和工作量。相对的, less 可以将存写的不同样式的 .less 文件导入一个主体 .less 文件中生成一个css文件引入html中
注意:若你的文件名有空格也要相应的输入空格,VSCode会注释标红,但属于正常
// 第一种导入方式
@import url(./01练习.less);
@import './01练习.less';
Less里面的变量都是以@作为变量的起始标识,变量名由字母、数字、_和-组成;
在一个文件里面定义的同名变量存在全局变量和局部变量的区别;
变量最大的优点是: 方便使用和修改。
@变量名: 值;
@fontSize: 16px;
.less文件代码
@bg-color: red;
/* @变量名:值; */
div {
width: 100px;
height: 100px;
background-color: @bg-color;
}
p {
background-color: @bg-color;
}
a {
background-color: @bg-color;
}
.less保存后生成的.css文件代码
/* @变量名:值; */
div {
width: 100px;
height: 100px;
background-color: red;
}
p {
background-color: red;
}
a {
background-color: red;
}
.html文件代码
Document
背景色
背景色
背景色
html生成页面样式
.less文件代码
@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;
@HtmlFtSize: 70px;
.box {
width: 100px + @HtmlFtSize;
// 注意:单位的转换 计算的时候以第一个单位为准
height: (100 / @HtmlFtSize);
// height: (100rem / @HtmlFtSize);
// height: 100px - @HtmlFtSize;
margin: (@HtmlFtSize * 5) auto;
padding: (@HtmlFtSize / 5);
border: 1px + @HtmlFtSize * 3 solid red;
background-color: @light-blue;
}
.less保存后生成的.css文件代码
.box {
width: 170px;
height: 1.42857143px;
margin: 350px auto;
padding: 14px;
border: 211px solid red;
background-color: #ff6bde;
}
Less除了支持"等于"的匹配方式,Less还支持大于、小于等条件判断的语法
网页除了pc端,还有移动(手机)端、ipd端,屏幕页面的不同,使网页的展示会出现不同,可以通过不同的预设样式去解决网页适配问题。
@media (媒体特性){
选择器{
样式
}
}
完整写法
@media 关键词 媒体类型 and (媒体特性){css代码}
四个横排的盒子,需求:在屏幕宽度小于1200px时隐藏第二个盒子,小于800px隐藏第三个盒子
.less代码如下:
@media (max-width:1200px) {
.box>div:nth-child(2) {
display: none;
}
}
@media (max-width:800px) {
.box>div:nth-child(3) {
display: none;
}
}
.box {
width: 800px;
height: 200px;
margin: 100px auto;
display: flex;
div {
width: 200px;
height: 200px;
background-color: pink;
}
&>div:nth-child(2n+1) {
background-color: aqua;
}
}
.css代码如下:
@media (max-width: 1200px) {
.box > div:nth-child(2) {
display: none;
}
}
@media (max-width: 800px) {
.box > div:nth-child(3) {
display: none;
}
}
.box {
width: 800px;
height: 200px;
margin: 100px auto;
display: flex;
}
.box div {
width: 200px;
height: 200px;
background-color: pink;
}
.box > div:nth-child(2n+1) {
background-color: aqua;
}
html代码如下:
Document
1
2
3
4
页面展示:
后续在深入的学习后会继续更新本文章