SCSS基础

一、什么是scss和sass

scss和sass是一样的css预处理语言，
scss是sass3引入的新的语法。
其后缀名分别是.sass和.scss两种
两者也有不同
继sass之后scss的编写规范基本和css一样。
sass时代是有严格的缩进规范并且没有‘｛｝’和’;'的
而scss和css的规范一致。
所以用scss。

二、SCSS的变量

/*scss的变量是以$开头的。*/
$hight-color :red;

/*也能连写*/
$base-border:1px solid balck;

/*使用*/
#app{
    background:$hight-color;
    border:$base-border;
}

三、SCSS的作用域

向上面定义的叫全局，任何元素都能使用，而在元素内部定的变量只能元素内部使用

#app{
  $hight-color :red;
  background:$hight-color;
  #a{
}
}

/*其他元素不能使用$hight-color这个变量了*/

四、scss也支持嵌套写法

#app{
  $hight-color :red;
  background:$hight-color;
  #a{
}
}

五、&符号父选择器

对某个特点的子元素进行控制时

a {
  color:red；
  &：hover{
  color:black;
}
}
/*要是不写&，就会变成
a :hover   中间多个空格。*/