关于less的基本使用

news/2024/9/23 15:49:10/

1、介绍及概述

1.1、解释

  1. html" title=less>less 是方便开发人员书写CSS的一门预处理语言
  2. 浏览器只认识html /html" title=css>css /js格式的文件,所以直接引入.html" title=less>less文件,没有任何的效果,需要把html" title=less>less文件转换成html" title=css>css文件

1.2、概述

  1. CSS弊端
    • 没有逻辑性、变量、函数、作用域、不利于复用,更没有计算
  2. 介绍
    • html" title=less>lesshtml" title=css>css预处理语言,除了html" title=less>less,还有shtml" title=css>css(sass)stylus这些预处理语言。
  3. 官网
    • html" title=less>less官网地址
  4. 特点
    • LESSCSS赋予了动态语言的特性,如:变量, 继承, 运算, 函数
    • LESS既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js服务端运行
  5. 安装
    • node.js中安装html" title=less>less工具:
      • 全局安装:npm install html" title=less>less -g
      • 项目依赖:npm install html" title=less>less --save
      • 检查版本,测试是否安装成功:输入html" title=less>lessc -v,检查版本号
    • vscode安装插件 "easy html" title=less>less"

2、变量使用及解释

html" title=css>css">// 声明变量 => 使用@符号,代码结束后需要添加;分号@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、常用语法

html" title=css>css">// 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、混合 => 注意:声明的时候,加(),就不会在html" title=css>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 导入文件,可以引入任何html" title=css>css和html" title=less>less文件@import url("./03.27-11b.html" title=less>less");

4、补充——sass和stylus

4.1、sass语法

  1. 安装:
    • 安装全局:npm i sass -g
    • 项目中安装依赖:npm i sass -D
  2. vscode安装插件easy sass
  3. 创建sass文件
    • sass/shtml" title=css>css,说明:sass是老版本,shtml" title=css>css是新版本的语法升级,支持html" title=css>css3特性 {}
    • 文件后缀 .shtml" title=css>css
  4. 文档地址
    • 文档地址
  5. 示例
html" title=css>css">/* sass */
.fatherwidth:100px;.sonwidth:50px;
/* shtml" title=css>css */
.father{width:100px;.son{width:50px;}
}

4.2、stylus

  1. 官网地址:stylus
  2. 文件后缀:.styl
  3. 简单介绍:以截图形式
    在这里插入图片描述

http://www.ppmy.cn/news/1529388.html

相关文章

容器技术--Dockerfile 构建镜像

Dockerfile dockerfile 是一系列命令&参数构成的脚本,这些命令应用于基础镜像,最终创建一个新的镜像,可以提供一致的运行环境。【也可以登录容器,自己安装软件,最后commit为镜像】 命令 FROM 指定基础镜像(必须),如FROM ubuntu;每一个指令就生成一层镜像;RUN 运…

sql语法学习

学习 SQL(Structured Query Language)语法是数据库开发的基础,主要用于数据库的管理和操作。以下是 SQL 的基本语法和常用操作,涵盖数据查询、插入、更新、删除等。 1. 数据库基础 数据库:存储表和数据的集合。表&am…

电脑远程启动Wol

WOL介绍 WOL是Wake On Lan就是通过网卡启动电脑操作。具体就是客户端发送一个命令,电脑由于没有彻底断电会响应这条命令,用于启动电脑。如果有公网IP就可以实现随时启动电脑。这需要硬件和软件同时协作,不过大部分网卡都支持,Win…

10 while和unitl循环结构语句

while和unitl循环结构语句 一、循环结构语句 ​ Shell编程中循环命令用于特定条件下决定某些语句重复执行的控制方式,有三种常用的循环语句:for、while和until。while循环和for循环属于“当型循环”,而until属于“直到型循环”。 二、详解…

线性代数之QR分解和SVD分解

文章目录 1.QR分解Schmidt正交化Householder变换QR分解的应用 2. 求矩阵特征值、特征向量的基本方法3.SVD分解SVD分解的应用 参考文献 1.QR分解 矩阵的正交分解又称为QR分解,是将矩阵分解为一个正交矩阵Q和一个上三角矩阵R的乘积的形式。 任意实数方阵A&#xff0c…

lora 微调3B模型微调前有5G 量化f16 后最后导出模型容量变小了只有2G了,为什么?

环境: lora 微调 问题描述: lora 微调3B模型微调前有5G 量化f16 后最后导出模型容量变小了只有2G了,为什么? 解决方案: 在使用LoRA(Low-Rank Adaptation)对大语言模型(例如一个…

爬虫 ----hook

目录 定义: 了解什么是hook? 举例 hook XHR请求 XMLHttpRequest 案例地址: Interceptors-拦截器 HOOK cookie操作 cookie 示范 常见的hook代码总结 1.Hook Cookie 2.Hook Header 3.Hook URL 4.Hook JSON.stringify 5.Hook JSON.parse 6.Ho…

mybatis 配置文件完成增删改查(三) :mybatis如何接收多个参数

文章目录 mybatis如何接收多个参数同时满足多个条件 的查询1方法二方法三 mybatis如何接收多个参数 三种方法 同时满足多个条件 的查询 1 编写接口方法:Mapper接口 参数可能是好几个 结果类型 List //同时满足多个条件的查询/*** Param("与sql语句占位符一…