admin管理员组

文章数量:819742

css+less+scss,你只懂CSS?做前端你还要会 Less、Sass或Stylus

网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要。

为什么需要CSS的预处理?

CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等,要维护我们的CSS,工作会越来越困难,这就需要选择一个预处理工具来编译我们的CSS。

less

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

一个简单的Less例子:

Less文件

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

编译后CSS文件

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

从上面的例子可以看出,学习 LESS 非常容易,只要你了解 CSS 基础就可以很容易上手。

LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

Sass

sass是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早的css预处理语言,比less功能更为强大。最初它是为了配合haml(是一种用来描述任何XHTML web document的标记语言)而设计的,因此有着和haml一样的缩进式风格。

sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss。

变量

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

//sass style

$fontStack: Helvetica, sans-serif;

$primaryColor: #333;

body {

font-family: $fontStack;

color: $primaryColor;

}

//css style

body {

font-family: Helvetica, sans-serif;

color: #333;

}

嵌套

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

//sass style

//-----------------------------------

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

}

li { display: inline-block; }

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

}

//css style

//-----------------------------------

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

扩展/继承

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

//sass style

//-----------------------------------

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

.error {

@extend .message;

border-color: red;

}

.warning {

@extend .message;

border-color: yellow;

}

//css style

//-----------------------------------

.message, .success, .error, .warning {

border: 1px solid #cccccc;

padding: 10px;

color: #333;

}

.success {

border-color: green;

}

.error {

border-color: red;

}

.warning {

border-color: yellow;

}

Stylus

在学习一个Vue.js项目的过程中,注意到源码中样式的部分并没有用熟悉的.css样式文件,而是发现了代码长得和css相像的.styl文件。搜索了下发现文件后缀是.styl的这个哥们儿学名叫stylus,是css的预处理框架。

Stylus 是一款 CSS 的预处理器,也就是我们常说的 CSS 框架。

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

Stylus语法示例:

body

font: 12px Helvetica, Arial, sans-serif;

a.button

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

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

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

小结

1、LESS环境和使用比Sass简单

2、国内前端团队使用LESS的同学会略多于Sass

3、Sass比LESS功能略强大一些

4、Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation

5、就国外讨论的热度来说,Sass绝对优于LESS

6、Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网,而Sass的中文教程,慢慢在国内也较为普遍。

7、个人还是倾向于Stylus,如果你以前使用了Less或Sass会很快的迁移到Stylus上来,教程比较少,推荐一个:/

8、Bootstrap4.0已结弃用了less改用Sass了。

最后,你自己使用哪一种,不应该根据国内对哪一种使用的人多来做出发参考,而是哪种更适合自己的团队。

125jz网原创文章。发布者:江山如画,转载请注明出处:.html

本文标签: csslessscss你只懂CSS做前端你还要会 LessSass或Stylus