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

scss和less的区别

Sass(Scss)、Less 都是 CSS 预处理器,他们定义了一种新的语言,其基本思想是,用一种专门的编程语言为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。

为什么要使用 CSS 预处理器

原因

  • CSS 仅仅是一个标记语言,不可以自定义变量,不可以引用。
  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器。
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

CSS 预处理器的好处

  • 提供 CSS 层缺失的样式层复用机制
  • 减少冗余代码
  • 提高样式代码的可维护性

CSS 预处理器的缺点

  • 开发工作流中多了一个环节,调试也变得更麻烦。
  • 预编译很容易造成后代选择器的滥用

相同之处

  • 都属于 CSS 预处理器
  • 目的是使得 CSS 开发更灵活和更强大
  • 扩展的 CSS 功能特性基本相同

区别之处

  • Sass 是在服务端处理的,以前是 Ruby,现在是 Dart-SassNode-Sass,而 Less 是在客户端处理的,需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器,也可以在开发服务器将 Less 语法编译成 CSS 文件,输出 CSS 文件到生产包目录,有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具,也有在线编译地址。
  • 变量符不一样,Less 是 @,而 Sass 是 $
  • Sass 的功能比 Less 强大,基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器,为 CSS 加入动态语言的特性。
  • Less 相对 Sass 清晰明了,安装便捷,易于上手,对编译环境要求比较宽松,适合小型项目。Sass 更适用于复杂或大型项目。
  • Sass 支持条件语句,可以使用 if...else.../for...while...each循环等,Less 不支持。
  • Less 中的变量运算可以带或不带单位,Sass 需要带单位。


http://www.kler.cn/news/232676.html

相关文章:

  • 精通Python爬虫:掌握日志配置
  • pycharm deployment 灰色 一直无法点击
  • linux系统定时任务管理
  • 多线程JUC:线程池原理、自定义线程池详细解析
  • 设计模式巡礼:多板适配案例解析与深度重构
  • 熔断机制解析:如何用Hystrix保障微服务的稳定性
  • abap - 发送邮件,邮件正文带表格和excel附件
  • 年底我被裁了,大环境不好?
  • 【芯片设计- RTL 数字逻辑设计入门 14 -- 使用子模块实现三输入数的大小比较】
  • router路由跳转的两种模板2.0版本
  • 2.2-学成在线内容管理之课程分类查询+新增课程
  • Linux 36.2@Jetson Orin Nano之Hello AI World!
  • 蓝桥杯刷题day06——平均
  • Peter算法小课堂—枚举优化
  • 前端工程化之:webpack3-5(css module)
  • Redis(十二)Bigkey
  • Qt信号和槽机制(什么是信号和槽,connect函数的形式,按钮的常用信号,QWidget的常用槽,自定义槽函数案例 点击按钮,输出文本)
  • 基于 Python opencv 的人脸识别的酒店客房入侵系统的检测
  • 电脑服务器离线安装.net framework 3.5解决方案(错误:0x8024402c )(如何确定当前系统是否安装NET Framework 3.5)
  • STM32学习笔记——定时器
  • 力扣36.有效的数独
  • AD9361多片同步设计方法
  • Android Studio 安装Flutter插件但是没法创建项目
  • 七、Nacos源码系列:Nacos服务发现
  • 阿里云服务器租用价格表_2024一年_1个月_1小时收费价格表
  • 怎么在bash shell中操作复杂json对象
  • 【玩转408数据结构】线性表——定义和基本操作
  • 华为视频监控接入到视频监控平台 (华为网路监控摄像机IPC和华为视频节点设备VCN)
  • Golang开发:跨域配置
  • 1987-2022年各省进出口总额数据整理(含进口和出口)(无缺失)