剑指这几个知识点，玩转Sass

初次上手学习sass 难免迷茫，其实重点的知识点并不多，也就那几个高频使用的，学习思路依旧不变

复杂的事情简单做，简单的事情简单做

涉及知识点

• 变量
• 嵌套
• 函数
• 插值语句
• @import 导入
• @extend 继承
• 控制指令
• 混合指令
• 函数指令

开始学习之前，当然是打开我钟爱的vscode编辑器啦 (废话了，还用你说），安装sass插件 Live Sass Complier 安装完毕后点击下图的 Watch Sass

就这样简单粗暴就可以开始了（别净整些没用的，粗鲁点）

一、变量

• 声明

$color: #f00;   不要太简单哦

关于作用域，在{}内的就是局部，其它的都是全局 ， 要让局部变全局加 !global

二、嵌套

顾名思义一层层套，就是规则

#section h1 {
    padding: 12px;
    font-size: 20px;
    .mark {
        background: #f90342;
        color: #fff;
    }
}

这里要注意的是，当我们要实现 + ，> , ~ 等编译时，应借助 &

#section h1 {
    padding: 12px;
    font-size: 20px;
    & >.mark {
        background: #f90342;
        color: #fff;
    }
}

• 属性嵌套 按规则来

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

三、函数

sass 提供了一大堆的内置函数，去看看那几个常用的函数就好了
调用方式和js函数调用方式一样 ， 函数名(实参)， sass提供接受关键词参数，目的就是用来解决参数位置问题

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

虽说提供关键词，但不能随意取名，得按规矩来，否则你懂的

四、插值语句

用来插入变量的值，如下所示

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

五、@import 导入

在当前的sass文件中导入其他的 sass或scss文件， 默认取scss或sass文件，要导入 css文件 得按规则来 （懒得记）

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。
  @import 嵌套 按照嵌套规则来，问题不大，就算出错了，watch同步编译可以看出来的，不用过于担心

六、@extend 继承

继承本质就是共享（我的果汁分你一半，口误，是我的果汁给你喝，看剑）

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

这里要注意的就是延伸概念 ，seriousError 会继承与error相关的样式

七、控制指令

• @if
  条件成立添加样式，不成立则不添加
• @if…@else if
  多条件判断
• @for 循环啦
  这里要注意 through 和 to 的区别 （to 只包括 start 不包括 end）
  直接看官方的栗子

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

• @each 循环列表
  循环列表，列表可以以逗号或空格分隔开
  直接看官方的栗子

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

• @while
  直接看官方的栗子

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

八、混合指令

• @mixin 定义混合器
  顾名思义混入合并，看官方栗子

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

注意mixin 也是可以添加参数的

• @include 引用
  导入混合器，合并样式，看官方的栗子（抄个规则而已）

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

九、函数指令

就像写js中的函数一样，看官方栗子

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

就这么粗糙的过了一遍sass，其实已经可以开始实践了，细小琐碎的东西，在实践中慢慢补

实践一

先看效果

$s: 6em;   // 定义一个变量
$colors: #3ec3f8, #faa60b, #0bfa0b;   // 定义一个数组类型

*, *:before, *:after {
    box-sizing: border-box;
}

// 定义盒子居中混合器
@mixin cbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@mixin fbox{
    @include cbox;
    width: 100%;
    height: 100%;
}
@mixin bbox ($col){
    border: 1px solid $col;
    box-shadow: 0 0 12px 1px $col;
}
body {
    background: #333;
}

.container {
    @include cbox;
    transform-style: preserve-3d;
    perspective: 2000px;
    transform: rotateX(-30deg) rotateY(-45deg);
}
.holder {
    @include cbox;
    transform-style: preserve-3d;
    transform: translate3d(0, $s, $s*.5);
    &:first-child {
        transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, $s, $s*.5);
    }
    &:last-child {
        transform: rotateY(-90deg) rotateX(90deg) translate3d(0,$s, $s*.5);
    }
    // 循环处理3个box的边框样式
    @for $i from 1 through 3 {
        $color: nth($colors, $i);
        &:nth-child(#{$i}){
            .box {
                @include bbox($color);
                background: rgba($color, .2);
                &::before {
                    @include bbox($color);
                    background: rgba($color, .2);
                }
                &::after {
                    @include bbox($color);
                    background: rgba($color, .2);
                }
            }
        }
    }
}

