最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

SASS在项目中的实战

CSS rockyxia 4365浏览

继上篇WIN7成功安装SASS记录之后,本周又把SASS如果使用在项目中研究了一番,本次内容是将之前的一个普通的静态页面转化为一个使用SASS的项目,体验了一些基础的SASS规则,像变量、嵌套、判断以及运算等基本的规则,走通了在项目中从scss文件到css文件的流程,没有使用专门的SASS编辑工具和引用第三方SASS库,都是原生态的做法。下面说下我的操作过程:

1、确定项目文件架构

与正常的项目差不多,看我生成完成之后的目录截图如下:

2016032100001

.sass-cache 为sass自动生成缓存文件,无需理会
css为生成css文件的存放目录,开始时应该是个空文件夹
images和js为原来切图文件及js存放目录,和sass没有关系
sass问sass源文件scss文件存放目录

这次demo比较简洁,使用了这样结构,复杂的项目文件结构可以根据具体项目来布局结构。

2、从css文件转化成sass文件scss

scss文件格式完全兼容css,可以直接降css文件后缀修改为scss就得到了一个sass文件,将其中通用公用部分抽取出来定义成一个变量或mixin(混合类似与js里面的一个小函数),这里面最常用的就是颜色的定义,一般一个网站主流颜色就那几种,还有按钮样式等等,都极大的方便了以后的修改与调整。

3、再从从scss到css

在scss里面做了一些修改与调整之后,我们要将scss再生成css文件以便网页调用,这里就要使用之前安装过的sass环境,使用sass命令行即可生成css文件。

以下4个命令都是将指定的scss文件生成到指定的css文件,各自都有微小的区别:

a.直接生成完整的css文件一次

sass sass/_index.scss:css/index.css

b.直接生成压缩的css文件一次

sass --style compressed sass/_index.scss:css/index.css

c.监听scss文件的变化,只要保存一次就生成一次css,完整的

sass --watch sass/_index.scss:css/index.css

d.监听scss文件的变化,只要保存一次就生成一次css,压缩的

sass --watch --style compressed sass/_index.scss:css/index.css

2016032100002

至此,一个简单的sass项目流程就走通了,但这只是一个开始,sass强大的用法,还需要慢慢的去掌握,掌握好了sass能让css书写更上几层楼,如果不能很好的运用sass那可能还不如不用他。这个简单的demo里面我主要是想讲sass的整个流程,没有介绍具体sass的写法,我也是才了解了基础的用法,后续会逐步的更多的使用他,建立一个sass基础库,希望在成熟之后逐步推广开来。网络上sass的库也已经有不少了,但是我觉得根据我们自己平时经历的项目,整理出来的基础库更能符合我们自己的项目,大而全的东西有时没有必要。

感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

转载请注明:Rockyxia Web技术博客 » SASS在项目中的实战
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)