CSS预处理器Sass(Scss)、Less、Stylus

时间:2022-08-29 23:01:34

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量、条件、函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行。个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率。

三种预处理器的对比:
Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;安装、编译依赖Ruby环境;
Stylus早期服务器Node JS项目,在该社区得到一定支持者,安装、编译依赖NodeJs环境;
LESS出现于2009年,支持者远超于Ruby和Node JS社区,安装、编译依赖NodeJs环境,代表bootstrap;
Sass和LESS语法较为严谨、严密,而Stylus语法相对散漫(借鉴python),其中LESS学习起来更快一些,因为他更像CSS的标准;
Sass和LESS相互影响较大,其中Sass受LESS影响,已经进化到了全面兼容CSS的SCSS;
Sass和LESS都有第三方工具提供转译,特别是Sass和Compass是绝配;
Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;
Sass和Stylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;
最后摘录一下为什么要用CSS预处理器

1# CSS无法递归式定义

CSS语法不支持递归定义的表达式,所以你没有办法用一个语句定义一个启发式的规则。

比如这样的需求:“.w后面跟着一个数字,这个数字代表着width为百分之多少”(bootstrap的栅格系统就包含12种相对父级宽度的类定义)。
尽管完全是一个规则里定义出的,但你只能这样写CSS:

.w1 { width: 1% }
.w2 { width: 2% }
/**
.w3
...
...
.w99
**/.w100 { width: 100% }

这样将造成很大的冗余,修改费时费力。但如果预编译CSS,就非常简单了:

@maxnumber : 100 ;
.makeWidthRules(@number) when(@number <= @maxnumber ){
.w@{number}{
width: 1% * @number ;
}
.makeWidthRules(@number + 1) ;
}
.makeWidthRules(1) ;

2# CSS的mixin式复用性支持不够

使用纯CSS,我们可以抽象出一些常用的布局CSS属性组合,通过CSS的类组合来达成常见的mixin式复用。
比如这样:

<style>.tc { text-align: center; }.m { margin-left: auto; margin-right: auto; }.w50p { width: 50%; }.db { display: block; }</style><div class="tc m w50p"><img class="db"></div>

这种方案有几个问题:

  • 页面重构时,需要频繁修改class name;
    这个问题在后端人员掌握着视图层的时候格外突出,前后端耗费很多沟通成本。
  • 要约束上下文的时候非常无力
    比如“只有在ul下面的img.db允许是display:block”的规则,写成ul img.db { display: block; }就完全跑偏了——它违背了你创建这个.db类时的本意,造成了代码的可读性和可维护性下降。如果你要改动规则,需要同时修改HTML和CSS,也可能造成新的样式问题。

如果我们想要建立一种代码风格,只允许CSS Class代表UI模块的抽象——改动样式时不至于通知后端改模板——我们就要将上面这个例子的tc m w50p换用一个有实际语义的类名如headwrap,然后在CSS内部实现mixin。
——而这正是CSS的短板,CSS体系内的用法只有复制粘贴。

至于如何用预编译语言做mixin,一个非常好的SASS示例由 @nightire 在这个回答里给出,容我摘录一小段:

.btn-standout {
@extend .btn;
@extend .btn-block; @media (max-width: $screen-xs-max) {
@include button-size(
$padding-large-vertical,
$padding-large-horizontal,
$font-size-large,
$line-height-large,
$border-radius-large
);
} &.sell {
@extend .btn-primary;
}
}

3# 预编译可缓解多浏览器兼容造成的冗余

进入CSS3的时代,旧式CSS hack如filter,新式兼容前缀如-webkit-等,都是冗余,修改的时候也需要修改多处,不容易维护。

比如对rgba背景的兼容:

.bg {
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ccff825b,endcolorstr=#ccff825b);
}:root .bg {
-ms-filter: none;
background: rgba(255,130,91,0.8)
}

在LESS里面,写个函数就能解决,多次复用也不需要看到如此之多的hack:

