【CSS】less基础(简单版)

news/2025/2/26 9:07:16

less基础(简单版)

  • 01.CSS的弊端
  • 02.LESS简介以及使用变量
  • 03.less编译easy less插件
  • 04.less嵌套
  • 05.less运算

01.CSS的弊端

在这里插入图片描述

如下图:
在这里插入图片描述
在这里插入图片描述
要手动计算倍数。

02.LESS简介以及使用变量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

lesseasy_less_16">03.less编译easy less插件

在这里插入图片描述
在这里插入图片描述

安装easy less之后,保存less文件时会自动生成一个css文件。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

less_26">04.less嵌套

CSS嵌套写法:
在这里插入图片描述

less内:
在这里插入图片描述
css内(less文件保存后生成的css文件):
在这里插入图片描述

所以,(后代选择器如此写)
在这里插入图片描述

如果是两个类呢?
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

如果是伪类,如下写是不对的
在这里插入图片描述
在这里插入图片描述

应该如下写:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

所以,在这里插入图片描述
在这里插入图片描述

less_58">05.less运算

在这里插入图片描述

例如:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用运算后:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运算也可以应用于改颜色:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

还可以加括号:
在这里插入图片描述

官网:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述


http://www.niftyadmin.cn/n/5868448.html

相关文章

飞书webhook监控业务系统端口

钉钉告警没有额度了,替代方案使用企业微信或者是飞书,以下脚本是飞书为例 监控ping也就是活动主机 #!/bin/bash # IP Ping 监控脚本 date$(date "%Y-%m-%d %H:%M:%S") # 根据实际情况修改飞书 Webhook 地址 webhook"https://open.feish…

PHP入门基础学习五(函数1)

函数 一、概念 1、什么是函数? 函数:封装一段用于完成特定功能的代码 当使用一个函数时,只需关心函数的参数和返回值,就可以完成一个特定的功能 2、php中的函数 PHP 的真正威力源自于它的函数,PHP 中提供了超过 1000 个内建的函数。 php函数分为: 系统内部函数和自…

Maven中一些基础知识点

早些时候只知道创建或者开发springboot项目时候,有一个叫pom.xml的文件可以用来管理项目所需的依赖/第三方工具。 索性稍微深入了解了一下,然后把自己认为重要的记录下来。 首先我们要引入新的依赖自然是在dependencies下写dependency,这个…

第48天:Web开发-JavaEE应用依赖项Log4j日志Shiro验证FastJson数据XStream格式

#知识点 1、安全开发-JavaEE-第三方依赖开发安全 2、安全开发-JavaEE-数据转换&FastJson&XStream 3、安全开发-JavaEE-Shiro身份验证&Log4j日志处理 一、Log4j 一个基于Java的日志记录工具,当前被广泛应用于业务系统开发,开发者可以利用该工…

广州4399游戏25届春招游戏策划管培生内推

【热招岗位】 游戏策划管培生、产品培训生、游戏文案策划、游戏数值策划、游戏系统策划、游戏产品运营、游戏战斗策划、游戏关卡策划 【其他岗位】产品类(产品培训生、产品运营等)、技术类(开发、测试、算法、运维等)、运营市场类…

sklearn中的决策树-分类树:实例-分类树在合成数据集上的表现

分类树实例:分类树在合成数据集上的表现 代码分解 在不同结构的据集上测试一下决策树的效果(二分型,月亮形,环形) 导入 import numpy as np from matplotlib import pyplot as plt from matplotlib.colors import Li…

stm32使用(无线串口)实现收发、判断数据+DMA(HAL库)

目录 前言: 1. 用CubeMX配置串口DMA所需要的环境 (1)打开CubeMAX,点击红框 (2)查找stm32F103C8T6的芯片 (3)配置SYS (4)配置RCC时钟 (5&am…

2025年第16届蓝桥杯嵌入式竞赛学习笔记(十):ADC测量电压

1.原理图 VDD的最大值为3.3V,所以PB15测量电压值的范围为0~3.3V,然后它读取到的AD值为0~4096,所以电压测量公式为 为什么是4096,因为ADC是一个12比特的 2.CubeMX配置 将PB15引脚配置为ADC2_IN15,PB12配置为ADC1_IN11 …