当前位置: 首页 > news >正文

less基础

一、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

http://www.lryc.cn/news/21488.html

相关文章:

  • 电子统计台账:海量数据中导入特定行,极力减少键盘编辑工作量
  • ChatGPT是如何训练得到的?通俗讲解
  • 刷题28-有效的变位词
  • JavaWeb中异步交互的关键——Ajax
  • python爬虫常见错误
  • AI_Papers周刊:第三期
  • 在win7上用VS2008编译skysip工程
  • python 数据结构习题
  • 18、MySQL8其它新特性
  • 【Android笔记79】Android之接口请求库Retrofit的介绍及使用
  • 蓝桥杯 考勤打卡
  • 逻辑回归
  • CTFer成长之路之Python中的安全问题
  • SpringBoot知识快速复习
  • SpringBoot+React博客论坛系统 附带详细运行指导视频
  • C++ primer 之 extern
  • Linux 练习二 (VIM编辑器 + GCC编译器 + GDB调试)
  • python3 连接数据库 mysql PyMysql
  • 昇腾AI新技能,还能预防猪生病?
  • 模板方法模式(Template Method)
  • C C++ typedef的使用
  • Laravel框架03:DB类操作数据库
  • 数据结构期末复习总结(前章)
  • 设计环形队列
  • 面向对象之-接口鉴权
  • Python 多进程多线程线程池进程池协程
  • 【自然语言处理】基于句子嵌入的文本摘要算法实现
  • fiddler抓包
  • 【Linux】网络套接字编程
  • break与continue关键字