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. 工具库不同
相关文章
|
Linux Python
Linux Debian12使用VSCode和Python搭建flask开发环境
本文主要介绍了Linux Debian12使用VSCode和Python搭建flask开发环境的方法,并结合一个基础flask网页例子,测试是否运行正常。
481 2
Linux Debian12使用VSCode和Python搭建flask开发环境
|
缓存 资源调度 JavaScript
Node.js 包管理器(Corepack)
Node.js 包管理器(Corepack)
|
存储 前端开发 Java
Python 教程之控制流(9)Python 中的 Switch Case(替换)
Python 教程之控制流(9)Python 中的 Switch Case(替换)
550 0
|
2月前
|
安全 Java Unix
UUID v7 一文详解
UUID v7是RFC 9562定义的新型有序UUID,结合时间戳与随机数,兼具全局唯一性、时间有序性和隐私安全,适用于数据库主键与分布式系统,显著提升索引性能与系统效率。
|
8月前
|
存储 算法
飞桨x昇腾生态适配方案:09_Paddle转ONNX
本节主要介绍如何将 PP-OCRv4 模型转化为 ONNX 模型,包括环境准备、模型下载、训练模型转 inference 模型及最终转为 ONNX 格式的过程。首先需安装 Paddle2ONNX 和 ONNXRuntime,接着下载并解压训练模型。通过 `export_model.py` 脚本将训练模型转化为 inference 模型,生成包含结构和参数的文件。最后使用 Paddle2ONNX 工具完成到 ONNX 格式的转换,并可选地使用 onnxslim 进行模型优化。各步骤均提供详细命令与参数说明,便于实际操作与部署。
383 9
|
PyTorch 算法框架/工具 异构计算
【Hello AI】安装并使用DeepGPU-LLM-处理大语言模型任务
在处理大语言模型任务中,您可以根据实际业务部署情况,选择在不同环境(例如GPU云服务器环境或Docker环境)下安装推理引擎DeepGPU-LLM,然后通过使用DeepGPU-LLM工具实现大语言模型(例如Llama模型、ChatGLM模型、百川Baichuan模型或通义千问Qwen模型)在GPU上的高性能推理优化功能
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
消息中间件 编解码 Docker
【Docker项目实战】Docker部署RabbitMQ消息中间件
【10月更文挑战第8天】Docker部署RabbitMQ消息中间件
688 2
【Docker项目实战】Docker部署RabbitMQ消息中间件
|
安全 开发工具 C++
Atom编辑器:曾经的效率提升利器,终将被新技术取代
Atom编辑器:曾经的效率提升利器,终将被新技术取代
488 0

热门文章

最新文章