Sass入门

1.安装sass

---

安装sass需要ruby的环境使用gem 命令安装

Mac

使用MacBook的用户
可以直接使用命令

 
 sudo gem install sass
 
 

如果想安装最新的beta版的sass可以使用命令

 
 sudo gem install sass --pre
 
 

简单介绍一下sudo
这个命令就是因为在Mac系统上有权限分配的原因

 
 sudo
 
 

就是可以让mac知道你是拥有最高权限的用户 才可以让你安装某些程序到跟目录，非用户目录下的文件中

Window

使用window的用户可以上ruby的官网上下载ruby (一般我们使用的都是Stable版)并安装好之后，使用命令

 
 gem install sass
 
 

同理需要安装最新的beta版命令是

 
 gem install sass --pre
 
 

给大家简单介绍一下关于sass的日常维护
1.显示版本

 
 gem --version
 
 
 sass --version
 
 

2.升级sass

 
 gem update sass
 
 

3.由于默认使用的sass的安装镜像可能会被天朝墙，所以如果觉得有必要的话可以使用淘宝提供的镜像
显示镜像

 
 gem sources -l
 
 

移除镜像
gem sources -l显示的就是当前的镜像地址

 
 gem sources --remove https://rubygems.org/
 
 

添加镜像
(如果当前系统不支持https可以改成http即可)

 
 gem sources -a https://ruby.taobao.org/
 
 

那么当前sass的环境就配置完成了。
我们就可以使用sass 来编写css了

2.如何编辑sass

---

sass的文件是有2种的文件类型，分别是.sass和.scss

其中sass是不使用｛｝(大括号)和；(分号)

其中scss是比较符合我们平时编写的css使用大括号和分号
而且避免sass后缀名的严格模式报错
所以我推荐大家使用scss格式，并且使用2缩进不要使用4缩进

我们首先新建一个a.scss文件
写入

 
 //这里是注释
 
 
 /**
 *这里面的都是
 *注释
 *编译器会跳过
 */
 
 $fontSize:16px;
 $bgColor:#5993c5;
 html,body{
 $size:100px;
 width:100%;
 height:100%;
 background:{
 color:$bgColor
 };
 font-size:$fontSize;
 div{
 $fontSize:14px;
 width:$size;
 height:$size;
 font:{
 size:$fontSize
 }
 };
 &>p{
 font-size:$fontSize;
 };
 };
 

这里我们可以进行简单的介绍怎么使用sass
我们首先使用了css里面没有的东西就是变量
$fontSize:16px;
$bgColor:#5993C5;
首先定义了一个背景颜色和字体大小的变量；
我们在body里面使用了背景颜色的变量
还有我们这个使用了类似object的东西,前端开发都知道有复合样式这个东西,其中background就是其中一个

 background-color:white;
 background-image:url('');
 background-repeat:no-repeat;
 background-position:center;
 .....
 

这里的

 background:{
 color:$bgColor;
 }
 

通过编译器编译出来的就是background-color:#5993c5;
所以我们都可以写成

 background:{
 color:white;
 repeat:no-repeat;
 image:url('../a.jpg');
 };
 

sass里面还有一个强大的功能就是内嵌;
如a.scss文件里面所写

 body{
 div{};
 &>p{};
 }
 

输出a.css是

 body div{};
 body > p{};
 

最后入门的这个就是作用域的问题了
大家都知道有变量，编程就会有一个作用域的概念；
所以在sass里面都会有作用域的概念
如a.scss所写

 $fontSize:16px;
 body{
 font-size:$fontSize;
 div{
 $fontSize:14px;
 font:{
 size:$fontSize;
 }
 };
 &>P{
 font-size:$fontSize;
 };
 };
 

这里全局有一个$fontSize的变量，作用域当然就是这个整一个全局环境了。
在div里面又新建了一个$fontSize的变量
（在这里说一下，sass里面是没有变量声明的，以$符号开头 ：号赋值）
所以div最后编译出来的就是

 body div{
 font-size:14px;
 }
 

在p里面没有新建变量，所以编译器会从上层一级一级去找 直到找到全局环境如果都没有的话就会报错，或者从上层找到了就马上停止往上遍历。所以这里编译出来的就是

 body > p{
 font-size:16px;
 }
 

3.编译sass

---

单一文件编译的时候我们使用的命令就是

 
 sass sass.scss style.css
 
 

单一文件监听命令

 
 sass --watch sass.scss:style.css
 
 

文件夹监听命令

 
 sass --watch sass:css
 
 

我们还可以通过配置一些参数识得编译出来的样式文件满足我们的需求
都是可以应用在文件夹监听的命令上

 
 sass --watch style.scss:style.css --style compact
 
 
 sass --watch style.scss:style.css --style nested
 
 
 sass --watch style.scss:style.css --style expanded
 
 
 sass --watch style.scss:style.css --style compressed
 
 

---

以上就是sass的入门指导，作者第一次编写文章，如有不妥请向作者提出建议。作者会往后慢慢完善sass系列的指导和教程。

---

感谢读者的关注

---