scss、sass、less的对比与区别

什么是Sass和Less?

  sass和less都属于CSS预处理器。

  css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。通俗地说就是“用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用”。

为什么使用CSS预处理器?  

  CSS只是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。

css有具体以下几个缺点:

  语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;

  没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

  这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了开发效率。

  但是,CSS预处理器也不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得麻烦。更大的问题在于,预编译很容易造成后代选择器的滥用。

Sass和Less的区别

不同之处

Less环境较Sass简单

   Sass的安装需要安装Ruby环境,Less基于Javascript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中。

Less使用较Sass简单

   Less并没有裁剪CSS原有的特性,而是在现有CSS语法的基础上,为CSS加入程序式语言的特性。

Sass功能较Less强大

   1、sass有变量和作用域

   2、sass有函数的概念

   3、进程控制

     条件、循环遍历、继承、引用

   4、数据结构

     数组、map

Less和Sass处理机制不一样

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

关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$

相同之处

Less和Sass在语法上有些共性,比如下面这些:

1、混入(Mixins)——class中的class;
2、参数混入——可以传递参数的class,就像函数一样;
3、嵌套规则——Class中嵌套class,从而减少重复的代码;
4、运算——CSS中用上数学;
5、颜色功能——可以编辑颜色;
6、名字空间(namespace)——分组样式,从而可以被调用;
7、作用域——局部修改样式;
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

原文地址:https://www.cnblogs.com/shenting/p/10590359.html

时间: 2024-10-13 14:23:14

scss、sass、less的对比与区别的相关文章

SOAP webserivce 和 RESTful webservice 对比及区别

简单对象访问协议(Simple Object Access Protocol,SOAP)是一种基于 XML 的协议,可以和现存的许多因特网协议和格式结合使用,包括超文本传输协议(HTTP),简单邮件传输协议(SMTP),多用途网际邮件扩充协议(MIME),基于"通用"传输协议是 SOAP的一个优点.它还支持从消息系统到远程过程调用(Remote Procedure Call,RPC)等大量的应用程序.SOAP提供了一系列的标准,如WSRM(WS-Reliable Messaging)形

Scss sass

http://www.ruanyifeng.com/blog/2012/06/sass.htmlscss 声明:1,$blue : #1875e7;2,.class1 { border: 1px solid #ddd;}3,@mixin left ($value: 10px){ float: left; margin-left: $value; } 附值:1,color:$blue1.1,border-#{$side}-radius2, .class2 { @extend .class1; fo

Vue 融入flexible.js scss(sass)文件 添加scss文件 sass

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "He

进程和线程的对比和区别

一.什么是进程,什么是线程? 1.1 进程 进程中包括有多个线程,进程与进程之间是相对比较独立的. 进程中有一个逻辑内存,每个进程都会有分配到一个独立的内存空间,还分配了一个文件/网络句柄, 句柄类似一个标识符,所有的进程所或多或少都有一定的句柄数的引用,句柄实际上是一个指针,指向一块包含具体信息数据的内存,所以句柄是当你要访问该进程时取得的,使用完必须释放.(打个比方,我要使用redis需要打开6379端口,这个时候需要访问句柄,获取到内存地址去访问获取对应的资源来执行该进程) 一个进程可以拥

Git简史及对比SVN区别

Git 简史 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件. Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持. Git 与 SVN 区别 GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等. 如果你是一个具有使用SVN背景的人,你需要做一定的思想转换,来适应

SQL中 count(*)和count(1)的对比,区别

执行效果: 1.  count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和count(*)的效果是一样的. 但是在表做过分析之后,count(1)会比count(*)的用时少些(1w以内数据量),不过差不了多少.  如果count(1)是聚索引,id,那肯定是count(1)快.但是差的很小的. 因为count(*),自动会优化指定到那一个字段.所以没必要去count(1),用c

PHPStrom使用SASS,SCSS和Compass

以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了. 参考这篇文章: http://blog.csdn.net/zhouzme/article/details/45059419 补充内容: 安装 SASS 和 Compass 这一步经过我昨天的测试,已经不需要修改源地址了,可以直接通过 https://rubygems.org/ 地址进行下载了,反而淘宝那个地址总是出现 SSL 相关错误,貌似HTTPS证书有问题,所以直接忽略了吧. 安

「Vue」vue-cli 3.0集成sass/scss到vue项目

vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Please pick a preset: (Use arrow keys)> default (babel, eslint) Manually select features移动上下键选择“Manually select features”:表示手动选择创建项目的特性. 显示如下: ? Check the

sass、less和stylus的安装使用和入门实践

刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用css预处理器来合作,是一种很痛苦,即使不痛苦那也是需要花费非常多的时间来协调合作上的.对于预处 理器的态度,目前是本着学习新技术和推动css向前进的思想来学习新玩意.下面这篇文章来自w3cplus,这是一篇非常强大的文章,私以为互联网上介绍这方面知识的就属这篇文章是鼻祖了. 经过了这篇文章的学习,我