less基础

news2024/11/8 16:58:39

less基础

1、维护CSS的弊端

CSS是一门非程序语言,没有变量、函数、SCOPE(作用域) 等概念

  1. CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的
  2. 不方便维护及扩展,不利于复用
  3. CSS没有很好的计算能力
  4. 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

2、Less介绍

Less (Leaner Style Sheets的缩写) 是一门CSS扩展语言,也成为CSS预处理器

作为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法是,为CSS加入程序式语言的特性

它在CSS的语法基础上,引入了变量,Mixin (混入),运算以及函数等功能,大大简化了CSS的缩写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情

Less中文网址:Less 中文网

常见的CSS预处理器:Sass、Less、Stylus

一句话:Less是一门CSS预处理器,它扩展了CSS的动态特性

3、Less使用

我们首先新建一个后缀名为less的文件,在这个less文件里面书写less语句

3.1、Less变量

源代码

 

变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用

@变量名: 值;

变量命名规范

  1. 必须有@为前缀
  2. 不能包含特殊字符
  3. 不能以数字开头
  4. 大小写敏感

3.2、Less编译

本质上,Less包含一套自定义的语法以及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件

所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用

Vocode Less插件

Easy LESS插件用来把less问价编译为css文件

安装完毕插件,重新加载下vscode。只需要保存一下Less文件,会自动生成css文件

3.3、Less嵌套

源代码

 

 

如果遇见( 交集 | 伪类 | 伪元素选择器 )

  1. 内层选择器的前面没有&符号,则它被解析为父选择器的后代
  2. 如果有&符号,它就被解析为父元素自身或父元素的伪类

3.4、Less运算

源代码

 

 

注意:

  1. 乘号( * )和除号( / )的写法
  2. 运算的时候最好把运算数字括()起来,除法一定要括起来
  3. 运算符中间左右有个空格隔开1px + 5;
  4. 对于两个不同的单位的值之间的运算,运算结果取第一个值的单位
  5. 如果两个值之间只有一个值有单位,则运算结果就取该单位

3.5Less导入

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]Python计算机毕业设计Django作业查重系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

AirPods Pro 2用户反馈出现耗电严重情况,Find My功能是其最大亮点

多位 AirPods Pro 2 用户反馈,在升级安装最新版本之后出现了耗电严重的情况。AirPods Pro 2 充电盒的电池即使在不使用的情况下也会出现耗电情况。受影响的用户反馈在不使用状态下,一晚上可以消耗 10% 的电量。 这些受影响的 AirPods Pro 2 用户反馈&…

业界认可+1!网易云信入选首批智慧教育产品和服务供应商名录

近日,2022(第二十一届)中国互联网大会在深圳成功召开。大会期间,由中国互联网协会智慧教育工作委员会、中国信息通信研究院合办的智慧教育论坛如期举行,论坛以“数智启新聚势,教育点亮未来”为主题&#xf…

Android AOSP和Android-X86源码下载编译终极普法

Android AOSP和Android-X86源码下载编译终极普法 引言 最近有朋友在询问怎么下载Android AOSP源码和Android-X86源码,编译学习!其实这个说简单也简单,说复杂吗也不复杂。但是难在真的干起来!凯子哥的风格吗,既然朋友们…

JavaSe

