SCSS处理的了解和使用

首先了解sass和scss是什么关系？

• sass和scss其实是**一样的**css预处理语言，scss 是 sass 3 引入新的语法，其后缀名是分别为
• .sass和.scss两种； sass版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss；
• 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’；
• 而scss则和css的规范是一致的。

了解变量

1.sass使用$符号来标识变量

$highlight-color: #f90   

上面我们声明了一个 名为**$highlight-color**的变量, 我们可以把该变量用在任何位置

#app {
    background-color:  $highlight-color;
} 

以空格分割的多属性值也可以标识变量

$basic-border: 1px solid black;

#app {
    background-color:  $highlight-color;
    border: $basic-border
}     

2.变量范围
sass与css属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（或@media或者@font-face块，情况也是如此）：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}

上述例子中$nav-color定义在nav规则块外边，所以其他需要引用该样式的规则块都可以同样引用；
而$width这个变量定义在nav的{ }规则块内部，所以它只能在nav规则块内使用，如果想要在其他地方使用$width变量，可以重新定义，不会对这里造成影响。

3.嵌套语法

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }
  
  转化后
  
  #content article h1 {
  color: #1dc08a;
}

#content article p {
  font-style: italic;
}

#content aside {
  background-color: #f90;
}

4.父选择器

  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }

总结：scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名