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的安装
image.png
image.png
image.png
image.png
image.png
- 安装之后重新打开命令行终端输入下面的命令，测试是否安装成功
ruby -v
image.png
image.png
参考网址：https://ruby.taobao.org/
image.png
$ gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://gems.ruby-china.org
# 请确保只有 gems.ruby-china.org
//安装 sass
gem install sass
image.png
温馨提示：
我第一次安装的 ruby 是最新版的出现了一些 bug 导致无法 install 装包，后来我下载了个 2.3 版本的，之后又在换淘宝镜像的时候报了错，然后我把 https 改为了 http 就可以了，下面是错误的截图：
image.png
解决方法：将当前安装的 2.5 新版本的 ruby 的在 C 盘安装的文件夹删掉，之后再去下载 2.3 版本的
image.png
解决方法修改 https 为 http
SASS的应用
参考链接：https://www.w3cplus.com/sassguide/ Sass 入门教程
image.png
Example
- 在桌面新建一个sasstest 文件夹，将其拖拽至 sublime 中
image.png
变量
image.png
- 在文件夹中新增一个 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
image.png
- 编译后会自动生成一个文件夹，这里面的文件存的是编译后的一些缓存，是以 .scssc 为后缀名的
image.png
- 继续在命令行中输入命令
//编译 index.scss 文件并生成一个新的 index.css 文件，这个跟LESS 有点不一样不需要加 <
sass index.scss index.css
image.png
- 编译后的 index.css 文件，最后一行的意思是：可以通过URL 后面的值找到文件生成的一些源地址
image.png
- 自动生成的一个 map 文件，这里面就是一些 index.css 生成时的一些基本信息
image.png
嵌套
image.png
- 在项目中再新建一个 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
image.png
image.png
image.png
- 插曲：在上面的操作之间我修改了 index1.scss 文件中的第一行的注释，写了中文你，之后在命令行中编译时报了一个错误，这个证明是不识别的，需要自行的再去设置编码格式
image.png
image.png
导入
image.png
- 在项目中新建一个 _reset.scss 文件，编辑 _reset.scss 文件
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
- 接着编辑 index.scss 文件，在顶部导入上面的 _reset.scss 文件
@import 'reset';
image.png
- 在命令行中编译 index.scss 文件
sass index.scss index_new.css
image.png
- 在项目中查看 index_new.css 文件，会发现他把两个 sacc 文件的代码编译并且合并了
image.png
mixin
image.png
- 在项目中新建一个 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
image.png
image.png
扩展/继承
image.png
- 在项目中新建一个 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
image.png
image.png
运算
image.png
- 在项目中新建一个 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
image.png
image.png
颜色
image.png
Compass（样式框架）_百度百科
Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。
image.png
- 在项目中新建一个 color.scss 文件，编辑 color.scss 文件
$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
- 在命令行中编译 color.scss 文件
sass color.scss color.css
image.png
image.png
- 在项目中新建一个 index.html 文件，便于查看颜色查看效果，编辑 index.html
<link rel="stylesheet" href="color.css">
<a href="http://www.baidu.com">百度一下</a>
- 在浏览器中打开这个 index.html 页面
image.png
