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

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 需要带单位。

相关文章:

  • 【蓝桥杯冲冲冲】k 短路 / [SDOI2010] 魔法猪学院
  • 2.9日学习打卡----初学RabbitMQ(四)
  • 双指针-two pointers的应用
  • C++笔记之regex(正则表达式)
  • 线性表的插入
  • 移动端web开发布局
  • Spring Boot项目整合Seata AT模式
  • Electron基本介绍
  • Oracle数据表ID自增操作
  • 【附代码】NumPy加速库NumExpr(大数据)
  • 微信小程序上传代码教程
  • C#,十进制展开数(Decimal Expansion Number)的算法与源代码
  • linux查看当前连接的IP
  • 新版MQL语言程序设计:键盘快捷键交易的设计与实现
  • 【大厂AI课学习笔记】1.5 AI技术领域(1)计算机视觉
  • [译]前端离线指南(上)
  • C++11: atomic 头文件
  • download使用浅析
  • Hibernate【inverse和cascade属性】知识要点
  • Java 23种设计模式 之单例模式 7种实现方式
  • mysql 5.6 原生Online DDL解析
  • oschina
  • PAT A1092
  • tweak 支持第三方库
  • Xmanager 远程桌面 CentOS 7
  • 成为一名优秀的Developer的书单
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 多线程事务回滚
  • 基于web的全景—— Pannellum小试
  • 技术:超级实用的电脑小技巧
  • 前嗅ForeSpider中数据浏览界面介绍
  • 温故知新之javascript面向对象
  • 我感觉这是史上最牛的防sql注入方法类
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 小程序01:wepy框架整合iview webapp UI
  • 源码安装memcached和php memcache扩展
  • 栈实现走出迷宫(C++)
  • hi-nginx-1.3.4编译安装
  • scrapy中间件源码分析及常用中间件大全
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • #NOIP 2014# day.2 T2 寻找道路
  • (12)Linux 常见的三种进程状态
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (Ruby)Ubuntu12.04安装Rails环境
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (七)理解angular中的module和injector,即依赖注入
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • .htaccess 强制https 单独排除某个目录
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .NET CLR Hosting 简介
  • .net core webapi 部署iis_一键部署VS插件:让.NET开发者更幸福
  • .NET建议使用的大小写命名原则