.rgbaBG(@c , @a){
@rgba : rgba(red(@c),green(@c),blue(@c),@a);
@shim : argb(@rgba) ;
filter: ~"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{shim},endcolorstr=@{shim})" ;
:root & {
-ms-filter: none ;
background: @rgba ;
}
}
.bg {
.rgbaBG(#ff825b, 0.8) ;
}

此外,使用LESS时,可以很方便地使用base64 data uri的方案。不需要直接面临在CSS中一大坨字符:

.bg { background: data-uri('../data/image.jpg'); }

SASS的类似方案见评论。

N# 预编译不是万金油

预编译不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。

举个例子:原先我们只需要在chrome/firebug里面找到相应的选择器,如.popup .popup-wrap .head,源文件里面ctrl+F查找.popup .popup-wrap .head就可以快速定位语句。现在我们无法直接在预编译文件中查找,而需要寻找上下文,因为它在LESS中通常是这样被定义的:

.popup {
.popup-wrap {
.head { }
}
}

更大的问题在于,预编译很容易造成后代选择器的滥用。
曾经有一个观点是预编译可以解决样式覆写的问题,而我觉得,正是预编译语言模糊了样式覆写的问题,而导致要解决样式相互覆写的问题时,问题已经变得规模庞大而难以解决。

举个极端的例子:

.popup {
font-size: 12px;
a { font-size: 13px; }
.head { font-size: 18px; }
}
.informative {
font-size: 14px;
.head { font-size: 16px; }
}

如果我有这么一个文档结构.popup.informative > .head > a,需要afont-size17px,你能快速想明白怎么改吗?叠罗汉式地再叠一层?还是再糊一层墙皮,加一行样式?还是干脆用!important轰炸一番?

因此,实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预编译有没有解决更大的麻烦。

CSS预处理器Sass(Scss)、Less、Stylus的更多相关文章

  1. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

  2. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  3. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  4. CSS预处理器—Sass、LESS和Stylus

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...

  5. css预处理器 sass和stylus对比以及常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...

  6. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. css预处理器sass使用教程&lpar;多图预警&rpar;

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  8. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  9. CSS预处理器&lpar;SASS和LESS&rpar;

    Sass框架应用Sass简介 Sass又名SCSS,是CSS预处理器之一,它能让你更好更轻松的工作.Sass官网是这样描述Sass的:**Sass是一门高于CSS的元语言,能用来清晰的.结构化地描述文 ...

随机推荐

  1. Redis修改数据多线程并发—Redis并发锁

    本文版权归博客园和作者本人吴双共同所有 .转载爬虫请注明地址,博客园蜗牛 http://www.cnblogs.com/tdws/p/5712835.html 蜗牛Redis系列文章目录http:// ...

  2. 如何优雅地使用 Windows 10 ?

    身为一个伪电脑Geek,就算不懂电脑,也要把那些更不懂电脑的人给唬住. 1.入门级别: 当然就是让别人从视觉上感觉你的电脑不一般啦 第一步:桌面要干净,干净到什么程度呢,要像这样 当别人第一眼看到你的 ...

  3. Android 之 用WebView显示网页

    WebView可以使得网页轻松的内嵌到 app 里,还可以直接跟js相互调用. WebView有两个方法:setWebChromeClient 和 setWebClient (1) setWebCli ...

  4. Hadoop基础-镜像文件(fsimage)和编辑日志(edits)

    Hadoop基础-镜像文件(fsimage)和编辑日志(edits) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看日志镜像文件(如:fsimage_00000000000 ...

  5. 关于sqlserver使用in不报错问题

    最近使用CI处理接口时自己拼装了个函数,直接把数字implode(',',$arr)之后就放在了in中,发现一直返回空数据,以为数据库就是无匹配的,但是后面发现有对应的数据,多搬检测没发现问题,后面发 ...

  6. 编写简单的windows桌面计算器程序

    编译环境:VS2017 主文件为: #include "stdafx.h" #include "WindowsProject5.h" #include &quo ...

  7. CopyOnWriteArrayList源码解析(1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注:在看这篇文章之前,如果对ArrayList底层不清楚的话,建议先去看看ArrayList源码解析. ht ...

  8. set练习

    #include <iostream> #include <set> #include <vector> using namespace std; int main ...

  9. UVa 11732 strcmp&lpar;&rpar;函数(左孩子右兄弟表示法)

    #include<iostream> #include<algorithm> #include<string> #include<cstring> #i ...

  10. css 各种常见布局整理

    在学习各种布局之前我们先来认识各个关键词,理解这些关键词,然后由点到面,这样就简单多了. display属性 页面中每个元素都有一个默认的display属性,它的值与该元素的类型有关,默认值通常是 b ...