关于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.学习相对陡峭
关于sass(scss)、less、postcss、stylus等的用法与区别相关推荐
- sass,less,stylus
sass,less,stylus三者的用法 sass less stylus sass css编程语言 变量,控制,函数 创建a.scss 在父文件夹下开启这个 $a:50px;/* 变量 */div ...
- vue-cli 3.0集成sass/scss到vue项目
尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中. vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass 手动安装sass- ...
- CSS预处理器语言:Sass、LESS、Stylus
CSS预处理器语言:Sass.LESS.Stylus Sass 和 Less 都使用的是标准的 CSS 语法.默认 Sass 使用 .sass 扩展名, Less 使用 .less 扩展名,Stylu ...
- Sass、LESS 和 Stylus区别总结
CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架.本文便总结下 Sass.Less CSS.Stylus这三个预处理器的区别和各自的基本语法. 1.什么是 CSS ...
- 【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解
想要查看关于 CSS 的相关面试题,请移步至 面试题 - CSS 篇 查看,其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看. CSS-当前主流的三种预编译器 什么是预编译器: CSS ...
- CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
- css预处理器sass/scss入门
sass/scss入门 一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装 六.sass常见用法 6.1 ...
- 预处器的对比——Sass、LESS和Stylus
本文根据Johnathan Croom的<Sass vs. LESS vs. Stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
- CSS预处理器的对比 — Sass、Less和Stylus
本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
最新文章
- 秦州:西瓜书 + 南瓜书 吃瓜系列 12. 聚类
- 【 CodeForces - 799A 】Carrot Cakes(模拟,细节,有坑)
- 【计算几何】线段相交
- 【网络安全工程师面试合集】— 渗透资源 操作系统大合集
- php加载memcache模块
- 第三章:SQL Server2019数据库 之 开启 SQL 语言之旅
- C++ vector 初始化大小
- 如何比较两种方法的灵敏度和特异度
- EPS概念及EPC相关网元
- win7无法打开计算机共享文件夹,Win7共享文件夹无法访问怎么办
- JDBC百宝箱方法集合(增删改等)
- jetson nano 基础设置
- kafka Transaction coordinator
- 第三章 Python容器:列表、元组、字典与集合
- 猜拳游戏(基于python面向对象2)
- 计算机数据恢复视频教程,手机视频误删怎么恢复 互盾数据恢复教程
- 郑州市各区劳动仲裁委员会办公地址及电话
- iOS设备播放mkv格式视频无声音解决
- 观点丨区块链的价值在于解决产业核心痛点
- IEDA 设置代码模板
热门文章
- 软件设计模式之适配器模式(JAVA)
- 数据库笔记2:SQL运算符
- Linux运维系统工程师系列---04
- Python气流介绍
- 数据科学的发展_数据科学的发展与发展
- 运行keras出现 FutureWarning: Passing (type, 1) or ‘1type‘ as a synonym of type is deprecated解决办法
- leetcode 493. 翻转对(分治算法)
- 怎样准备阿里技术面试_如何准备技术面试
- mit景观生成技术_永远不会再为工作感到不知所措:如何使用MIT技术
- 跟随器反馈回路电阻_如何将短反馈回路设置为单独编码器