关于sass（scss）、less、postcss、stylus等的用法与区别

一. Sass/Scss、Less、stylus是什么?

它们都是css预处理器。css预处理器的概念：CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。 比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。都属于css预处理器。

其中比较优秀的： Sass、LESS，Stylus

Sass(Syntactically Awesome Stylesheets)：

注：Sass官网地址

Sass是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

Less：

注： Less官方地址

Less也是一种动态样式语言. 受Sass影响较大,对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

Stylus：

注： Stylus官方地址

2010年产生于node社区， 主要用来给Node项目进行CSS预处理支持，人气不如前两者

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

需要安装node

Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法

Stylus优点：

  • 更加健壮

  • 写法更接近于js

  • 功能强大

Stylus缺点：

  • 写法需要一定时间适应

  • 学习曲线比较陡峭

二. Sass/Scss与Less、stylus区别

2.1 编译环境不一样

Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。Stylus需要安装node，然后安装最新的stylus包即可使用

2.2 变量符不一样

Less是@，而Scss是$， Stylus样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。

而且变量的作用域也是不一样的

 

 

 

Less-作用域
@color: #00c; /* 蓝色 */
#header {    @color: #c00; /* red */border: 1px solid @color; /* 红色边框 */
}
#footer {border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;
}
#footer{border:1px solid #0000cc;
}
scss-作用域
$color: #00c; /* 蓝色 */
#header {$color: #c00; /* red */border: 1px solid $color; /* 红色边框 */
}
#footer {border: 1px solid $color; /* 蓝色边框 */
}
Sass-作用域编译后
#header{border:1px solid #c00
}
#footer{border:1px solid #c00
}
/ *stylus声明变量*/
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/*stylus调用变量*/ | 
/*转译出来的CSS*/
body {color mainColor | color: #963;border 1px $borderStyle mainColor | border:1px dotted #963max-width siteWidth | max-width:1024px;| 
}复制代码

 

 

我们可以看出来，less和scss、stylus中的变量会随着作用域的变化而不一样。Sass的作用域最差，less和stylus一样，都是向上查找，直到找到根部位置

 

2.3 输出设置

Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded，stylus不知。

输出样式的风格可以有四种选择，默认为nested

  • nested：嵌套缩进的css代码

  • expanded：展开的多行css代码

  • compact：简洁格式的css代码

  • compressed：压缩后的css代码

2.4. 处理条件语句

Sass支持条件语句，可以使用if{}else{},for{}循环等等。 LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”。stylus的条件语句的使用和其他编程的条件语句使用基本类似，不同的是他可以在样式去省略大括号（｛｝）：

 

 

 

/* Sample Sass “if” statement */
@if lightness($color) > 30% {} 
@else {}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}
stylus中：
box(x, y, margin = false)padding y xif marginmargin y xbodybox(5px, 10px, true)
Stylus同样可以和else if、else配套使用：
box(x, y, margin-only = false)if margin-onlymargin y xelsepadding y x复制代码

 

sass中使用条件：

 

 

 

.mixin (@a) when (@a >= 10) {background-color: black;
}
.mixin (@a) when (@a < 10) {background-color: white;
}
.class1 { .mixin(12) 
}
.class2 { .mixin(6) 
}
复制代码

 

 

转译后：

 

 

 

.class1 {background-color: black;
}
.class2 {background-color: white;
}复制代码

 

2.5  引用外部CSS文件

scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.

 

 

 

 

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {font-size: 17px;
}
h2 {font-size: 17px;
}
h3 {font-size: 17px;
}复制代码

 

Less引用外部文件和css中的@import没什么差异。

Stylus同样可以用@import，也支持其他文件通过@import进行引入

2.6 Sass和Less的工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

Archer一个的英文面向移动端的的，基于stylus的样式工具库。

Archer于起源est项目，于专注纯移动端的浏览器的样式展示。如有本地桌面端的需求，请使用est。

三. 总结

不管是Sass，还是Less或者stylus，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass、stylus的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。

 

四、PostCSS

官网地址

  • PostCSS介绍：

A tool for transforming CSS with JavaScript

