Less还是Sass,Stylus我们到底选择谁

文章目录[隐藏]

less

本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。像著名的Bootstrap框架3.0+前都是使用Less的,下面是一个简单的例子:
Less文件

  1. @color: #4D926F; 
  2.  #header { 
  3.   color: @color; 
  4.  } 
  5.  h2 { 
  6.   color: @color; 
  7.  }

编译后Css文件

  1. #header { 
  2.   color: #4D926F; 
  3.  } 
  4.  h2 { 
  5.   color: #4D926F; 
  6.  }

从上面的例子可以看出,学习 LESS 非常容易,只要你了解 CSS 基础就可以很容易上手。
LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

Sass

sass是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails 的大力推动,逐渐被更多开发者使用。
sass是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。
sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss。

变量
sass中可以定义变量,方便统一修改和维护。

  1. //sass style
  2. //-----------------------------------
  3. $fontStack:    Helvetica, sans-serif;
  4. $primaryColor: #333;
  5. body {
  6.   font-family: $fontStack;
  7.   color: $primaryColor;
  8. }
  9. //css style
  10. //-----------------------------------
  11. body {
  12.   font-family: Helvetica, sans-serif;
  13.   color: #333;
  14. }

嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

  1. //sass style
  2. //-----------------------------------
  3. nav {
  4.   ul {
  5.     margin: 0;
  6.     padding: 0;
  7.     list-style: none;
  8.   }
  9.   li { display: inline-block; }
  10.   a {
  11.     display: block;
  12.     padding: 6px 12px;
  13.     text-decoration: none;
  14.   }
  15. }
  16. //css style
  17. //-----------------------------------
  18. nav ul {
  19.   margin: 0;
  20.   padding: 0;
  21.   list-style: none;
  22. }
  23. nav li {
  24.   display: inline-block;
  25. }
  26. nav a {
  27.   display: block;
  28.   padding: 6px 12px;
  29.   text-decoration: none;
  30. }

导入
sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

  1. //sass style
  2. //-----------------------------------
  3. // _reset.scss
  4. html,
  5. body,
  6. ul,
  7. ol {
  8.    margin: 0;
  9.   padding: 0;
  10. }
  11. //sass style
  12. //-----------------------------------
  13. // base.scss 
  14. @import 'reset';
  15. body {
  16.   font-size: 100% Helvetica, sans-serif;
  17.   background-color: #efefef;
  18. }
  19. //css style
  20. //-----------------------------------
  21. html, body, ul, ol {
  22.   margin: 0;
  23.   padding: 0;
  24. }
  25. body {
  26.   background-color: #efefef;
  27.   font-size: 100% Helvet

mixin
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

  1. //sass style
  2. //-----------------------------------
  3. @mixin box-sizing ($sizing) {
  4.     -webkit-box-sizing:$sizing;     
  5.        -moz-box-sizing:$sizing;
  6.             box-sizing:$sizing;
  7. }
  8. .box-border{
  9.     border:1px solid #ccc;
  10.     @include box-sizing(border-box);
  11. }
  12. //css style
  13. //-----------------------------------
  14. .box-border {
  15.   border: 1px solid #ccc;
  16.   -webkit-box-sizing: border-box;
  17.   -moz-box-sizing: border-box;
  18.   box-sizing: border-box;
  19. }

扩展/继承
sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

  1. //sass style
  2. //-----------------------------------
  3. .message {
  4.   border: 1px solid #ccc;
  5.   padding: 10px;
  6.   color: #333;
  7. }
  8. .success {
  9.   @extend .message;
  10.   border-color: green;
  11. }
  12. .error {
  13.   @extend .message;
  14.   border-color: red;
  15. }
  16. .warning {
  17.   @extend .message;
  18.   border-color: yellow;
  19. }
  20. //css style
  21. //-----------------------------------
  22. .message, .success, .error, .warning {
  23.   border: 1px solid #cccccc;
  24.   padding: 10px;
  25.   color: #333;
  26. }
  27. .success {
  28.   border-color: green;
  29. }
  30. .error {
  31.   border-color: red;
  32. }
  33. .warning {
  34.   border-color: yellow;
  35. }

运算
sass可进行简单的加减乘除运算等

  1. //sass style
  2. //-----------------------------------
  3. .container { width: 100%; }
  4. article[role="main"] {
  5.   float: left;
  6.   width: 600px / 960px * 100%;
  7. }
  8. aside[role="complimentary"] {
  9.   float: right;
  10.   width: 300px / 960px * 100%;
  11. }
  12. //css style
  13. //-----------------------------------
  14. .container {
  15.   width: 100%;
  16. }
  17. article[role="main"] {
  18.   float: left;
  19.   width: 62.5%;
  20. }
  21. aside[role="complimentary"] {
  22.   float: right;
  23.   width: 31.25%;
  24. }

颜色
sass中集成了大量的颜色函数,让变换颜色更加简单。

  1. //sass style
  2. //-----------------------------------
  3. $linkColor: #08c;
  4. a {
  5.     text-decoration:none;
  6.     color:$linkColor;
  7.     &:hover{
  8.       color:darken($linkColor,10%);
  9.     }
  10. }
  11. //css style
  12. //-----------------------------------
  13. a {
  14.   text-decoration: none;
  15.   color: #0088cc;
  16. }
  17. a:hover {
  18.   color: #006699;
  19. }

Stylus

CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS, SASS都在这方面做了一些贡献。

Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS/LESS 等类似,应该是有很多借鉴,所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法。

Stylus功能上更为强壮,和js联系更加紧密。

小结

1、LESS环境较Sass简单
2、有同学说LESS使用较Sass简单
3、相对而言,国内前端团队使用LESS的同学会略多于Sass
4、从功能出发,Sass较LESS略强大一些
5、Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation
6、就国外讨论的热度来说,Sass绝对优于LESS
7、就学习教程来说,Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网,而Sass的中文教程,慢慢在国内也较为普遍。
8、个人还是倾向于Stylus,如果你以前使用了Less或Sass会很快的迁移到Stylus上来,教程比较少,推荐一个:http://www.zhangxinxu.com/jq/stylus/
9、Bootstrap4.0已结弃用了less改用Sass了。
最后,你自己使用哪一种,不应该根据国内对哪一种使用的人多来做出发参考,而是哪种更适合自己的团队。


发布日期:

所属分类: Css/Html5 标签: