less基础

本文介绍了Less作为CSS预处理器的功能,如定义变量、进行运算、嵌套规则、混合(mixins)以及导入等特性。通过Less,开发者可以编写更简洁、可维护的样式代码。此外,文章提到了变量的作用域遵循就近原则,并提供了使用npm进行编译的方法,同时对比了Less和Sass的相关资源链接。
摘要由CSDN通过智能技术生成

一、less介绍

1、介绍
是css预处理语言,让css更强大,可以实现在less里面定义变量函数运算等
2、less默认浏览器不识别
less转成csS
(框架: less/sass 框架的内置了转码less-css)
3、使用语法
1.创建less文件xxx.less 后缀.less
2. less编译成css 再引入页面上
4、如何编译less
方法1:安装less命令工具
通过命令执行less转成css
1.项目中安装less

npm install less --save

2.转文件
编译在命令窗口

lessc xx.less xx. css

方法2(推荐
安装插件
easy less和easy sass
请添加图片描述

二、less定义变量

1、定义一个变量
语法: @变量名:变量值;
使用@变量名;
请添加图片描述
2、变量运算
加减法时以第一个数据单位基准
乘除法时注意单位一定要统一 ,除法要使用小括号
请添加图片描述
请添加图片描述
3、变量作用域
一句话理解就是:就近原则,不要管闭包。首先在本地查找变量和混合 (mixins) 。如果找不到,则从“父”级作用域继承。
请添加图片描述
案列
请添加图片描述
4、url变量
注意:路径需要加引号,变量名必须使用大括号包裹请添加图片描述
案列
请添加图片描述

三、less嵌套

请添加图片描述
请添加图片描述
请添加图片描述

四、less混合

1、不带参数
请添加图片描述
2、带参数混合
请添加图片描述
3、匹配
请添加图片描述
请添加图片描述
4、方法的命名空间(了解)
请添加图片描述
请添加图片描述
5、数量不定的参数
如果你希望你的方法接受数量不定的参数,你可以使用=...=.犹如ES6的扩展运算符。
请添加图片描述
请添加图片描述
请添加图片描述

五、less导入

请添加图片描述

六、less穿透

请添加图片描述

七、npm介绍

请添加图片描述
请添加图片描述

八、less和sass官方文档

less官方文档https://less.bootcss.com/#概览
sass官方文档https://www.sass.hk/guide/
文章来源
https://www.bilibili.com/video/BV1CT411k7vZ

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值