1、介绍及概述
1.1、解释
less
是方便开发人员
书写CSS
的一门预处理语言
。- 浏览器只认识
html
/css
/js
格式的文件,所以直接引入.less文件
,没有任何的效果,需要把less文件
转换成css
文件
1.2、概述
CSS弊端
: - 没有逻辑性、变量、函数、作用域、不利于复用,更没有计算
介绍
: less
是css
的预处理语言
,除了less
,还有scss(sass)
、stylus
这些预处理语言。
官网
: 特点
: LESS
将CSS
赋予了动态语言的特性,如:变量, 继承, 运算, 函数LESS
既可以在客户端
上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js
在服务端
运行
安装
- 在
node.js
中安装less
工具: - 全局安装:
npm install less -g
- 项目依赖:
npm install less --save
- 检查版本,测试是否安装成功:输入
lessc -v
,检查版本号
- 在
vscode
安装插件 "easy less"
2、变量使用及解释
// 声明变量 => 使用@符号,代码结束后需要添加;分号@w: 100px;@h: 100px;@color: skyblue;// 1、变量运算 => + - 两边需要有空格,单位不一致的情况下,以左边的单位为准.box3 {width: @w + 10; // 结果:100px + 10 = 110pxheight: @h - 30rem; // 结果:100px - 30 = 70px,这里因为单位不同,以左边为准,所以是70pxbackground-color: @color;font-weight: @w*4rem; // 结果:100px * 4 = 400px,单位还是以px为准font-size: (@h / 2); // 结果:100px / 2 = 50px,除法需要添加()}// 2、作用域 => 全局/局部作用域:变量作用域遵循就近原则// 2.1、@w: 300px; => 会覆盖前面@w的值,也就是全局作用域、全局变量// 2.2、局部作用域.box4 {@w: 300px; // 不会覆盖前面@w的值,也就是局部作用域,局部变量width: @w;}// 3、选择器变量(了解)// 3.1、声明变量让它=选择器@bb: #wrap; // 这个id为wrap的值,赋值给@bb使用// 3.2、使用变量来设置元素的宽度,但注意:需要使用{}去包裹一下,表示这是一个元素,而不是变量@{bb} {width: @w;}// 3.3、还可以只存值,使用时前面携带选择器符号 @aa: content;.@{aa} {height: @h;}// 4、属性变量,可以减少代码的书写量@mr: margin-right; // 把属性名赋值给变量,使用时,用{}包裹即可.box5 {@{mr}: 5px;}// 5、url 变量@url: "../../img"; // 把重复的路径地址赋值给变量.box6 {background: url("@{url}/1.png");}.box7 {background: url("@{url}/2.png");}// 6、声明变量 => 类似于下面的混合方法,存储多个样式值,使用时写成:@变量名()即可@bg: {background-color: blue;color: red;};.box9 {@bg();} .box10 {width: @w;height: @h;@bg();}
3、常用语法
// 1、嵌套.wrap {background-color: #ccc;.header {color: #333;padding: 10px;.left {float: left;#info {a {color: #333;}// 2、父级引用 => &:代表了父级元素,也可以使用#info::after这种原本的形式添加&::after {font-size: 30px;}}}.right {float: right;}}}// 3、媒体查询.component {width: 300px;@media (min-width: 768px) {width: 600px;@media (min-resolution: 192dpi) {background: red;}}@media (min-width: 980px) {background-color: yellow;}}// 4、混合 => 注意:声明的时候,加(),就不会在css中生成.card {color: pink;}// 4.1、第一种写法:无参,调用时不添加().box11 {.card; font-size: 20px;}// 4.2、第二种写法:无参,调用时添加().box12 {.card(); margin: 10px;}// 4.3、携带参数// 1)编写.card2(@a,@b,@c){ // 1.1、声明形参:@a,@b,@c3个变量margin: @a @b; // 1.1、使用实参中的值,设置外边距和字体大小font-size: @c;}// 2)使用 .box13 {.card2(10px, 20px,30px);}// 4.4、携带参数,并设置默认参数.card2(@a,@b,@c:10px) {margin: @a @b;font-size: @c;}.box14 {.card2(10px, 20px);}// 5、@import 导入文件,可以引入任何css和less文件@import url("./03.27-11b.less");
4、补充——sass和stylus
4.1、sass语法
安装
: - 安装全局:
npm i sass -g
- 项目中安装依赖:
npm i sass -D
vscode
安装插件easy sass
创建sass文件
sass
/scss
,说明:sass是老版本,scss是新版本的语法升级,支持css3特性
{}- 文件后缀
.scss
文档地址
: 示例
.fatherwidth:100px;.sonwidth:50px;
.father{width:100px;.son{width:50px;}
}
4.2、stylus
官网地址
:stylus文件后缀
:.styl简单介绍
:以截图形式