Sass学习笔记

一、安装Sass

使用如下命令安装

npm install sass -D

-D表示安装到开发环境下，因为生产环境不需要。

二、语法规则

1、使用变量

Sass使用$符号来标识变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

<style scoped lang="scss">
$color: red;
#container{
  $width: 200px;
  height: 200px;
  width: $width; // 使用变量， 局部变量
  background-color: $color; // 使用变量，全局变量
}
</style>

2、嵌套CSS规则

例子

#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的伪类。为了解决这种以及其他情况，Sass提供了一个特殊结构&。

<template>
  <div id="container">
    <input />
     <a>超链接</a>
  </div>
</template>

<style scoped lang="scss">
$color: red;
#container{
  width: 200px;
  height: 200px;
  & a:hover{ // & 表示父级 也就是#container 当鼠标放在a标签上时，a标签的颜色变为$color
    color: $color;
  }
}
</style>

3、嵌套属性

<template>
  <div id="container">
  </div>
</template>

<style scoped lang="scss">
#container{
  width: 50px;
  height: 50px;
  // border: 1px solid red;
  border: {
    color: red;
    style: solid;
  }
}
</style>

4、插值语句

通过 #{}插值语句可以在选择器或属性名中使用变量

<template>
  <div class="container">
    <div class="child">hello</div>
  </div>
</template>

<style scoped lang="scss">
$name: child;
$attr: border;
.container {
  width: 50px;
  height: 50px;
  .#{$name} {
    #{$attr} {
      color: red;
      border: 1px;
    }
  }
}
</style>