Less和Sass的原理和用法

一、原理

1.1 Less定义:是一种动态的样式语言,使CSS变成一种动态的语言特性,如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)

1.2 SaSS定义:是一种动态样式语言,SaSS里面的语法属于缩排语法,对于之前的css相比,多出了很多功能,更容易阅读

1.3 预处理器。Less和SaSS都属于预处理器,它会定义一种新的语言,其总体思想是为CSS增加一些编程的特性,将 CSS 作为目标生成文件,之后开发者就只要使用这种语言进行CSS的编码工作。

二、两者区别

2.1 Less和Sass处理机制不一样

  • 前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点。

2.2 变量符:

  • Less是@
  • Sass是$

2.3 输出设置

Less没有输出设置,而Sass有4种输出选项,如下

nested:嵌套缩进的css代码

expanded:展开的多行css代码

compact:简洁格式的css代码

compressed:压缩后的css代码

2.4 Sass支持条件语句,可以使用if{}else{},for{}循环等等,而Less不支持

2.5 Sass功能较Less强大

  • sass有变量和作用域
  • sass有函数的概念
  • 进程控制
  • 数据结构

三、总体优点

3.1 提供CSS缺失的样式层复用机制

3.2 减少冗余代码

3.3 提高样式代码的可维护性

3.4 结构清晰,便于扩展可以方便的屏蔽浏览器私有的语法差异

3.5 轻松实现多重继承,完全兼容了CSS代码,提高了开发效率。

四、为什么选择使用Sass而不是Less

  • Sass有更成熟的框架,比如说Compass,而且有很多框架也使用Sass,比如说Foundation;
  • bootstrap(Web框架)最新推出的版本4,使用的就是Sass,可以看出sass有更多市场价值。
  • 就国外讨论的热度来说,Sass绝对优于less;
  • 在国内less集中的教程是less中文官网,而Sass的中文教程,在国内较为普遍;
  • sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护;
  • scss对sass语法进行了改良,sass 3变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进;

原文链接:面试题之Less和SaSS的原理和用法_less和sass的区别面试题_雨落听风清的博客-CSDN博客

相关推荐
计算机魔术师12 分钟前
AI渗透框架3小时破云,中国黑客组织正在升级打法
前端
蒲公英内测分发15 分钟前
智能手环出海测试,海外合作方分散在不同国家,Android 测试包怎么持续分发和更新?
android·前端·人工智能·测试工具·智能手表
朱涛的自习室22 分钟前
高价软件已死,我让 AI 开启了「平替计划」(Day 7 / 7)
android·前端·github
沙蒿同学37 分钟前
Wails v3 实战:一个桌面提醒客户端,从 v2 升到 v3 的全过程
前端·后端·github
inquisiter1 小时前
KernelGpt的部分尝试
java·前端·apache
the局外人1 小时前
用 TRAE 把 Markdown文档 搬到微信公众号
前端
Autumn_ing1 小时前
AI原型设计工具怎么选?可编辑原型与可运行前端适合什么场景
前端·小程序·产品经理·代码·codex·墨刀ai客户端·ai原型
夕阳_醉了2 小时前
前端通用组件开发全指南|从 0 到 1 打造稳定可复用的业务组件
前端
Amos_Web2 小时前
Rspack 源码解析(三十):SourceMapDevToolPlugin 如何生成并关联 source map
前端
console.log('npc')2 小时前
从0到1实现任务评价统计功能:React + TypeScript 实战指南(小白注释版)
前端·react.js·typescript