关于scss编译。

2017-05-10  本文已影响84人  Hoistthecolors

近两个月在用ionic2+angualr2搭了一个商城。其中用到了scss,恍然悟道,scss或者less这样的语言,才是css(层叠样式表)的未来。通过这个项目我已经感受到了scss的魅力,很遗憾之前的坐井观天,总觉得scss嘛,和css没多大的区别(我的锅我的锅)。

所以说,前段界跟喜剧界有一个很大的共同点,就是:段子(框架or插件)天天有。

我们都是在前段这个大的河流中随着浪潮荡着,这头浪高(vue),冲到这头(vue);那头浪高(angualr1/2/4);被冲到那头(angualr1/2/4);或者是react的浪潮,这些年来都是这么荡着。想想都t特么好被动。

前段如卵垒城,不得半点马虎。所以记录自己的在scss方面的心得,以及一些函数,混合宏。


1.分享几个网站(有用)

sass中文网

http://sass.bootcss.com

阮一峰(国内sass的布道者)的scss用法指南

http://www.ruanyifeng.com/blog/2012/06/sass.html

一个在线scss编译网站

http://www.sassmeister.com


2.安装sass

sass是依赖着Ruby的。

首先安装你的Ruby。

地址:安装Ruby。

默认是全局安装,不牵扯类似node -g之类的指令。

安装完成后在DOS中键入==>ruby -v

出现版本号就表示安装成功了。

接下来就可进行下一步操作了。在DOS中键入gem install sass

然后就是 ==> sass -v

出现版本号就表示安装成功了。

此时已经成功了。但是还是要操作一波。

新建一个文件夹。新建你的scss文件。

第一个scss文件

接下来就可以写一些scss代码。

当然在写scss之前,我们新建一个html文件。命名为:index.html。

在我们的scss文件中就要对这个box进行操作

上scss。

简单写一点。

接下来就是执行编译指令。打开文件所在目录;shift+右键(打开黑窗);

因为我的scss文件叫做a.scss。所以:

如上指令。

完事之后你会看见你的根目录写多了几个文件,不用管。如下说明成功了。

我们需要的就是a.css

打开a.css如下。

编译后的css文件内容

接下来我们将a.css联入index.html中。如下效果说明成功了。

ok

sass提供了4中编译方式:

* nested:嵌套缩进的css代码,它是默认值。

* expanded:没有缩进的、扩展的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

一般就是compressed最为常用

键入如上指令,我们来看看我的压缩后的css文件

压缩后的css文件如下:

变成了一行

写的很乱。逻辑顺序是没有错的。

使用gulp也是可编译的。下次有时间整理一下gulp

一是做个记录。二是可以给前段的兄弟一点点帮助。

上一篇下一篇

猜你喜欢

热点阅读