你只懂CSS?做前端你还要会 Less、Sass或Stylus

你只懂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 文档中应用。

LESS的官网:http://lesscss.org

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;
}

Sass官网地址:http://sass-lang.com

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联系更加紧密。

Stylus官网:http://learnboost.github.com/stylus著作权归作者所有。

小结

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上来,教程比较少,推荐一个:http://www.zhangxinxu.com/jq/stylus/
8、Bootstrap4.0已结弃用了less改用Sass了。
最后,你自己使用哪一种,不应该根据国内对哪一种使用的人多来做出发参考,而是哪种更适合自己的团队。

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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年7月27日 上午10:48
下一篇 2018年7月28日 上午10:46

99%的人还看了以下文章

  • 消除img图片与div下边界之间空白的三种方法

    在div中插入图片,图片会和div下方有几像素高的空白,本文介绍了三种消除img图片与容器下边界之间空白的方法。

    2018年2月7日
    3.7K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    2.0K0
  • 网页中的块级元素和行内元素

    块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。 行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、&…

    2018年7月10日
    2.2K0
  • 阿里云每天营收3888万元,从云服务收入看云计算发展潜力

    据IDC在2017年发布的中国公有云市场份额调研结果显示,前三名分别为阿里云、腾讯云、金山云,市场占有率分别为47.6%、9.6%、6.5%。可以看出,阿里云在国内云计算市场中遥遥领先。

    2018年2月2日
    2.3K0
  • wordpress成功更新5.3,解决无法在线更新,手动更新后编辑器无法使用等问题

    今天125网页设计升级了网站主题,发现后台无法使用了,问了售后说是要wordpress5.0以上版本才支持。 于是开始升级wordpress黑暗的一天到来了…… WordPress 5.3 正式版于北京时间2019年11月13日 发布 在线升级wordpress,先后遇到各种问题,耗时一天才解决,也给升级wordpress 5.3的朋友们分享,避免掉进各种坑…

    2019年11月28日
    6.4K0
  • 综合实训-制作动态JSP企业网站

    [上机目的与要求] 综合运用所学相关知识,设计和开发企业网站。 [上机重点与难点] 项目开发的步骤、MVC设计模式的使用,前后端开发对接。 [上  机  方  法]     由指导老师演示和指导,学生亲自上机操作。 [上  机  内  容]    制作动态JSP企业网站 网站目录管理示例一: 网站目录管理示例二: 撰写文章示例一: 撰写文章示例二:

    2019年11月16日 未分类
    1.7K0

发表回复

登录后才能评论