2.5 CSS预处理器

简介: 常见的CSS预处理器如Sass、Less,通过嵌套、变量、混入等功能提升CSS开发效率与可维护性,需编译为CSS使用,虽有学习成本但利于工程化管理。

1.常见的CSS预处理器有哪些?
[!NOTE]
css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处
● Sass(Scss):2007,ruby编写
● Less: 2009,js编译
1.1 使用流程?

  1. 基于CSS的另外一种语言
  2. 通过工具编译成CSS
  3. 添加了很多CSS不具备的特性
  4. 同时CSS文件的组织方式
    1.2 预处理器的作用有哪些?
  5. 帮助开发者更好组织CSS代码(变量,mixIn)
  6. 提高代码的复用性
  7. 代码的可维护性增强
    2.Less/Sass预处理器的功能?
  8. 嵌套: 反映层级和约束
  9. 变量和计算: 减少重复代码
  10. Extend和mixIn: 代码片段的抽离
  11. 循环: 适用于复杂有规律的样式
  12. import:可以实现CSS文件的模块化
    3.CSS预处理器的优缺点?
    ● 优点: 提高代码的复用率和可维护性
    ● 缺点: 引入了编译的过程,有一定的学习成本
    前端工程化:预处理不再是唯一的手段了,可以使用工程化构建工具进行处理
    4.scss和less的区别?
  13. 编译环境不一样
  14. 变量符不一样,Less是@,而Scss是$,而且变量的作用域也不一样。
  15. 输出设置,Less没有输出设置,Sass提供4种输出选项:
  16. Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。
  17. 引用外部CSS文件
  18. 工具库不同
相关文章
|
缓存 资源调度 JavaScript
Node.js 包管理器(Corepack)
Node.js 包管理器(Corepack)
2004 0
itextpdf 中文不显示问题
# 现象 itextpdf 打印时中文字体显示不出来,莫名其妙的消失不见了。具体现象如下图所示。 ![](https://ata2-img.oss-cn-zhangjiakou.aliyuncs.com/neweditor/ddc69588-4fc6-46ff-9d33-07f99340c963.png) 真正的理想情况如下图。 ![](https://ata2-img.oss-cn-zhangj
itextpdf 中文不显示问题
|
11月前
|
存储 JavaScript 前端开发
XSS攻击
XSS(跨站脚本攻击)利用网站对用户输入过滤不足,将恶意脚本注入页面,用户访问时执行,可窃取Cookie、数据或劫持操作。主要分反射型(通过URL注入)和存储型(存入数据库)。防御措施包括转义字符、白名单过滤富文本及使用CSP策略限制资源加载,有效降低安全风险。(238字)
|
11月前
|
存储 人工智能 JSON
🤖 Agent系统
大模型Agent是具备自主规划、推理、工具调用与记忆能力的智能系统,通过“大脑-感知-行动-记忆”架构实现复杂任务分解与持续交互。支持函数调用与多工具集成,广泛应用于搜索、计算、天气等场景。主流框架如LangChain、AutoGPT、CrewAI等各具特色,适用于原型开发、多Agent协作与企业级应用,是AI进化的关键方向。
|
11月前
|
机器学习/深度学习 缓存 关系型数据库
🎯 注意力机制详解
注意力机制是Transformer核心,实现动态信息聚焦。涵盖自注意力、交叉注意力及多头、分组、多查询等变体,平衡效率与性能。广泛应用于编码器-解码器、多模态融合等场景,是大模型设计与面试考察重点。
|
11月前
|
算法
🗜️ 模型压缩与量化
模型压缩通过量化、稀疏化、知识蒸馏等技术,减小模型体积与计算开销,提升推理效率。涵盖INT8/INT4量化、GPTQ、SmoothQuant等方法,支持在资源受限设备部署大模型,平衡压缩比、精度与速度。附实战代码与面试要点。
|
存储 Java C语言
Java List 复制:浅拷贝与深拷贝方法及区别
我是小假 期待与你的下一次相遇 ~
1400 1
|
存储 算法
飞桨x昇腾生态适配方案:09_Paddle转ONNX
本节主要介绍如何将 PP-OCRv4 模型转化为 ONNX 模型,包括环境准备、模型下载、训练模型转 inference 模型及最终转为 ONNX 格式的过程。首先需安装 Paddle2ONNX 和 ONNXRuntime,接着下载并解压训练模型。通过 `export_model.py` 脚本将训练模型转化为 inference 模型,生成包含结构和参数的文件。最后使用 Paddle2ONNX 工具完成到 ONNX 格式的转换,并可选地使用 onnxslim 进行模型优化。各步骤均提供详细命令与参数说明,便于实际操作与部署。
1556 9
|
Java 关系型数据库 MySQL
SpringBoot手动提交事务
SpringBoot手动提交事务
1918 0
|
JSON 人工智能 API
程序调用大模型返回结构化输出(JSON)
本文介绍了如何使用讯飞星火大模型API,并通过Python封装实现结构化数据输出。首先,通过封装SparkAI类,实现了与讯飞星火API的交互,确保了调用的安全性和便捷性。接着,利用Pydantic库定义了数据模型`CalendarEvent`,确保从大模型获取的回答能够被正确解析成预设的结构化JSON格式,从而解决了大模型回答不规范的问题。示例代码展示了如何构造请求、接收并解析响应,最终输出结构化的活动信息。
2247 6