关于less的基本使用

1、介绍及概述

1.1、解释

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

1.2、概述

  1. CSS弊端
    • 没有逻辑性、变量、函数、作用域、不利于复用,更没有计算
  2. 介绍
    • lesscss预处理语言,除了less,还有scss(sass)stylus这些预处理语言。
  3. 官网
    • less官网地址
  4. 特点
    • LESSCSS赋予了动态语言的特性,如:变量, 继承, 运算, 函数
    • LESS既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js服务端运行
  5. 安装
    • 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语法

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

4.2、stylus

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/425324.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php语言基本语法

HP&#xff08;Hypertext Preprocessor&#xff09;是一种广泛使用的开源服务器端脚本语言&#xff0c;特别适合于Web开发。 它能够嵌入到HTML中&#xff0c;执行动态网页内容。 PHP的一些基本语法元素&#xff1a; 1. 基本结构 PHP代码通常嵌入到HTML中&#xff0c;以<…

【三大运营商】大数据平台体系架构【顶层规划设计】

在国内运营商&#xff08;如中国移动、中国联通、中国电信&#xff09;的大数据平台建设中&#xff0c;顶层规划设计至关重要。以下是针对三大运营商为例【如电信】的大数据平台体系架构的顶层规划设计方案&#xff0c;涵盖整体架构、关键组件、数据管理、应用场景等方面。 1. …

Python 解析 JSON 数据

1、有如下 JSON 数据&#xff0c;存放在 data.json 文件&#xff1a; [{"id":1, "name": "小王", "gender": "male", "score": 96.8}, {"id":2, "name": "小婷", "gender&qu…

[网络]https的概念及加密过程

文章目录 一. HTTPS二. https加密过程 一. HTTPS https本质上就是http的基础上增加了一个加密层, 抛开加密之后, 剩下的就是个http是一样的 s > SSL HTTPS HTTP SSL 这个过程, 涉及到密码学的几个核心概念 明文 要传输的真正意思是啥 2)密文 加密之后得到的数据 这个密文…

使用knn算法对iris数据集进行分类

程序功能 使用 scikit-learn 库中的鸢尾花数据集&#xff08;Iris dataset&#xff09;&#xff0c;并基于 KNN&#xff08;K-Nearest Neighbors&#xff0c;K近邻&#xff09;算法进行分类&#xff0c;最后评估模型的准确率。 代码 from sklearn import datasets# 加载鸢尾…

SpringBoot+vue集成sm国密加密解密

文章目录 前言认识SM2后端工具类实现引入依赖代码实现工具类&#xff1a;SM2Util 单元测试案例1&#xff1a;生成服务端公钥、私钥&#xff0c;前端js公钥、私钥案例2&#xff1a;客户端加密&#xff0c;服务端完成解密案例3&#xff1a;服务端进行加密&#xff08;可用于后面前…

Modelsim SE-64 2020.4关闭优化

一、问题起源 本人由于之前一直使用AMD的板子&#xff0c;使用vivado自带仿真器进行功能仿真&#xff0c;由于自带的页面简洁和仿真时间自己还都可以接受就没有什么modelsim联合仿真&#xff0c;又因准备FPGA大赛的国产FPGA易灵思的题目&#xff0c;使用Efinity&#xff0b;Mod…

AI助力遥感影像智能分析计算,基于高精度YOLOv5全系列参数【n/s/m/l/x】模型开发构建卫星遥感拍摄场景下地面建筑物智能化分割检测识别系统

随着科技的飞速发展&#xff0c;卫星遥感技术已成为获取地球表面信息的重要手段之一。卫星遥感图像以其覆盖范围广、数据量大、信息丰富等特点&#xff0c;在环境监测、城市规划、灾害评估等多个领域发挥着不可替代的作用。然而&#xff0c;面对海量的卫星图像数据&#xff0c;…

磁盘写入缓存区太大,如何清理C盘缓存

