Sass 的使用

Posted 2020-09-08 Lonely existence, lonely burni

sass的使用

前言

       之前一直听说过sass和less。以为自己没用过，其实曾经的时候还是用过sass的。只不过是在别人搭好的结构上直接使用的以至于印象不深刻。然后也纠结过用sass还是less。两个框架在语法上大体上是相同的，主要的不同就是实现方式。less是基于javascript，而sass是基于服务器的。前人的经验可以给我们提供更好的选择，由于sass在github上的评分比较高，所以我们选择了sass作为我们css端的开发工具。

安装 sass

一、安装ruby（由于我们现在用的是gulp，所以就没必要安装ruby）

      因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。官网下载ruby。在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，否则以后使用编译软件时会提示找不到ruby环境。

 

二、安装sass

       安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

 

然后直接在命令行中输入gem install sass按回车键确认。等待一段时间后显示安装成功

 

使用 sass

        sass文件就是普通的文本文件，里面可以直接使用css语法。文件后缀名是.scss，意思为Sassy CSS。

        正常情况下浏览器是不能解析scss文件的，所以要将.scss文件转为css代码（假设文件名为test）

 

 

        如果要将显示结果保存成文件，后面则要跟一个.css的文件

 

在项目中应用

一、路径设计：全局文件为sass.scss，里面引用模块。其中public-vaiable文件里面为放置的公共变量，（必须加载在所有模块的上面，否则在它上面的引用找不到变量就会报错）

 

二、嵌套：SASS允许选择器嵌套，好处的话我觉得看起来更加清晰，并且不用写一长串的选择器。

 

三、变量的运用

1、设置常用的字号：由于最近的wap端的像素单位用的是rem，然后设置了一些常用的字号从12-20。运用的时候直接写font-size: $size14;就好。

 

2、设置通用颜色：由于网站的颜色要统一化，例如黄色就是一种黄，不能杂乱。所以运用颜色变量能更好的体现，并且更方便维护。下图中如果后期黄色的色值要变动一下，那么改了这里，所有的就都生效。在抢单的页面中现在用到的有三种灰色，$gray文字的浅灰色，$dark-gray为文字的深灰色，$line-gray为横线的灰色。

 

3、浏览器前缀：由于css3的样式好多并不是被浏览器完全兼容，所以必须带上其浏览器所专属的前缀才能够被识别。目前所要带上的前缀有-webiktih和-o和-moz和-ms。这样一个样式就要写四遍，很麻烦。而sass的变量能帮我们很好的解决这个麻烦。如下图以圆角的前缀举例，@mixin为sass的混合声明用法，可以传递参数，参数名以$符号开始，多个要用分号隔开。rounded是我自己给起的名称，括号里面为变量。

 

调用的时候要用@include 引入 后面加名称，括号里指定参数。如果想用默认参数，就不需要指定直接写@include rounded()就可以

 

END

         现在在项目中运用的点就以上这些，当然sass不只有这些功能。实际中用到新的功能我会及时更新到这篇文章的应用模块里面。从目前来说，运用sass对我们确实是有益处的，而目前遇到的坑就是在路径的那里，必须记得把公共变量的文件写在文档流的最上面。否则会调用不到，然后gulp也会报错并停止运行。