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博客

相关推荐
落霞的思绪1 小时前
CSS复习
前端·css
咖啡の猫3 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲5 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5816 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路6 小时前
GeoTools 读取影像元数据
前端
ssshooter6 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry7 小时前
Jetpack Compose 中的状态
前端
dae bal8 小时前
关于RSA和AES加密
前端·vue.js
柳杉8 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog8 小时前
低端设备加载webp ANR
前端·算法