1、less简述
less就是简便书写css的工具,还是像写css那样写,只是有些比较简洁,可以写除法、选择器套选择器等等。保存.less文件,就会在同级别下自动生成.css文件。
在px单位转换到rem单位过程中,哪项工作是最麻烦的?
答:除法运算。CSS不支持计算写法。解决方案:可以通过Less实现。
Less是一个CSS预处理器, Less文件后缀是.less;
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力;
注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。
.less文件:
.father {
color: red;
width: (68 / 37.5rem);
.son {
background-color: pink;
}
}
保存.less文件以后,在同级别的目录下生成的.css文件如下图所示:
.father {
color: red;
width: 1.81333333rem;
}
.father .son {
background-color: pink;
}
2、Easy Less插件
Easy Less是vscode插件,其作用:less文件保存自动生成css文件。
一定要在vscode中加了这个插件,才能保存后自动生成css文件。
3、less语法
a、四则运算
运算: 加、减、乘直接书写计算表达式;
小括号 或 .
.box {
width: 100 + 10px;
width: 100 - 20px;
width: 100 * 2px;
// 除法
// 68 > rem
width: (68 / 37.5rem);
// height: 29 ./ 37.5rem;
height: 29 / 37.5rem;
}
表达式存在多个单位以第一个单位为准!
b、嵌套
作用:快速生成后代选择器。
注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用。
c、使用Less变量设置属性
网页中, 文字文字颜色基本都是统一的, 如果网站改版,变换文字颜色, 如何修改代码?
把颜色提前存储到一个容器,设置属性值为这个容器名。
语法:
定义变量:@变量名: 值;
使用变量:CSS属性:@变量名;
.less文件:
// 1. 定义. 2.使用
@colora:green;
.box {
color: @colora;
}
.father {
background-color: @colora;
}
.aa {
color: @colora;
}
对应的.css文件:
.box {
color: green;
}
.father {
background-color: green;
}
.aa {
color: green;
}
d、导入
开发网站时,网页如何引入公共样式?
答:CSS:书写link标签;
Less:导入
导入的语法: @import “文件路径”;
导入了这个less文件,保存以后这个less对应的css都会有。
e、导出
less一保存,都是在当前的路径生成css,希望这个路径发生改变。
方法一:
配置EasyLess插件, 实现所有Less有相同的导出路径;
配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是双引号)
这就能实现把less文件夹里的less文件,保存后生成的css文件都放到css文件夹中。
方法二:单独导出路径
让对应less文件的css文件导出到另外一个路径;
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
// out: ./qqq/daqiu.css
// out: ./abc/
.box {
color: red;
}
./表示当前文件夹的目录。
但是,有一些less不需要导出css文件;这个less文件是被别人import导入的,就不用导出css文件,比如base.less,common.less。
禁止导出:在less文件第一行添加: // out: false