PostCSS 是目前流行的一个对 CSS 进行处理的工具（平台）。PostCSS 依托其强大的插件体系为 CSS 处理增加了无穷的可能性。

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS 从其诞生之时就带来了社区对其类别划分的争议。这主要是由于其名称中的 post，很容易让人联想到 PostCSS 是用来做 CSS 后处理（post-processor）的，从而与已有的 CSS 预处理（pre-processor）语言，如 SASS 和 LESS 等进行类比。实际上，PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。

  • PostCSS使用

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。现在经常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官网的插件库进行查询。下面是官方插件库地址：

PostCSS插件库地址

  • PostCSS的优点

 

1.扩展性强 2.兼容性强 3.功能全面 4.有很多插件库供选择

 

  • PostCSS的缺点

1.配置繁琐 2.学习相对陡峭

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/402427.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机点滴

计算机点滴

CD&#xff0c;VCD&#xff0c;DVD的区别CD:纯音乐 VCD&#xff1a;影视初级光盘 DVD&#xff1a;高清晰影视光盘 EVD&#xff1a;高清晰数码影视 MPEG4&#xff1a;压缩高密影视光盘 MP3&#xff1a;压缩纯音乐1.容量大小不同&#xff1a;DVD可以装更多的内容。CD与DVD差别在于…
阅读更多...
Linux C 算法与数据结构 --二叉树

Linux C 算法与数据结构 --二叉树

头文件BiTree.h [cpp] view plaincopy typedef int Item; typedef struct node { struct node * lchild; struct node * rchild; Item data; }BiTNode,*BiTree; /*构造一棵新的二叉树*/ BiTree InitBiTree(BiTNode *root); /*生成节点*/ …
阅读更多...
Spring 实现数据库读写分离

Spring 实现数据库读写分离

Spring 实现数据库读写分离 现在大型的电子商务系统&#xff0c;在数据库层面大都采用读写分离技术&#xff0c;就是一个Master数据库&#xff0c;多个Slave数据库。Master库负责数据更新和实时数据查询&#xff0c;Slave库当然负责非实时数据查询。因为在实际的应用中&#xf…
阅读更多...
vue 3.x 中使用ele-image时相对路径的图片加载失败

vue 3.x 中使用ele-image时相对路径的图片加载失败

参考文档&#xff1a; https://element.eleme.cn/#/zh-CN/component/installation 环境: Mac OS X 10.12 [zcmele 2]$node -v v12.6.0 [zcmele 3]$npm -v 6.9.0 [zcmele 4]$cnpm -v cnpm6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js) npm6.10.2 (/usr/local/li…
阅读更多...
JavaScript函数绑定

JavaScript函数绑定

一个简单的函数绑定 在JavaScript与DOM交互中经常需要使用函数绑定&#xff0c;定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上&#xff0c;绑定函数经常和回调函数及事件处理程序一起使用&#xff0c;以便把函数作为变量传递的同时保留代码执行环境。 <…
阅读更多...
ie6兼容问题汇总

ie6兼容问题汇总

这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间&#xff0c;参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下&#xff0c;也方便我日后再用到&#xff1a; 1.IE的cache设置为Every visit to the page&#xff0c;而不是默认的Automatically。基本…
阅读更多...
Linux C 数据结构---线性表

Linux C 数据结构---线性表

数据结构指的是数据元素及数据元素之间的相互关系&#xff0c;包含下面三方面的内容&#xff1a; 其中&#xff0c;线性表是最基本、最简单、也是最常用的一种数据结构。线性表中数据元素之间的关系是一对一的关系&#xff0c;即除了第一个和最后一个数据元素之外&#xff0c;其…
阅读更多...
Postman发送请求时带上登录信息

Postman发送请求时带上登录信息

正常情况下&#xff0c;没有登录验证等公共接口&#xff0c;用postman进行get或post请求都很方便&#xff0c;加上相应的参数就行。 但是对于某些接口&#xff0c;可能需要先登录后才能请求&#xff0c;这时如果按正常的思路请求&#xff0c;可能就会被拦截了。 对于这种情况…
阅读更多...
Chrome跨域问题

Chrome跨域问题

2019独角兽企业重金招聘Python工程师标准>>> 在chrome图标&#xff0c;右键--->属性 --->目标 路径末尾添加 “--disable-web-security” 重启即可 转载于:https://my.oschina.net/u/861562/blog/152171
阅读更多...
解决安装mysql的”A Windows service with the name MySQL already exists.“问题

解决安装mysql的”A Windows service with the name MySQL already exists.“问题

