SASS和Compass学习笔记和在vue中使用SASS

---

前言

一篇简单无奇记录一下学习SASS的博客

---

一、安装SASS

• SASS是基于Ruby语言开发的，所以，我们要使用SASS需要先安装Ruby
• 安装好后，我们就能安装SASS，打开命令行窗口，输入 gem install sass
• 然后测试一下是否安装好了，我们在命令行中，输入 sass -v 出现版本号就可以了

---

二、使用

基本使用

• 我们创建一个 index.scss 文件来存放我们的sass代码

• 我们用 sass index.sass就可以编译出css代码并且显示在控制台中，
  

• 同时生成一个新的文件 .sass-cache。我们可以看到文件的名称是哈希值，这个是用来判断我们后面有没有对内容进行修改的，如果没有修改那么就不用生成编译，如果修改了就要改变。这种在我们webpack打包的时候也出现过，生成的dist文件夹里面的 js css html等文件的命名也是这样的
  

• 但实际上我们还没有得到我们要的css文件，这里我们要输入的指令是

sass index.sass index.css

这时候就会多出一个 index.css 文件以及 index.css.map。后者是记录我们的版本和对应id等信息的。

到这里基本的使用就好了，具体的一些操作可以去官网了解一下。

vue中使用SASS

• 安装依赖

npm install --save-dev sass-loader
npm install --save-dev node-sass

• 在build目类下找到webpack.base.conf.js文件，在module的rules中插入以下代码：

{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},

• style标签中加 lang="scss"就可以啦

三、SASS的常见使用

SASS有很多的特性，可以极大的便利与我们的编写过程，下面我们来是实现一下。我们创建一个文件 index.sass 来实现我们的一些sass预处理器的特性。（我会不断补充每一个新接触学习到的特性滴！！）

1、变量

我们可以用 $ 加变量名，定义他们的值，这个非常好用，对于一些全局的样式时非常便利。

$baseColor: red;
$color1: green;
body{
  background-color: $baseColor;
}

div{
  background-color:$baseColor;
  color: $color1;
}
//编译出的结果
body {
  background-color: red; }

div {
  background-color: red;
  color: green; }

• 注意定义的变量是有块级作用域的，下面定义的变量 color2 在 div 里面是读取不到的，会直接报错的。但我们也可以通过加 ** !global** 来把局部变量变为全局变量。

$baseColor: red;
$color1: green;
body{
  background-color: $baseColor;
  $color2: yellow;
}

div{
  background-color: $color2;
  color: $color1;
}

更多时候我们会把一些变量写到一个统一处理的文件，把文件引入到我们用的地方，这样当我们发生更改的时候就能统一修改
因为我们设计开发一款应用，在设计上是有一套设计规范的，颜色不会乱使用的，而发生修改的时候，往往也是要更改全套，同时对于后面全局的色彩管理非常重要。

类似我们下面的形式

//!default：如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。
$baseColor-1: #111111 !default
$baseColor-2: #222222 !default
$baseColor-3: #333333 !default
$baseColor-4: #444444 !default

2、嵌套

这个也是个好用的东西，有了它我们当多级嵌套的时候就不用那么烦了。因为当我们用 css 写的时候回是父类 到子类，有多少个子类就要写多少次父类，一旦父类发生改变，就全部都得改。而用 sass 我们全部都只需要写一遍。

$baseColor: red;
$color1: green;
body{
  background-color: $baseColor;
  $color2: yellow;
  div{
    background-color:$color2;
    color: $color1;
  }
   div2{
    background-color:$color2;
    color: $color1;
  }
}
//编译后
body {
  background-color: red;
   }
  body div {
    background-color: yellow;
    color: green; 
   }
 body div2 {
   background-color: yellow;
   color: green; 
}

3、计算属性

便捷

//计算属性
.A{
  color: red;
  border: #0D47A1 2px solid;
  background-color: #0e0e0e;
  width: 360/960 * 100%;
}
//编译结果
.A {
  color: red;
  border: #0D47A1 2px solid;
  background-color: #0e0e0e;
  width: 37.5%;
   }

4、继承

这个也是个好东西，方便代码更加的简洁和漂亮，减少重复代码

.A{
  color: red;
  border: #0D47A1 2px solid;
  background-color: #0e0e0e;
}
.B{
  @extend .A;
}
.C{
  @extend .A;
  border-color: #00a507;
}
//编译结果
.A, .B, .C {
  color: red;
  border: #0D47A1 2px solid;
  background-color: #0e0e0e; 
  }

.C {
  border-color: #00a507;
   }

6、mixin属性

用mixin来定义代码段可以很方便的调用，并且mixin是可以传递参数的，是 sass 最强大的功能之一了，比如在设置跨浏览器的透明度之类的场面。

@mixin box-sizing($sizing) {
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}

.box-border{
  border: 1px  solid red;
  @include box-sizing(border-box)
}

//编译结果
.box-border {
  border: 1px  solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  }

7、import导入

当我们有多个样式比较复杂时，我们可以分开用多个 sass 文件来，便于我们管理。

• 创建一个_a.scss(被导入的SASS文件，我们用“_”来作为被导入的文件的文件名开头，这样的话，这个文件在编译过程中不会生成CSS文件)

$baseColor: #336699;

创建我们的主要的 sass 文件，

//SASS会自动加上_去寻找文件
@import "a";
#page {color: $baseColor;}

8、父选择器 &

当我们，也需要直接使用嵌套外层的父选择器时，比如 hover 等情况

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
//编译后
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

9、插值运算符 #{}

我们使用插值运算符可以在选择器属性名使用变量，那么为什么不直接用变量？因为避免了不必要的运算。

$A: a;
$B: background;
p.#{$A} {
  #{$B}-color: blue;
}
//编译为
p.a {
  background-color: blue; }

10、@at-root指令

他可以把我们现在的选择器移动到与他的弗雷选择器并列，看下面的代码，你会清楚的理解，他的具体作用。

.parent{
	.son1{color = red}
	@at-root .son2{color = yellow}
}
//编译后的结果
.parent .son1{
	color = red}
.son2{
	color = yellow}

还有很多其他的用法，比如函数，条件判断，循环等，我就不一一的讲解了，大家可以去根据自己的需要去官网文档了解和学习。

---

四、compass的使用

sass只是一个css的预处理器，配合上 compass 这个样式库的使用，才能最大化的发挥出 sass 的效果。就像我们虽然学习了 JavaScript 但要是我们再学习了 vue 就更加无敌啦。下篇我们再来讲解compass吧。

---

五、总结

最后，类似 sass 的 css预处理器还有 less 和 style等，我们也可以去接触了解。适合自己的才是最好的。同时我们还要学习，有对 css 优化的思想，比如用 OOCSS（Object Oriented CSS：面向对象的CSS）的思想去写 CSS ,嘻嘻，这个我还不大懂，后面学习了。学海无涯，有问题麻烦指出，非常感谢！！