.box {
    @include cbox;
    transform-style: preserve-3d;
    animation: ani-box 6s infinite;
    width: $s;
    height: $s;
    /*构建可视的三个面*/
    &::before, &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
    }
    &::before {
        left: 100%;
        bottom: 0;
        transform: rotateY(90deg);
        transform-origin: 0 50%;
    }
    &::after {
        left: 0;
        bottom: 100%;
        transform: rotateX(90deg);
        transform-origin: 0 100%;
    }
}
// 定义盒子动画
@keyframes ani-box{
	8.33%{
		transform: translate3d(-50%,-50%,0) scaleZ(2);
	}
	16.7%{
		transform: translate3d(-50%,-50%,-$s) scaleZ(1);
	}
	25%{
		transform: translate3d(-50%,-100%,-$s) scaleY(2);
	}
	33.3%{
		transform: translate3d(-50%,-150%,-$s) scaleY(1);
	}
	41.7%{
		transform: translate3d(-100%,-150%,-$s) scaleX(2);
	}
	50%{
		transform: translate3d(-150%,-150%,-$s) scaleX(1);
	}
	58.3%{
		transform: translate3d(-150%,-150%, 0) scaleZ(2);
	}
	66.7%{
		transform: translate3d(-150%,-150%,0) scaleZ(1);
	}
	75%{
		transform: translate3d(-150%,-100%,0) scaleY(2);
	}
	83.3%{
		transform: translate3d(-150%,-50%,0) scaleY(1);
	}
	91.7%{
		transform: translate3d(-100%,-50%,0) scaleX(2);
	}
	100%{
		transform: translate3d(-50%,-50%,0) scaleX(1);
	}
}

实践二

效果如下

html {
  min-height: 100%;
}

body {
  background-image: -webkit-radial-gradient(circle, #212c39, #0c1014 40%);
  background-image: radial-gradient(circle, #212c39, #0c1014 40%);
 }

.element-wrapper {
  // 居中并构建立体空间
  position: fixed;
  transform: perspective(300px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.element {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
}

@-webkit-keyframes translateIn {
  30% {
    -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translateZ(20px) scale(0.95);
    opacity: 0.25;
  }
  100% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) translateZ(0px) scale(0.85);
    opacity: 0;
  }
}

@keyframes translateIn {
  30% {
    -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translateZ(20px) scale(0.95);
    transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translateZ(20px) scale(0.95);
    opacity: 0.25;
  }
  100% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) translateZ(0px) scale(0.85);
    transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) translateZ(0px) scale(0.85);
    opacity: 0;
  }
}

.element {
  opacity: 0;
  &:nth-of-type(1) {
    -webkit-transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(90px);
    transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(90px);
    -webkit-animation: translateIn 1.5s ease-in infinite 500ms;
    animation: translateIn 1.5s ease-in infinite 500ms;
  }
  &:nth-of-type(2) {
    -webkit-transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(1200px);
    transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(120px);
    -webkit-animation: translateIn 1.5s ease-in infinite 700ms;
    animation: translateIn 1.5s ease-in infinite 700ms;
  }
  &:nth-of-type(3) {
    -webkit-transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(150px);
    transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(150px);
    -webkit-animation: translateIn 1.5s ease-in infinite 800ms;
    animation: translateIn 1.5s ease-in infinite 800ms;
  }
}

@-webkit-keyframes scaleIn {
  80% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1.25);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1);
    opacity: 0;
  }
}

@keyframes scaleIn {
  80% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1.25);
    transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1.25);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1);
    transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1);
    opacity: 0;
  }
}

.large-square {
  width: 140px;
  height: 140px;
  background: #fff;
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 50%;
  margin-top: -70px;
  -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg)scale(0);
  transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) scale(0);
  opacity: 0;
  -webkit-animation: scaleIn 3s linear infinite 500ms;
  animation: scaleIn 3s linear infinite 500ms;
}