在VUE项目中使用SCSS，从安装步骤到语法说明，带你快速入门！！_scss @function

最近在做VUE项目时用到了SCSS ，在这里总结一下SCSS在项目中是如何使用的。

首先要了解什么是SCSS？

SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS。

SCSS和SASS 有什么区别？

• sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似。
• scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟。

vue项目上安装SCSS

• 使用vue-cli模板创建新项目：vue init webpack myvue
• 安装sass 依赖包 ，在cmd界面输入：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev
1
2

• 在 build 文件夹下的 webpack.base.conf.js 的 rules 里面添加配置：

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}
1
2
3
4

• 使用scss的时候在所在的style样式标签上添加 lang=”scss” 即可应用对应的语法，否则会报错！
• scss使用测试：修改字体颜色

<style lang="scss">
	$color:red;
	div {color:$color;}
</style>
1
2
3
4

SCSS使用语法

注释

• /* */ css中显示。
• // css中不显示。
• /* 重要注释 ！*/ 压缩不会被删掉。

@import 导入

<style lang="scss">
@import './test.scss'; /*导入外部scss文件*/
.myText {
   border:1px solid red;
}
</style>
1
2
3
4
5
6

变量

声明变量的语法是：$变量名：变量值；

$color:red; /*声明变量 $color*/
1

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

$color:red !default; /*声明默认变量 $color*/
$color:purple; /*根据需求覆盖默认变量*/
.father01 {
   color:$color;
}
1
2
3
4
5

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

$height:200px; /*全局变量*/
$bgcolor:blue;
body {
   .fat {  
      height:$height;
      $border:1px solid red; /*局部变量*/
      $bgcolor:purple; /*全局变量和局部变量名一致时，调用局部变量进行覆盖*/
      background-color: $bgcolor;
   }
}
1
2
3
4
5
6
7
8
9
10

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

body {
   .fat1 {
      width:200px;
      height:200px;
      $border:1px solid red !global; /*使用global关键词将$border变为了全局变量*/
      border:$border;
   }
   .fat2 {
      width: 300px;
      height:300px;
      border:$border; /*使用全局变量*/
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

变量插值 ，即字符串插值，需要使用 #{} 来进行包裹。

$name: foo;
$attr: border;
p.#{$name} {
  	#{$attr}-color: blue;
}
p {
  	$font-size: 12px;
  	$line-height: 30px;
  	font: #{$font-size}/#{$line-height};
}
1
2
3
4
5
6
7
8
9
10

嵌套

• 选择器嵌套：

#id {
    color: red;
    .name {
        color: blue;
        .child {
            color: yellow;
        }
    }
}
1
2
3
4
5
6
7
8
9

• 属性嵌套（有相同属性前缀）：

.attr {
    font: {
        family: fantasy;
        size: 1.2em;
        line-hight: 1.4;
    };
    border: {
        radius: 20px;
        color: blue;
    };
}
1
2
3
4
5
6
7
8
9
10
11

• 在嵌套时候可以使用 & 来引用父元素。

.btn {
    background-color: #fff;
    &.active {
        background-color: red;
    }
    &:hover {
        background-color: blue;
    }
}
1
2
3
4
5
6
7
8
9

数学运算

#id {
    font: (1 + 2) *3px;  	/*font:9px*/
  	$width: 1000px;
 	width: $width/2;    	/*width: 500px;*/      
  	width: round(1.5px)/2; 	/*width: 1px;*/
  	height: (500px/2);      /*height: 250px;*/ 
  	margin-left: 5px + 8px/2px; 	/*margin-left: 9px;*/
  	padding-left: + 100px / 2;  	/*padding-left: 50px;*/
  	color: #001100 + #040506;		/*color: #041606;*/
}

1
2
3
4
5
6
7
8
9
10
11

注意：scss为了兼容IE8，8px/2px 中的 / 不能编译为除法运算符，可以在除法运算前使用 + 运算符创建命名空间。

继承

继承 .class 使用 @extend

.container {
   	color:purple;
   	border:2px dashed purple;
}
.myText {
   	@extend .container; /*这里将继承.container类的所有样式*/
   	font-size: 22px;
}
1
2
3
4
5
6
7
8

使用 % 声明的代码块，如果不被 @extend 调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

%m5 { background-color: lightblue;}
.P1 { @extend %m5; }
1
2

@mixin + @include

使用混合 @mixin 命令定义可重复使用的代码块，并且使用 @include 命令引用@mixin定义的代码块。

@mixin normalStyle {
   width:300px;
   height:100px;
   color:black;
   background-color:lightblue;
}
.container {
   @include normalStyle;
}
1
2
3
4
5
6
7
8
9

在使用 @mixin 和 @include 时，可以传入参数和默认值。

@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
   width:$width;
   height:$height;
   color:$color;
   background-color:$defaultValue;
}
.container {
   @include normalStyle(300px,100px,green,lightgray);
}
1
2
3
4
5
6
7
8
9

@function 自定义函数

SCSS允许使用 @function 自定义函数并且使用。

@function double($sn){
   	@return $sn*2;
}
.myText {
   	border:1px solid red;
   	width:double(200px); 
}
1
2
3
4
5
6
7

颜色函数

我们可以直接使用 lighten()、darken()等SCSS内置的颜色函数。

.myText {
   color:black;
   &:hover{
      color:lighten(#cc3, 10%); 	/*#d6d65c颜色变浅*/
      color:darken(#cc3, 10%);		/*#a3a329颜色加深*/
      color:grayscale(#cc3); 		/*#d6d65c*/
      color:complement(#cc3);		/*#a3a329*/
   }
}
1
2
3
4
5
6
7
8
9

SCSS流程控制指令

if 条件语句

$type: monster;
p {
  	@if $type == ocean {
    	color: blue;
  	} @else if $type == monster {
    	color: green;
  	} @else {
    	color: black;
  	}
}
1
2
3
4
5
6
7
8
9
10

for 循环

在sass中的@for循环有两种方式：

• @for $i from < start> through < end>
• @for $i from < start> to < end>

其中 $i 表示变量，start 表示开始值，end 表示结束值；through 表示包括 end 这个数值；to 表示不包括 end 这个数值；

@for $i from 1 through 3 {
 	.item-#{$i} { width: 2em * $i; }
}
1
2
3

while循环

只要 @while 后面的条件为 true 就会执行，直到表达式值为 false 时停止循环；

$i: 6;
@while $i > 0 {
  	.item-#{$i} { width: 2em * $i; }
  	$i: $i - 2;
  	/*这里可以对$i进行运算，让它每次都减去2*/
}
1
2
3
4
5
6

each in循环

就是去遍历一个列表，然后从列表中取出对用值；指令形式为：@each $var in <list>，($var为变量值，list为sassscript表达式）。

@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}//会编译成 .class01 , .class02 {background-color:purple;}
1
2
3
4
5