关于sass/scss的引用和使用

在最近的项目中，配合vue，为了让css语言更加易懂好写，我使用了scss，包括在上一篇文章中提到了运用scss来做px2rem的转换，scss是一种css的预处理语言，这里总结他的引用和使用方法，有做新的东西也会及时更新。

首先我们先来看看scss和sass的区别：

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

安装和引入

项目中我们很自然而然地选择scss，首先是在vue中安装scss

npm下载：

npm install -D sass-loader node-sass

然后引入~，这里我们用vue-cli3，所以十分方便，开箱即用。只需要在<style>里面lang="scss"就可以啦~

<style lang="scss">

div{

color:red;

span{

color:green;

}

}

</style>

如果要引入外联的样式，在main.js中import就好

import './assets/css/my-style.scss'

或者在内联的css中进入scss，如下操作：

<style lang="scss">

@import './test.scss'; //导入外部scss文件

.myText {

border:1px solid red;

}

</style>

使用tips

介绍一篇很棒的tips，scss使用

首先我用得最多的应该是他的嵌套选择器功能~，写起来比普通css舒服太多=-=

另外关于全局变量和局部变量，以下需要注意的tips：

默认变量

默认变量只需要在变量值后加上 !default , 用来设置默认值，对默认变量进行重新声明可以实现覆盖默认值；如

$color:red !default; //声明默认变量 $color

$color:purple; //根据需求覆盖默认变量

.father01 {

color:$color;

}

区分全局变量和局部变量

全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；

$height:200px; //全局变量声明不在大花括号内

$bgcolor:blue;

body {

   .father01 { //嵌套

      width:$width;

      height:$height;

      $border:1px solid red; //局部变量是声明在元素内的

      border: $border;

      $bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖

      background-color: $bgcolor;

   }

}

局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

继承

继承 .class 使用 @extend

.container {

color:purple;

border:2px dashed purple;

}

.myText {

@extend .container; //这里将继承.container类的所有样式

font-size: 22px;

}

·使用@function 自定义函数及使用

@function double($sn){ //SCSS允许自定义函数

@return $sn*2;

}

.myText {

border:1px solid red;

width:double(200px); //使用在SCSS中自定义的函数

}