Sass 常规操作知识点(及引入 .scss文件方法)

变量：

-   使用 `$符号＋名称` 可以定义变量 变量里可以使用另外一个变量
    定义语法: $变量名称: 变量值;
	使用语法: $变量名称	
	可以将常用的或者公共的样式写成变量，方便复用。

    <template>
	  <div id="main">
	    <div class="content1">sass 变量</div>
	  </div>
	</template>
	
	<style lang="scss" scoped>
		$bg-color: red;
		$text-color: #fff;
		#main {
   
		  background: rgba($bg-color, 0.6);
		  color: $text-color;
		}
	</style>

---

嵌套：

-  嵌套写法
   效果和css写法类同
   在写伪元素和选中样式的时候需要添加 `& 符号`链接，不然编译的时候会识别不到

ul {
   
        li{
   
            list-style: none;
            &.list {
   
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #000;
                padding: 0 10px;
                font-size: 16px;
                color: red;
                 &.on,&:hover{
   
                    background-color: red;
                    color: #333;
                }
            }
        }
    }

-  引用父选择器
   套时调用父类选择器

//sass写法
.nav{
   
    height: 100px;
    &  &-item{
   
        font-size: 10px;
    }
}
//编译成css
.nav .nav-item{
   
  font-size: 10px;
}

-  嵌套属性
   对于同一个选择器下，相同的属性名称，可以提取出来

//sass写法
.nav{
   
    border:1px so