当前位置: 首页 > article >正文

CSS(三)less一篇搞定

目录

一、less

1.1什么是less

1.2Less编译

1.3变量

1.4混合

1.5嵌套

1.6运算

1.7函数

1.8作用域

1.9注释与导入


一、less

1.1什么是less

   我们写了这么久的CSS,里面有很多重复代码,包括通配颜色值、容器大小。那我们能否通过js声明变量来解决这些问题?原生的css不支持,但less支持。css预处理器为css增加一些编程特性,无需考虑浏览器的兼容问题,可以在CSS中使用变量,简单的逻辑程序,函数等在编程语言中的一些基本的性能,可以让css更加的简洁,增加适应性以及可读性,可维护性等。

注意:

  • 浏览器不认识less,写的less代码,需要编译成css让浏览器识别。
  • 再项目,通常我们都是用预处理语言

1.2Less编译

安装node

安装less         npm install -g less

编译less 

方式一        lessc styles.less styles.css

方式二  

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net.cn/npm/less" ></script>

方式三    下载easyless插件

1.3变量

  • less允许使用@符号定义变量,声明less变量的格式@变量名:变量值
  • 选择器的名字也可以使用变量声明
  • url地址使用变量

less

@width:900px;
@height:@width+100px;
@color:skyblue;
@mybanner:banner;
@imgurl:'../image/ad/01/';

.@{mybanner}{
  width: @width;
  height: @height;
  background-color: @color;
  background-image: url('@{imgurl}/0.png');
}

css

.banner {
  width: 900px;
  height: 1000px;
  background-color: skyblue;
  background-image: url('../image/ad/01//0.png');
}
  • 变量可以先使用后声明

1.4混合

  • 混合类似函数的思想
  • 混合允许一个类的属性用于另一个类,并且包含类名作为其属性。
  • 在混和调用后使用!important关键字将它继承的所有属性标记为!important

混合也可以接收参数,这些参数是混合时传递给选择器块的变量

1.5嵌套

  • Less提供了使用嵌套代替层叠与样式结合使用的能力

  • 还可以使用此方法将伪选择器与混合一起使用。重写为一个混合(&表示当前选择器的父类

1.6运算

算数运算符加减乘除可以对任何数字、颜色或变量进行运算。如果可能的话,算数运算符在加减或比较之前会对单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。

1.7函数

Less内置了许多函数,常用的这几个,其他的去mdn看。

1.8作用域

Less中的作用域与CSS中的作用域非常相似。首先在本地查找变量和混合,如果找不到,则从父级作用域继承。

与CSS自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。

1.9注释与导入

块注释和单行注释都可以使用

你可以导入一个.less文件,此文件中的所有变量就可以全部使用了。如果导入的文件是.less扩展名,则可以将扩展名省略掉。


http://www.kler.cn/a/535960.html

相关文章:

  • 深入浅出DeepSeek LLM 以长远主义拓展开源语言模型
  • 如何利用Python爬虫获取商品销量详情:应对eBay反爬策略的实战指南与代码示例
  • Linux系统 环境变量
  • 文献阅读分享《新闻推荐中的审议式多样性:操作化与实验用户研究》
  • 排序算法--希尔排序
  • 通过C/C++编程语言实现“数据结构”课程中的链表
  • Excel交换列位置
  • uniapp商城之用户模块【个人信息】
  • 【如何将pdf颜色模式由rgb转换为cmyk模式】
  • QT 窗口A覆盖窗口B时,窗口B接受不到鼠标事件
  • AJAX 详细教程
  • 导入了fastjson2的依赖,但却无法使用相关API的解决方案
  • 二、0-1搭建springboot+vue3前后端分离-登录页面
  • 【Redis实战】投票功能
  • 深度剖析思科安全产品的特征以及技术特点
  • 【DeepSeek】DeepSeek小模型蒸馏与本地部署深度解析DeepSeek小模型蒸馏与本地部署深度解析
  • 【Elasticsearch】multi terms aggregation
  • 蓝桥杯字串简写(二分)
  • 火语言RPA--JSON提取
  • Go语言中的高阶函数
  • 【MySQL】centos 7 忘记数据库密码
  • Maven 构建生命周期与阶段详解
  • Redis存储⑤Redis五大数据类型之 List 和 Set。
  • Java面试场景题分享
  • stm32生成hex文件详解
  • 如何在 Kivy 中从按钮更新选项卡内容