scss教程

前言

传统的css文件需要书写的重复的代码很多，不存在变量函数等概念，这时可以使用css的预编译利器scss来简化我们的代码，提高开发效率。

1.安装

yarn add sass
复制代码

在项目工程下安装sass，在vue文件的style标签上写lang=”scss”即可使用

2.使用变量

$border-color:#aaa; //声明变量
$border_color:#ccc;
.container {
    $border-width:1px;
    border:$border-width solid $border-color; //使用变量
}
//编译后的CSS
.container {
    border:1px solid #ccc; //使用变量
}
复制代码

• 上述例子中定义了两个变量$border-width，$border-color。$border-color在大括号之外，称之为全局变量，在整个scss文件的任何地方都能用。$border-width是局部变量，只有.container内部才能使用。

• 变量名使用中划线或下划线都是指向同一变量的

• 后定义的变量声明会被忽略，但赋值会被执行，这一点和ES5中var声明变量是一样的。

3.父级元素、嵌套组合选择器

SCSS提供了一个选择器可以选中当前元素的父元素，使用&表示

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为css
#main {color: black; }
#main-sidebar { border: 1px solid; }
复制代码

除标签名可以使用外，也适用于伪元素

.container{
    &::after {
        display:block;
        content:"";
        clear:both;
    }
}
编译为css
.container::after {
    display:block;
    content:"";
    clear:both;
}
复制代码

嵌套规则中可以写任何css代码，包括群组选择器（,），子代选择器（>），同层相邻组合选择器（+）、同层全体组合选择器（~）等等

例如子代选择器

li > a{ 
        display:inline-block;
        padding:6px 12px;
}
可以写成
li >{ 
    a {
        display:inline-block;
        padding:6px 12px;
    }
}

或者
li { 
    >a {
        display:inline-block;
        padding:6px 12px;
    }
}
复制代码

嵌套属性，在scss中，不光选择器可以选择嵌套，属性也可嵌套使用

li {
    border:1px solid #aaa {
        left:0;
        right:0;
    }
}

编译后
li {
    border:1px solid #aaa;
    border-left:0;
    border-right:0;
}
复制代码

4.@import导入SCSS文件

在css中可以使用@import命令在css内部引入另一个css文件，浏览器只有在执行到@import语句后才会去加载对应的css文件，导致页面性能变差，故基本不使用。

SCSS的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

/*test1.scss*/
$border-color:#aaa; //声明变量
@import test2.scss;  //引入另一个SCSS文件
.container {
    border:1px solid $border-color; //使用变量
}
/*test2.scss*/
$border-color:#ccc; //声明变量

/*生成的test1的css文件*/
.container {
    border:1px solid #ccc; //使用变量
}
复制代码

从例子可以看出引入的scss文件会覆盖本scss文件原先定义的属性，这可能不能满足我们一些实用场景，这时候我们可以使用!default。

/*test1.scss*/
$border-color:#aaa; //声明变量
@import test2.scss;  //引入另一个SCSS文件
.container {
    border:1px solid $border-color; //使用变量
}
/*test2.scss*/
$border-color:#ccc !default; //声明变量

/*生成的test1的css文件*/
.container {
    border:1px solid #aaa; //使用变量
}
复制代码

当test1文件中没有$border-color变量值的时候，才会使用引入的scss文件中使用!default兜底的默认值。

5.@mixin混合器（函数）结合@include使用

使用@mixin指令声明一个函数，当css代码中有重复的代码片段都可以考虑使用混合器将他们提取出来复用。

@mixin get-border-radius($border-radius:5px,$color:red, $size:null){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
  	font-size:$size
}
复制代码

get-border-radius函数不传参时，默认赋值$border-radius变量5px，$color变量red,$size默认设置为null,即调用此函数可不传入$size值，font-size会默认不展示。

使用函数的关键字为@include

.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius($color:blue,$border-radius:10px);   //传参
}
编译为css文件
.container {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color:red;
}
复制代码

6.@extend继承

使用%定义一个被继承的样式

%border-style {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

使用@extend可以继承公共样式%border-style，也可以继承另一个类选择器

.container {
	@extend %border-style;
}

.container1 {   //继承另一个选择器
	@extend .container;
}
复制代码

7.@mixin混合与@extend继承的区别

混合编译为CSS后，会在每个引入混合样式的选择器下插入样式，而继承则是把继承的选择器加入到共有的样式选择器前，不会被编译到 CSS 文件中。

混合@mixin：

@mixin border-style {
  border:1px solid red;
}
.container {
	@include %border-style;
}
.test {
	@include %border-style;
}

编译后
.container {
	 border:1px solid red;
     border-radius: 5px;
}
.test {
	 border:1px solid red;
     border-radius: 5px;
}
复制代码

继承@extend：

%border-style {
  border:1px solid red;
}
.container {
	@extend %border-style;
}
.test {
	@extend %border-style;
}
编译后
.container, .test {
	 border:1px solid red;
     border-radius: 5px;
}
复制代码

8.#{} 插值语句

可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
编译后
p.foo {
   border-color: blue;
}
复制代码

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译后
p:before {
  content: "I ate 15 pies!";
}
复制代码

在calc()函数中使用变量

&.test >span{
    left:calc(100% - #{$h2} - 2px);
}
复制代码