如果以前安装过mysql&#xff0c;卸载重装&#xff0c;很可能会碰到”A Windows service with the name MySQL already exists.“这样的提示。即服务已经存在。我们可以在window任务管理器----服务中查看&#xff0c;发现确实存在&#xff0c;没有卸载干净。 解决这个问题&…
阅读更多...
[vue] 父子组件间传值

[vue] 父子组件间传值

环境说明: vue 3.x ant-vue 父组件(Album.vue)使用: <template><div><a-button type"primary" icon"plus" click"uploadImage">图片</a-button><upload-image :visible.sync"visible"></upload-i…
阅读更多...
Linux C 数据结构---单向链表

Linux C 数据结构---单向链表

线性表存储结构分为顺序存储、链式存储。 顺序存储的优点&#xff1a; 顺序存储的缺点&#xff1a; 链表就是典型的链式存储&#xff0c;将线性表L &#xff08;a0,a1,a2,........an-1&#xff09;中个元素分布在存储器的不同存储块&#xff0c;成为结点&#xff08;Node&…
阅读更多...
杂感

杂感

成功的IT大佬&#xff0c;我读着沸腾十五年&#xff0c;激荡三十年&#xff0c;知识英雄&#xff0c;满腔热血&#xff0c;梦想真的是个好东西&#xff0c;让你在这个国度不至于行尸走肉。走上编程这条路&#xff0c;有人因走投无路而走此路&#xff0c;有人怀抱着梦想&#xf…
阅读更多...
分页插件--根据Bootstrap Paginator改写的js插件

分页插件--根据Bootstrap Paginator改写的js插件

刚刚出来实习&#xff0c;之前实习的公司有一个分页插件&#xff0c;和后端的数据字典约定好了的&#xff0c;基本上是看不到内部是怎么实现的&#xff0c;新公司是做WPF的&#xff0c;好像对于ASP.NET的东西不多&#xff0c;导师扔了一个小系统给我和另一个同事&#xff0c;指…
阅读更多...
sprintboot 配置文件上传大小(默认是1MB)

sprintboot 配置文件上传大小(默认是1MB)

application.yaml: spring:profiles:active: activatedjackson:date-format: yyyy/MM/dd HH:mm:sstime-zone: GMT8servlet:multipart:max-file-size: 6MBmax-request-size: 6MB
阅读更多...
Android ANR

Android ANR

ANRs (“Application Not Responding”)&#xff0c;意思是”应用没有响应“。 1&#xff09;什么引发了ANR&#xff1f;在Android里&#xff0c;应用程序的响应性是由Activity Manager和WindowManager系统服务监视的。当它监测到以下情况中的一个时&#xff0c;Android就会针对…
阅读更多...
Linux C 算法分析初步

Linux C 算法分析初步

提到算法&#xff0c;必须提到数据结构&#xff0c;我们要知道一个著名公式&#xff1a; 数据结构 算法 程序 我们先看看下面这张图&#xff1a; 算法是什么&#xff1f;算法是一个有穷规则&#xff08;或语句、指令&#xff09;的有续集和。他确定了解决某一问题的一个运算序…
阅读更多...
hive实例，GPRS流量统计

hive实例，GPRS流量统计

2019独角兽企业重金招聘Python工程师标准>>> 最近面试&#xff0c;发现很多公司在使用hive对数据进行处理。 hive是hadoop家族成员&#xff0c;是一种解析like sql语句的框架。它封装了常用MapReduce任务&#xff0c;让你像执行sql一样操作存储在HDFS的表。 hive的表…
阅读更多...
90.不用其它变量进行变量互换

90.不用其它变量进行变量互换

package com.chongrui.test;//不用其它变量进行变量互换import java.util.Scanner; //导入扫描器public class test { public static void main(String[] args){ Scanner scan new Scanner(System.in);//创建扫描器 System.out.println("请输入变量A的值");//输入变…
阅读更多...
android中 MediaStore提取缩略图和原始图像

android中 MediaStore提取缩略图和原始图像

android中 MediaStore提取缩略图和原始图像 . 欢迎转载&#xff1a;http://blog.csdn.net/djy1992/article/details/10005767提取图像的Thumbnail 1) 启动Intent Intent intent new Intent(Intent.ACTION_GET_CONTENT, null); intent.setType("image/*"); intent.pu…
阅读更多...
最新文章

Copyright @ 2022~2023