SASS的介绍
SASS 官网：http://sass-lang.com/ 英文版
https://www.sass.hk/ 中文版
https://www.w3cplus.com/sassguide/ SASS入门 教程SASS 是基于 Ruby 的，LESS 是基于 Javascript 的，在大的文件上的编译 SASS 是稍微有一点点的优势的，在整体上 SASS 和 LESS 都是 CSS 预处理器，SASS 可以像函数一样编程
SASS的安装
参考网址：https://www.sass.hk/install/
- 安装之后重新打开命令行终端输入下面的命令，测试是否安装成功 ``` ruby -v
> > <br />参考网址：[https://ruby.taobao.org/](https://ruby.taobao.org/)<br />
$ gem sources —add http://gems.ruby-china.org/ —remove https://rubygems.org/ $ gem sources -l CURRENT SOURCES
请确保只有 gems.ruby-china.org
```//安装 sassgem install sass
温馨提示：
我第一次安装的 ruby 是最新版的出现了一些 bug 导致无法 install 装包，后来我下载了个 2.3 版本的，之后又在换淘宝镜像的时候报了错，然后我把 https 改为了 http 就可以了，下面是错误的截图：
解决方法：将当前安装的 2.5 新版本的 ruby 的在 C 盘安装的文件夹删掉，之后再去下载 2.3 版本的
解决方法修改 https 为 http
SASS的应用
参考链接：https://www.w3cplus.com/sassguide/ Sass 入门教程
Example
- 在桌面新建一个sasstest 文件夹，将其拖拽至 sublime 中
变量
- 在文件夹中新增一个 index.scss 文件，编辑 index.scss 文件 ``` $fontStack : Helvetica, sans-serif; $primaryColor: #333;
body { font-family: $fontStack; color: $primaryColor; }
h1 { color: $primaryColor; }
- 在命令行中编译 .scss 文件
cd Desktop\sasstest\ //默认会将编译后的源码输出到控制台上 sass index.scss
> - 编译后会自动生成一个文件夹，这里面的文件存的是编译后的一些缓存，是以 .scssc 为后缀名的> - 继续在命令行中输入命令
//编译 index.scss 文件并生成一个新的 index.css 文件，这个跟LESS 有点不一样不需要加 < sass index.scss index.css
> - 编译后的 index.css 文件，最后一行的意思是：可以通过URL 后面的值找到文件生成的一些源地址> - 自动生成的一个 map 文件，这里面就是一些 index.css 生成时的一些基本信息> <br />#####嵌套<br />- 在项目中再新建一个 index1.scss 文件，编辑 index1.scss 文件，上面两行是注释，写法和 js 是一样的
//这个是我们的第二个 sCss 的测试 //—————————————————- nav { ul { margin: 0; padding: 0; list-style: none; }
li { display: inline-block; }
a { display: block; padding: 6px 12px; text-decoration: none; } }
- 在命令行中编译 index1.scss 文件
sass index1.scss index1.css
> <br /><br />- 插曲：在上面的操作之间我修改了 index1.scss 文件中的第一行的注释，写了中文你，之后在命令行中编译时报了一个错误，这个证明是不识别的，需要自行的再去设置编码格式> <br />#####导入> - 在项目中新建一个 _reset.scss 文件，编辑 _reset.scss 文件
html, body, ul, ol { margin: 0; padding: 0; }
- 接着编辑 index.scss 文件，在顶部导入上面的 _reset.scss 文件
@import ‘reset’;
> - 在命令行中编译 index.scss 文件
sass index.scss index_new.css
> - 在项目中查看 index_new.css 文件，会发现他把两个 sacc 文件的代码编译并且合并了> #####mixin> - 在项目中新建一个 mixin.scss 文件，编辑 mixin.scss 文件
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
- 在命令行中编译 mixin.scss 文件
sass mixin.scss mixin.css
> <br /><br />#####扩展/继承<br />- 在项目中新建一个 extend.scss 文件，编辑 extend.scss 文件
.message { border: 1px solid #ccc; padding: 10px; color: #333; }
.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }
- 在命令行中编译 extend.scss 文件
sass extend.scss extend.css
> <br />#####运算> - 在项目中新建一个 calc.scss 文件，编辑 calc.scss 文件
.container { width: 100%; }
article[role=”main”] { float: left; width: 600px / 960px * 100%; }
aside[role=”complimentary”] { float: right; width: 300px / 960px * 100%; }
- 在命令行中编译 calc.scss 文件
sass calc.scss calc.css
> <br />#####颜色> > [Compass（样式框架）_百度百科](https://baike.baidu.com/item/Compass/2884186)<br />Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。<br />- 在项目中新建一个 color.scss 文件，编辑 color.scss 文件
$linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } }
- 在命令行中编译 color.scss 文件
sass color.scss color.css
> <br />- 在项目中新建一个 index.html 文件，便于查看颜色查看效果，编辑 index.html
```
- 在浏览器中打开这个 index.html 页面
若有收获，就点个赞吧
0 人点赞
