web前端我爱编程

CSS编译神器——SASS(SCSS)

2016-11-29  本文已影响5367人  家娃

前端的小伙伴们有福利啦!!!

         什么?听说!css样式还可以被编译执行了。学过前端的小伙伴都知道,css样式是用来修饰网页页面结构的,说白了,它压根就算不上一门编程语言,和js相比,css所能做的事可就弱爆了,(ajax和node的出现让js越来越靠近一门服务端编程语言)。在web1.0时代,css就是用来做页面模板的,纯属于设计类。不在开发的范畴......

CSS编译神器——SASS(SCSS)

           直到sass的出现,sass是个什么东西呢!上个世纪90年代有个日本佬开发出了一门名为Ruby的开发语言,它是一种服务端开发语言。这种语言出现之后的一段时间里,出现了不少围绕着ruby打转的框架,我们的sass就是其中之一,如此说来我们这个强大的css编译平台就是用ruby开发的,所以后面在开发编写sass文件时,我们需要安装ruby编译环境,然后安装ruby包gem中的sass模块,其实sass就像是css的虚拟机一样,它可以将强类型的css文件(后缀名是.sass或者.scss的css文件)编译成可以渲染页面的“正规”的css文件。厉害了,我的css. 以前只听过js的虚拟机——浏览器(或者node.js),java的虚拟机——jvm,安卓的虚拟机——dvm(和ART).从来没听过小小的css现在也变得越来越强。等等,这么说来!以后前端写css就可以像js那样定义变量,函数,调用方法,定义数据类型,什么继承啊,封装啊都跑到css上面来了。这么说来,css也想一统武林,称霸编程语言排行版?这个......额..貌似不妥吧!......有待商榷......

煤矿大开发

题外话不多扯,下面就带大家走进SASS的门槛,门槛不高,君需仔细

          第一步:工欲善其事必先利其器,当然是编写sass时环境搭建了,首先需要去ruby的官网下载ruby安装包,网上一搜一大堆,这里我也给大家提供了百度云分享(密码:s3y2 ) Ruby安装包    

下载之后一步一步安装完成,接着安装ruby的包管理器gem中的一个重要的模块(美其名曰:sass的依赖环境)——sass-3.4.22.gem(这里只是某个版本)如何安装这个东东呢,如果你觉得你的网速够可以的话,那不多说,直接上DOS命令行:gem install sass

但是我们的网速慢的可以,那么也别急,在这里我也给大家提供了已经下载好的sass模块,点击大链接  http://pan.baidu.com/s/1o8HEZWI  下载即可,注意此时安装有些不一样,要在你命令行中敲入gem install (空格)之后再将你下载好的sass文件路径粘贴在此,最后敲下回车键,说白了,就是安装(install)你已经下载好的sass,而不需要在网速慢的情况下去国外服务器上下载模块(要是你懂得翻墙也是可以的噢)。以上两个东西装好之后,该检验了。在命令行中敲下ruby -v,出现版本号,对勾。敲下gem -v,出现版本号,对勾。


         第二步:环境搭建好了,那就开始我们的第一个Hello World“”吧

在你的目录下新建一个项目文件,在css文件夹里新建一个.scss文件(前面说过.scss和.sass都是SASS文件,二者的区别在于:.sass后缀名的是在SASS3.0之前的版本中使用的,其代码书写格式由于没有花括号和分号,而且需要做到完美的退格形式,所以不符合css书写规范而不被广为接受。 .scss后缀名的是SASS3.0之后一直很流行的格式,代码书写有花括号,分号等等,完全符合原生css格式)如图所示:

demo

你的.scss里就是你要写的css代码,只不过,这一次我们写的css有了变量,方法,赋值等等一大堆只有强类型语言才有的,你可以给css的属性(或属性值)定义成一个变量,然后对它赋值,在花括号里该怎样写·css还是怎样写

html页面的简单结构如下图

html

SASS页面(.scss后缀名的)如下图

SASS

你的小demo写完了嘛,好!关键的一步来啦

进入dos命令行cd到你的项目文件所在路径下,我的是sassdemo.然后敲下如下命令

演示:如下图

dos

接着你会在你的项目文件(sassdemo)里的css文件夹下看到多出来这3个文件(map文件也很重要哦)如下图

编译后的css结构

没错dos命令行里敲命令就将你写好的.scss文件编译成“正规”的css文件啦。编译后的css文件里内容这这样的,如下图

由.scss文件编译过来的css

好了,一个小小的SASS编译小案例结束了

总结:所谓的SASS就是另一种形式的css文件,只不过在这种形式的SASS(.scss常用)文件里,你可以将css扩展开来去写,可以将编程语言的语法运用到css中。一般,我们编译之后的.scss文件会形成4中格式的css文件

                                             expanded (扩展格式)——常用

                                             compact  (紧凑格式)——常用

                                              nested   (嵌套格式)——不常用

                                             compressed(压缩格式)——不常用(项目上线时用)

SASS编程里除了变量,有一个重要的内容——关于“函数”方面

           官方专业称其为:混合

上一篇下一篇

猜你喜欢

热点阅读