Sass入门

Sass是啥？

Sass是一门高于css的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通css更加强大的功能来创建可维护和管理的样式表。

现在的sass实际可以这么理解为是一种css的升级版本。能够通过定义变量的编程方式进行编写css代码。

比如：

$side : left;
.container {
    border-#{$side}-radius : 5px;
}

以一种定义变量的方式进行css代码的编写，提高代码的灵活性和可维护性。

---

Sass和SCSS有什么区别？

实际上这两个是同一种东西，平时我们都可以称之为sass，但是两者也有不同：
1、一个是拓展名不同
2、书写的语法也不同
通过实例来看看有什么区别：

Sass语法

$primary-color:#ffffff

span
  color:$primary-color

SCSS语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

---

Sass安装（windows）

首先我们需要下载安装。首先我们需要的是安装Ruby。点击Ruby下载
下载安装之后，运行start Command然后输入

gem install sass

检查安装成功

sass -v

---

Sass编译

Sass编译有多种方法：

1. 命令编译
2. GUI工具编译
3. 自动化编译

命令编译：
使用的是电脑的命令终端，通过输入Sass指令来编译sass。这种方式是最直接也是最简单的方式之一。

sass <文件路径>/style.scss:<输出的css文件路径>/style.css

多文件编译

 sass sass/:css/

该命令意思是将文件夹中所有的.scss文件编译成.css文件，并且放在css文件夹中，但是该命令只能执行一次，意思就是每次编译都需要写一遍。解决的办法是：

sass --watch <input file>/style.scss:<output file>/style.css

GUI编译
我们可以通过第三方软件来编译。比如Koala，下载地址：

Koala下载地址

自动化编译
借助gulp,grunt

---

不同风格的输出方法

1. 嵌套输出方式nested
2. 展开输出方式expanded
3. 紧凑输出方式compact
4. 压缩输出方式compressed

嵌套输出方式
嵌套，顾名思义。我们使用例子来演示什么意思。
sass中的嵌套可以显示层级关系。比如

//css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

在sass中则可以这样写：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

这样可以使代码更容易阅读。当我们编译scss文件时候，在命令行中输入：

sass  sass_demo.scss:test.css --style nested

如图所示:

如果我们使用–style expanded方式，则会展开形式输出：
输入一下命令行

sass sass_demo.scss:expanded.css –style nested

如果我们使用–style compct方式，则会紧凑形式输出：

sass sass_demo.scss:expanded.css –style nested

如果我们使用–style compressed方式，则会紧凑形式输出：

sass  sass_demo.scss:compressed.css --style compressed

---

Sass声明变量

sass声明变量的意义在于将编程习惯为css所用。使用$变量名称即可，比如

$primary-color:red;
span{ 
  color:$primary-color;
}

默认变量
默认变量指的是一个变量的初始值。只需要在变量后面加上!default即可
比如

$primary-color:red;
$primary-color:blue !default;
span{ 
  color:$primary-color;
}

那么该值的默认变量则为blue，但是编译之后的值为red.

span{ 
  color:red
}

如果该变量已经被赋值,就不会再次赋值, 但是,如果还没有被赋值，就会被指定一个值，变量的值如果是 null 的话，会被 !default 当做没有值。

---

局部变量和全局变量

变量的作用域
sass的局部变量和全局变量的定义就在于变量被定义的位置。
如果在选择器外定义的变量为全局变量，如果在选择器内定义的变量为局部变量。

---

选择器嵌套

html文件中

<header>
        <div>
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </header>

在div中有多个a标签时候，我们原生的css可能是这样写

 a{
  color:red;
}

而在scss中

header div a {
  color:red;
  header & {
    color: green;
  }
}

&可以理解为header+div+a+a+a….下的多个a标签。

---

属性嵌套

.box{
  padding:{
    left: 10px;
    right: 19px;
  }
}

分别对应是padding-left,padding-right

---

伪类嵌套

同样，伪类:after :before也可以这样写

---

混合宏

我们做前端开始都知道，一个样式可能在多处使用，那么这样重复性动作很频繁的情况下，我们可以用上sass的混合宏。

@mixin

不带参数@mixin

@mixin background-posi{
   background-position:-30px,-40px;
}

带参数的@mixin

@mixin background-posi($number:-40px;){
   background-position:-30px,$number;
}

同样，我们在外部调用时候可以传入参数。

@mixin background-posi($number){
   background-position:-30px,$number;
}

那外部调用的话则使用

@include background-posi

即可实现调用。

传入参数

@include background-posi(-40px;)

同样我们可以传多个参数，这里就不多作描述。

---

继承

写过css的都知道有一个属性叫做inherit，那sass同样也有，@extend

---

占位符 %placeholder

没有被 @extend 调用，它并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码