CSS进阶之预处理语言之less (二):Easy less插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径
跳转目录🚀
篇章 | 知识点 |
---|---|
CSS进阶之形变与动画 (一) | transform、垂直居中总结、transition动画、animation动画、vertical-align |
CSS进阶之预处理语言之less (二) | Easy less插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径 |
CSS进阶之grid网格布局 (三) | 关于grid布局、grid-container属性、grid-items属性 |
CSS进阶之移动端适配 (四) | 媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案 |
CSS进阶之额外内容补充 (五) | HTML5新增、CSS函数补充、BFC详解 |
1. Easy less插件
1.1 easy less插件下载与配置
-
第一步-安装:在vscode上安装插件
-
配置:在 设置->扩展->Easy less configuration->打开设置(json)
-
设置out:
"less.compile": { "out": "./../css/" }
1.2 为什么需要easy less
- 为什么需要easy less:
- 在css写样式不像编写html时有明显的结构,我们有时候写着写着就不知道之前的样式在哪里了,因此我们需要使用less语法来编写样式,但是浏览器是不识别less代码的,我们最终引入页面的还是css文件,需要借助“Easy Less”插件翻译转化为css文件。
2. 认识less
- 什么是less?:less是一门css预处理语言
- less的特点 : 扩展了css的动态特性;less扩充了css语言,使css具备一定的逻辑性、计算能力。
- 文件后缀名:
.less
3. 使用less
-
思考: 关于后代选择器,我们使用 空格隔开 来选择后代元素,而在less中我们如何操作的呢?
.box .son ul li a { font-size: 30px; color: red; }
3.1 less的注释
- 注释
- 单行注释:快捷键
ctrl+ /
- //注释内容
- 多行注释:快捷键
shift+alt+a
- /* 注释内容*/
- 单行注释:快捷键
3.3 less的计算方式
- 计算
- 进行+、-、*、/等运算
除法运算
- 推荐使用:
(操作数1 / 操作数2 )
- 语法会报错不推荐使用:
操作数1 ./ 操作数2
- 推荐使用:
注意:运算符和操作数直接最好用空格隔开,这是很容易疏忽犯错的
- 运算的单位
- 如果运算的两个值都有单位,则以第一个单位为主
- 如果只有一个单位就以这个单位为主;
.box {
// width: 3 * 200px ;
// 如果单位一致就以当前单位为取值单位
// 如果前后单位不一致,以前面单位为取值单位
width: (600px / 2);
// width: 600 ./ 2px;
height: 150px;
background-color: lawngreen;
}
3.4 less中的嵌套
- 一般的嵌套: 父级选择器中嵌套子级选择器
伪类伪元素嵌套
: 需要在前面添加 &符号才能生效
a {
// 当前页面所有的a默认下划线都清除 tdn
text-decoration: none;
}
.nav {
ul {
li {
// 伪类选择器
&:nth-child(2) {
background-color: pink;
}
a {
font-size: 30px;
color: #333;
// 鼠标经过
&:hover {
color: red;
}
// 伪元素
&::after {
content: '>';
// 有衬线字体族,文字有装饰效果
font-family: serif;
}
}
}
}
}
3.5 less变量的定义
- 如何定义:
@变量名称:值;
- 如:@color: pink;
- 命名规范:
- 定义变量结束最后一定要跟英文封号;
- 必须有@为前缀,不能包含特殊字符,不能以数字开头
- 区分大小写
// @变量名称:值;
// 变量就是将公用或者常用的值保存起来,方便使用和修改
// 变量名称必须区分大小写,变量最终需要以引文的;号结尾
@col:red;
.box {
width: 200px;
height: 100px;
background-color: @col;
}
p {
color: @col;
}
span {
color: @col;
}
a {
color: @col;
}
3.6 导入less文件
- 作用:将一些公用的样式,直接导入到对应的样式文件中,不需要用link引入;
- 语法:
- 方法1: @import url(less文件路径);
- 方法2:@import ‘less文件路径’;
- 命名规范:
- 导入语句@import最后结束一定要写英文封号;
- 导入的文件是可以省略不写.less 文件后缀的。
- 导入语句要书写在导入文件的的最前面;
// @import样式导入:会将公用的样式导入到对应的文件,不需要使用link引入
// @import url(./base.less);
// @import './base.less';
@import './base';
3.7 从less导出css样式的路径
3.7.1 配置easy less默认导出路径(看第一点)
3.7.2 单独less路径导出
- 作用: 想让一个单独的less文件保存后生成的css文件位置为另外一个路径时使用
- 语法: :
//out:导出文件夹路径
- 注意
- 在最后选择文件夹需要加上 文件夹名+/ 才能选中文件夹
如://out:./…/abc/ - 书写单独输出路径的时候最后面不需要加封号;
- 必须写在less文件的第一行
- out后面的冒号必须是英文的冒号;
- 在最后选择文件夹需要加上 文件夹名+/ 才能选中文件夹
// out:./../bac/
3.7.3 禁止导出当前less文件为css
- 应用场景: 有些公用的样式不需要导出css,直接用@import导入到其他文件即可,那么我需要设置禁止导出为css语句控制;
- 语法:
// out:false
- 注意: 禁止导出语句一定要写在文件的第一行,后面一定不能写封号;
回到11年: 不错 只是少讲了vmin和vmax
长鱼澈: 写得很好,值得回味
screamn: 好文章。值得推荐
CSDN-Ada助手: 恭喜你,获得了 2023 博客之星评选的入围资格,请看这个帖子 (https://bbs.csdn.net/topics/616873263?utm_source=blogger_star_comment)。 请在这里提供反馈: https://blogdev.blog.csdn.net/article/details/129986459?utm_source=blogger_star_comment。
CSDN-Ada助手: Vue入门 技能树或许可以帮到你:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue