关于less的基本使用

server/2024/9/23 17:06:44/

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/server/120886.html

相关文章

[数据集][目标检测]棉花叶子病害检测数据集VOC+YOLO格式977张22类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):977 标注数量(xml文件个数):977 标注数量(txt文件个数):977 标注类别…

语言的复合语句

复合语句有时被称为块语句,在编程语言世界占据重要的作用。最早Algol 60提出复合语句概念,直接影响了后面几乎所有编程语言。 为了支持一种条件下多条语句的执行,编程语言引入了”复合语句”。思想很简单,对于一般情况下单条语句…

使用c#制作一个小型桌面程序

封装dll 首先使用visual stdio 创建Dll新项目,然后属性管理器导入自己的工程属性表(如果没有可以参考visual stdio 如何配置opencv等其他环境) 创建完成后 系统会自动生成一些文件,其中 pch.cpp 先不要修改,pch.h中先导入自己需…

解决phpstudy无法启动MySQL服务

三种方法 如果说你在小皮里面,启动mysql,发现启动不了,而且你在你自己电脑本地有装过mysql服务,那么可以按照我下面的不走来,按顺序试验1,2,3,三个里面肯定有一个是可以解决的 1.停止本地的mysq…

Python知识点:如何使用Python进行算法交易

开篇,先说一个好消息,截止到2025年1月1日前,翻到文末找到我,赠送定制版的开题报告和任务书,先到先得!过期不候! 使用Python进行算法交易的完整指南 在当今快节奏的金融市场中,算法…

ADB ROOT开启流程

开启adb root 选项后,执行如下代码: packages/apps/Settings/src/com/android/settings/development/AdbRootPreferenceController.java mADBRootService new ADBRootService(); Override public boolean onPreferenceChange(Preference preference…

Git提交类型

说明:Git提交类型指的是代码commit时,写在comment前面的标志,表示此次commit的提交类型,如下: Git提交类型 常见的Git提交类型有: feat:新特性、新功能或优化; fix:修复…

react + antDesignPro 企业微信扫码登录

效果 实现步骤 1、项目中document.ejs文件引入企微js链接 注意&#xff1a;技术栈是使用的react antDesignPro&#xff0c;不同的技术栈有不同的入口文件&#xff08;如vue在html文件引入&#xff09; <script src"https://wwcdn.weixin.qq.com/node/wework/wwopen/j…