Sass和Less的区别?
这篇文章主要解答以下几个问题,供前端开发者的新手参考。
1、什么是sass和less?
2、为什么要使用css预处理器?
3、sass和less的比较
4、为什么选择使用sass而不是less?
什么是sass和less?
sass和less都属于css预处理器,那什么是 css 预处理器呢?
css 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 css 增加了一些编程的特性,将 css 作为目标生成文件,然后开发者就只要使用这种语言进行css的编码工作。
转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 web 页面样式设计,再通过编译器转化为正常的 css 文件,以供项目使用”。
为什么要使用css预处理器?
作为前端开发人员,大家都知道,js中可以自定义变量,而css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。
css有具体以下几个缺点:
- 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
这就导致了我们在工作中无端增加了许多工作量。而使用css预处理器,提供 css 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。
但是,css预处理器也不是万金油,css的好处在于简便、随时随地被使用和调试。预编译css步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。
所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,css预处理器有没有解决更大的麻烦。
sass和less的比较
不同之处
2、less使用较sass简单
3、从功能出发,sass较less略强大一些
①sass有变量和作用域。
- $variable,like php;
- #{$variable}like ruby;
- 变量有全局和局部之分,并且有优先级。
②sass有函数的概念;
- @function和@return以及函数参数(还有不定参)可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑,更多的是提高css代码段的复用性和模块化,这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③进程控制:
-条件:@if @else;
-循环遍历:@for @each @while
-继承:@extend
-引用:@import
④数据结构:
-$list类型=数组;
-$map类型=object;
其余的也有string、number、function等类型
less和sass在语法上有些共性,比如下面这些:
1、混入(mixins)——class中的class;
2、参数混入——可以传递参数的class,就像函数一样;
3、嵌套规则——class中嵌套class,从而减少重复的代码;
4、运算——css中用上数学;
5、颜色功能——可以编辑颜色;
6、名字空间(namespace)——分组样式,从而可以被调用;
7、作用域——局部修改样式;
8、javascript 赋值——在css中使用javascript表达式赋值。
3、就学习教程来说,sass的教程要优于less。在国内less集中的教程是less中文官网,而sass的中文教程,慢慢在国内也较为普遍。
上一篇: vue history 模式打包部署在域名的二级目录的配置指南
下一篇: MySQL多实例应用
推荐阅读
-
重定向是什么意思,重定向和转发的区别
-
Android startActivityForResult和setResult的区别
-
2020年抖音发财中国年的金卡和钻卡有什么区别 分别是什么意思
-
js中innerText/textContent和innerHTML与target和currentTarget的区别
-
sqlserver中delete、update中使用表别名和oracle的区别
-
重定向是什么意思,简述重定向和转发的区别
-
详解Python中 __get__和__getattr__和__getattribute__的区别
-
浅析C#中静态方法和非静态方法的区别
-
web服务器和应用服务器的区别是什么,简述两者的架构与工作原理
-
SQL Server 聚集索引和非聚集索引的区别分析