针对“磁盘写入缓存区太大&#xff0c;如何清理C盘缓存”的问题&#xff0c;我们可以从多个角度进行专业解答。首先&#xff0c;需要明确的是&#xff0c;“磁盘写入缓存区太大”这一表述可能涉及硬盘缓存的设置或系统缓存管理&#xff0c;但通常用户面对的问题更多是关于C盘空…

Json和Http专栏

json 理论 什么是JSON? 规则 被大括号包括的是JSON对象,被中括号包括的是JSON数组. JSON数组JSON对象 实验 构建JSON 用代码实现如下json内容: //构建JSON void WirteJson() {QJsonObject rootObject;//1.插入name字段rootObject.insert("name","china&quo…

KV260 进阶开发(PYNQ驱动开发+Pixel Pack)

目录 1. 简介 2. PixelPacker HLS 实现 2.1 PixelPacker HLS 源码 2.2 PixelPacker 功能简介 2.3 头文件介绍 2.4 启动间隔 II 2.5 Case V24 片段解释 3. PixelPacker Py 驱动 3.1 PixelPacker Py 源码 3.2 PixelPacker 类详解 3.3 property 装饰器 3.4 操作寄存器…

基于ssm的个性化影片推荐系统设计与实现

需要项目源码请联系我&#xff0c;目前有各类成品 毕设 javaweb ssh ssm springboot等等项目框架&#xff0c;源码丰富。 专业团队&#xff0c;咨询就送开题报告&#xff0c;活动限时免费&#xff0c;有需要的朋友可以来咨询。 一、摘要 随着科学技术的飞速发展&#xff0c;社…

828华为云征文|部署知识库问答系统 MaxKB

828华为云征文&#xff5c;部署知识库问答系统 MaxKB 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 核心竞争力1.3 计费模式 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 MaxKB3.1 MaxKB 介绍3.2 Docker 环境搭建3.3 MaxKB 部署3.4 Max…

代码管理系统简介与部署(Introduction and Deployment of Code Management System)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

visual prompt tuning和visual instruction tuning

visual prompt tuning&#xff1a;作为一种微调手段&#xff0c;其目的是节省参数量&#xff0c;训练时需要优化的参数量小。 输入&#xff1a;视觉信息image token可学习的prompt token 处理任务&#xff1a;比如常见的分类任务 visual prompt tuning visual instruction tu…

在麒麟操作系统中查看进程运行时间

在麒麟操作系统中查看进程运行时间 1、使用ps命令查看进程运行时间1.1 基本命令结构1.2 示例&#xff1a;查看sshd进程的运行时间 2、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Linux操作系统中&#xff0c;包括麒麟&#xff08…

第L6周:机器学习-随机森林(RF)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 1.什么是随机森林&#xff08;RF&#xff09; 随机森林&#xff08;Random Forest, RF&#xff09;是一种由 决策树 构成的 集成算法 &#…

python绘制3d建筑

import matplotlib.pyplot as plt import numpy as np from mpl_toolkits.mplot3d.art3d import Poly3DCollection# 随机生成建筑块数据 def generate_building_blocks(num_blocks, grid_size100, height_range(5, 50), base_size_range(10, 30)):buildings []for _ in range(…

代码随想录训练营 Day58打卡 图论part08 拓扑排序 dijkstra朴素版 + 堆优化版

代码随想录训练营 Day58打卡 图论part08 一、拓扑排序 例题&#xff1a;卡码117. 软件构建 题目描述 某个大型软件项目的构建系统拥有 N 个文件&#xff0c;文件编号从 0 到 N - 1&#xff0c;在这些文件中&#xff0c;某些文件依赖于其他文件的内容&#xff0c;这意味着如果…

勇于尝试,永远行动 - 《洛克菲勒写给儿子的38封信》读书笔记

两倍速听过好几遍的书&#xff0c;洛克菲勒的思想和志向&#xff0c;配得上他的成就。 “在尝试中寻找突破&#xff0c;在行动中成就自我。”这是洛克菲勒写给儿子的箴言&#xff0c;也是他一生的真实写照。在这38封信中&#xff0c;他不仅分享了自己的工作心得&#xff0c;更…