1.使用CSS预处理器Sass重写你的样式

再次强调,本系列不针对0基础初学者哦。

我们之前一直在讲JS,很少关注过CSS,很多同学可能就对CSS有点轻视了。但其实这几年前端的飞速发展,不仅JS的框架出来很多,CSS也是在不断发展的。比如大家都喜欢用的BootStrap等等。

学CSS预处理器有什么用?

不知道各位有没有写过这种代码?

效果:

一般我们就这么做了,很OK。但这样写有什么问题呢?

想一下,如果业务需要我们要将这个圆改成一半大的,需要改多少代码呢?

这三处都改成50px。

如果这时候需要把主题改成绿色,又得把两处red都改成green。

这还只是简单的一个div,如果是整个页面呢?一般我们页面都是风格统一的,比如链接的颜色,按钮的大小,字体大小等等,一改全改。这时候我们还要一个一个去文件里搜索然后修改吗?显然不能。

或者像这种情况:

像这种代码常见于项目统一样式库中,显然我们直接写也很烦。

最关键的,还无法统一编码风格。。。

CSS预处理器应运而生。

CSS预编译器是什么?

其实就是个工具,这个工具定义了一些语法规则,比如变量、循环等等,我们按她的语法写代码,最终使用工具编译成我们认识的CSS代码。现在主流的CSS预处理器有三种:Sass/Less/Stylus

怎么使用CSS预处理器

之前BootStrap都是使用Less作为她的预处理器,但从BS4开始使用了Sass,所以我们就先来学一下Sass吧。

首先Sass是Ruby语言写的,所以要安装Ruby环境。。

Ruby下载地址:https://rubyinstaller.org/downloads/

下载默认安装之后,运行CMD查看是否安装好:

然后自带一个叫做的系统,用来安装基于的软件。我们可以使用这个系统来 轻松地安装。跟npm很像,替换淘宝镜像源:

然后安装sass,这里顺带装一下compass,compass是啥呢?就是sass的一个工具库,就像nodejs和express的关系一样。可以通过这个框架方便的做很多操作。

//如mac安装遇到权限问题需加 sudo gem install sass

gem install sass

gem install compass

然后我们看下是否安装成功:

OK,现在就可以正式的使用Sass了。具体的语法可以去看Sass中文网,我们这里先简单的带大家尝个鲜。

新建个这样层级的目录:

注意新建文件的后缀名是scss,其实还有中.sass文件,但那语法是ruby风格不适合我们,所以大家就当不知道吧。

sass中定义变量,采用$做开头:

然后现在我们来试一下使用sass编译:

注意要先进入项目文件夹。

OK,如果代码写的没问题,就能编译通过,通过不会有提示,失败则会打印信息。

此时我们再看项目文件夹,发现css下面多了个common.css文件,打开一看:

成功了,变量被完美识别。以后重复的地方改一次值就行了。

比如为了测试统一边框,最后直接改成None:

编译一下:

这里先打断一下,我们来看下compass库有啥用:

其实变量也是可以引用变量的:

哦,变量也是可以运算的,加减乘除:

编译后:

试试循环呢:

当使用 时,条件范围包含 与 的值,而使用 时条件范围只包含 的值不包含 的值。

还可以each一下:

编译成:

甚至还可以这么玩:

编译后:

还有个很有用的是后代样式选择器,从现在也开始变得简单了,直接嵌套,非常的语义化:

编译后:

但有些时候你可能希望这样:

刚才那样显然不能满足了,但如果在单独写又显得非常不sass,所以要这样写:

属性也可以嵌套呢:

编译

最后再说一个非常屌的东西,叫mixin,其实就是样式复用,但不知道各位能不能理解其中的妙处。我们最开始写样式都会这么写:

但随着自己学习的深入,开始主动想到样式封装复用了,这时候你就高级了:

页面调用:

其实能这样做,说明你前端已经算入门了。毕竟少写了很多重复代码,但这样有没有问题呢?显然是有的,尤其是前后端不是一个人开发的时候:

1、页面重构时,需要频繁修改class,这个问题在后端人员负责HTML开发的时候格外突出,比如JSP,前后端耗费很多沟通成本。

2、造成了代码的可读性和可维护性下降。如果你要改动规则,需要同时修改HTML和CSS,也可能造成新的样式问题。

如果我们想要建立一种代码风格,改动样式时不至于通知后端改模板。比如将上面这个例子的class“test c-red f-left font20”换用一个有实际语义的类名如title,然后在CSS内部实现mixin。就会好很多

而这正是CSS的短板,CSS体系内的用法只有复制粘贴。

到底啥意思呢?

可以带参数,你懂的。

编译后:

是不是感觉兜兜转转又回来了?代码跟刚开始不一样嘛?

显然不一样,务必知道,这CSS代码不是我们自己写的了,而是sass代码生成的,我们将样式复用从HTML层转移到了CSS层,此时的HTML只需要那个title就行了。至于样式咋复用呢:

看懂了吗?虽然最终生成的文件大小可能比那种直接使用class来复用的大。但其实最后放到生产环境时经过压缩,相差无几的。比起动不动修改HTML页面,真的好多了。

还有一点,其实不管啥语言,注释都很重要。

Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会

好了,就简单地介绍到这里吧,更多可以到SASS中文网看,而且其实sass提供了各平台的版本,比如node-sass等等,大家可以了解下。

哦,对了,肯定有同学会想,我写一句代码就得编译一下,好烦啊,这效率还不如直接写。能不能像Ng2那样,我一保存scss文件,就自动执行编译出css文件呢?当然可以了:

//单文件监听命令

sass --watch input.scss:output.css

//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:

sass --watch app/sass:public/stylesheets

但开个黑窗口还是很烦,工具里有没有插件直接做这个事呢?也是有的,我们这里就拿国人比较喜欢的HBuilder举例子吧:

工具=>预编译器设置=》.sass(存在则编辑否则创建)

这个触发命令地址就是ruby安装目录的地址,然后进bin找sass.bat

BootStrap是真厉害啊,直接引领了一波扁平化风潮。现在虽然很少有人直接用BootStrap来项目,一般都是二次开发过的UI框架。但几乎所有的现代UI框架都是基于BootStrap或者是多多少少参考过BootStrap的设计和编码风格的。

那BootStrap说白了就是样式很牛逼嘛。关键还有那种主题样式文件,比如紫色/黑色/白色/蓝色等等,甚至还可以自定义主题。可以想一想很多地方都是一样的高度,一样的色彩,如果一改就得改很多处,写的很痛苦。这时如果使用了预编译器就会方便很多。

如果看完觉得有用,可以转发一下的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180308G01XFS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券