软件: 一系列按照特定顺序组织的计算机数据和指令的集合、有系统软件(window、linux)和应用软件(QQ、微信)之分。 人机交互方式: 图形化界面(GUI)鼠标直接点击(简单直观…

留学Assignment写作方法和步骤整理

Assignment主要讨论的是研究性话题,深入剖析和研究主题,对于Assignment的主题进行探讨,从而更深入的了解,科技类Assignment偏向科技实用性,而对于文科类Assignment则偏向于探讨。要让Assignment更具价值,应…

【LSTM时序预测】基于卷积神经网络结合BiLSTM实现时序数据预测附matlab代码

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …

最佳实践 | 如何基于GitHub Actions创建 DolphinScheduler Python API的CI/CD?

点亮 ⭐️ Star 照亮开源之路https://github.com/apache/dolphinscheduler01.DolphinScheduler 和 Python API 介绍Apache DolphinScheduler 是一个分布式、可扩展的工作流调度器平台,具有强大的 DAG 可视化界面。它可以帮助用户更轻松地构建和维护任何规模的工作流…

计算机毕业设计springboot+vue基本微信小程序的二手车交易平台

项目介绍 首先,论文一开始便是清楚的论述了小程序的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了小程序的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据…

木字楠后台管理系统开发(2):SpringBoot项目代码生成以及基础接口测试

🎶 文章简介:木字楠后台管理系统开发(2):SpringBoot项目代码生成以及基础接口测试 💡 创作目的:为了带大家完整的体验木字楠后台管理系统模版的开发流程 ☀️ 今日天气:一场秋雨一场寒,天气越来…

云原生之使用Docker部署docker-compose-ui工具

云原生之使用Docker部署docker-compose-ui工具一、Docker Compose UI介绍二、检查本地docker环境1.检查系统版本2.检查docker状态三、下载Docker Compose UI镜像四、部署Docker Compose UI服务1.新建安装目录2.创建Docker Compose UI容器3.检查Docker Compose UI容器状态4.查看…

3 - 线程池 Java内置的线程池

1、ExecutorService的介绍 ExecutorService 接口继承了Executor 接口,是Executor 的子接口。 Executors类 提供工厂方法用来创建不同类型的线程池。Executors是工具类,他提供对ThreadPoolExecutor的封装,会产生几种线程池供大家使用。 关于…

20 个超级实用的 CSS 技巧,帮助你成为更好的开发者

在开发项目中,修改输入占位符样式,多行文本溢出,隐藏滚动条,修改光标颜色,水平和垂直居中等等,这些都是我们非常熟悉的开发场景!前端开发者几乎每天都会和它们打交道,因此&#xff0…

Visual Studio 平台下基于 C# /.NET 的 Android 开发

文章目录Part.I IntroductionChap.I 环境搭建Part.II ExamplePart.I Introduction 因为想尝试一下移动端的开发,所以在网上简单搜了一下移动端开发可以使用的语言,发现 Java, C# 等都可以。虽然用Java的居多,但是笔者对C#较为熟悉一些&#x…

TikTok变现冲不冲?这些TikTok选品方法赶快用上

TikTok电商商家们通常最忧愁的就是不知道如何有效进行TikTok选品。有时候因为选到难卖的产品,就会导致库存积压、资金紧缺等问题。今天,为TikTok电商商家们分享一些好用、有效的TikTok选品方法~ TikTok选品方法一——利用电商平台数据选品 除了一些偏地…

[附源码]JAVA毕业设计文物管理系统(系统+LW)

[附源码]JAVA毕业设计文物管理系统(系统LW) 项目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术&…

速卖通官方公告:“不活跃商品”管理规则,将于12月12日生效!

最新平台动向:速卖通“黑色星期五”大促开始。作为海外最火的促销购物节黑五与世界杯重叠,速卖通上热销海外的国货有了显著的新趋势:越来越多具有更高科技含量的国货在海外走红。其中,速卖通上国产VR眼镜成为今年最火的商品&#…

Kubernetes 调度器详解

kube-scheduler是 kubernetes 系统的核心组件之一,主要负责整个集群资源的调度功能,根据特定的调度算法和策略,将 Pod 调度到最优的工作节点上面去,从而更加合理、更加充分的利用集群的资源,这也是我们选择使用 kubern…

构建高性能内存队列:Disruptor yyds~

Java中有哪些队列 ArrayBlockingQueue 使用ReentrantLockLinkedBlockingQueue 使用ReentrantLockConcurrentLinkedQueue 使用CAS等等 我们清楚使用锁的性能比较低,尽量使用无锁设计。接下来就我们来认识下Disruptor。 Disruptor简单使用 github地址:P…

R语言建立和可视化混合效应模型mixed effect model

全文下载链接:http://tecdat.cn/?p20631我们已经学习了如何处理混合效应模型。本文的重点是如何建立和_可视化_ 混合效应模型的结果(点击文末“阅读原文”获取完整代码数据)。相关视频设置本文使用数据集,用于探索草食动物种群对…