Scss

一、介绍

Scss 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins），函数（functions）等功能，并且能够完全兼容 CSS 语法。

二、基本语法

变量

变量是用来存储信息并在将来复用的一种方式，在整个样式表中都可以访问，可以使用变量存储颜色，字体或任何 CSS 值，SCSS 使用$符号作为变量的标志。例如：

变量声明

// 单个属性值
$hightlight-color: #F90;
// 以空格分隔多个属性值
$basic-border: 1px solid black;
// 以逗号分隔多个属性值
$plain-font: "Helvetica Neue"、Helvetica、sans-serif;

与 CSS 属性不同，变量可以在 CSS 规则块定义之外存在。当变量定义在 CSS 规则块内，那么该变量只能在此规则块内使用，例如：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

// 引用已经声明的变量
$hightlight-border: 1px dashed $nav-color;

上面代码中，$nav-color定义在了规则块外边，在这个样式表中都可以像nav规则块那样引用它。$width这个变量定义在了nav的规则块内，只能在nav规则块内使用。

变量引用

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}
//编译后
.selected {
  border: 1px solid #F90;
}

上面代码中，$highlight-color这个变量赋值给了border属性。编译后，变量会被它的值替代，在声明变量时，变量值也可以引用其他变量。

变量名中使用中划线还是下划线分隔？

使用中划线或下划线完全取决于个人爱好，并且这两种方法相互兼容，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

$link-color: blue; // 中划线声明
a {
  color: $link_color; // 下划线使用
}
//编译后
a {
  color: blue;
}

嵌套

在编写 HTML 时，您可能已经注意到了它有一个清晰的嵌套和可视化层次结构。而 CSS 则没有。

Scss 允许您嵌套 CSS 选择器，嵌套方式与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则将导致过度限定的 CSS，这些 CSS 可能很难维护，并且通常被认为是不好的做法。

如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID:

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;
  }
}

父选择器标识符&

大多数情况下的嵌套都是没有问题的，但是有些场景下不行，比如你想在嵌套的选择器里面立刻应用一个类似于:hover的伪类。Scss提供了一个特殊的结构 & 来解决。

scss在解开一个嵌套规则时会把父选择器（#content）通过一个空格连接到子选择器（article和aside）前面形成（#content article和#content aside）：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}
// 编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

但是，当你为链接之类的元素写: hover这种伪类时，你并不希望 Scss 以后代选择器的方式连接。比如：

article a {
  color: blue;
  :hover { color: red }
}
// 编译后
article a { color: blue }
article a :hover { color: red } // 通过空格连接
// 这段代码意味着 article 选择器所有超链接子元素在被 hover 的时候都会变红，这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

解决方法：使用 & 父选择器符号，当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是 & 被父选择器直接替换。

article a {
  color: blue;
  &:hover { color: red }
}

// 编译后
article a { color: blue }
article a:hover { color: red }

群组选择器嵌套

css 的写法：

.container h1, .container h2, .container h3 { margin-bottom: .8em }

scss的写法

.container {
    h1, h2, h3 {margin-bottom: .8em}
}

属性嵌套

css写法：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

scss 写法

nav {
    border {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

混合器

如果出现大段的重复样式的代码，使用混合器是一种不错的选择。混合器使用@minxin标识符来定义，这个标识符可以给一段样式命名一个名字，你可以通过引用这个名字复用这段样式，再通过@include使用这个混合器，eg:

@minxin word-size{
    font-size: 12px;
    color: red
}

.content{
    width:100px;
    @include word-size
}

没想到Scss这么简单