vue中的sass使用

1.在vue的组件中使用sass时，style的设置

　　

<style lang="scss" scoped></style>

2.变量设置

$a-color:#fff;
a{
　　color:$a-color;
}

3.父级嵌套

　　

<style scoped lang="scss">
  $b-color:red;
  $a-color:#4021ad;
  #content{
    article{
      h1 {color: $a-color}
      p{
        margin-bottom: 1.4em;
      }
    }
    aside{
      background-color:$b-color;
      color: $a-color;
    }
  }
 a{
 
   color:$a-color;
 }
</style>

4.父选择器的标识符 & ；

$b-color:red;
  $a-color:#4021ad;
  #content{
    article{
      h1 {color: $a-color}
      p{
        margin-bottom: 1.4em;
      }
      &:hover{
        color:$b-color;
        font-size: 22px;
      }
    }
    aside{
      background-color:$b-color;
      color: $a-color;
    }
  }

5.群组选择器的嵌套

css: #content h1 ,#content h2 ,#content h3{
   margin:2em; 
} 

scss: #content{
   h1,h2,h3{
   margin:2em; 
}   
}

css: article h1 ,aside h1{
   ...  
}

sass: artice,aside h1{
  ...  
}

 article{
      ~ article{
        color: $a-color;
      }
      > section{
        background-color:$a-color;
      }
      p{
        margin-bottom: 1.4em;
      }
      
    }

6.属性的嵌套

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

css: nav{
 border:1px solid #ccc;
border-left:0px;
border-right:0px;
}

scss : nav{
  border:1px solid #ccc {
  left:0px;
  right:0px;   
}
} 注:此方式在vue-cli里报错;

aside{
color: $a-color;
border:{
style: solid;
width: 1px;
color: #f80;
left: 0px;
right: 0px;
}
}
此方式有效

 

7.使用SASS部分文件

　　sass局部文件的文件名以下划线开头

　　　　导入themes/_night-sky.scss  

　　　　

@import "themes/night-sky"

8.默认变量值