SCSS 入门

1. 入门就是demo

I hear and I forget，
I see and I remember，
I do and I understand！

2. 用SCSS语法做两个炫酷按钮

SCSS（SASS）就是高级的CSS，即在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能

SASS文档

// html文件
<div class="buttonWrapper">
  <button>第一个按钮</button>
  <button>第二个按钮</button>
</div>

备注是SCSS语法和CSS语法不同的地方：

// scss 语法
*{
  margin: 0; padding: 0;
  box-sizing: border-box;
}
body{
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

@mixin buttonWithShadow($color){  // 混合，可通过 @mixin 引入函数
  background: $color;	// 通过 @include buttonWithShadow($blue) 使用函数
  box-shadow: 0px 5px 0px 0px darken($color, 15%); 
}  // darken($color, 15%)将$color颜色加深15%

.buttonWrapper{
  button{    // 嵌套选择器写法
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 4px;
    border: none;
    color: white;
    margin: 0 40px;
      
    &:first-child{   // & 指向当前父选择器
      $blue: #55ACEE;   // 定义变量，方便修改
      @include buttonWithShadow($blue);
      &:hover{
        animation-duration: 0.5s;
        animation-name: x;
      }
    }
    
    &:nth-child(2){
      $green:#2ECC71;
      @include buttonWithShadow($green);
      &:hover{
        animation-duration: 0.5s;
        animation-name: y;
      }
    }
  }
}
$n: 10%;
$step: 25%;
@keyframes x {
  @for $i from 0 to 4 {   // SCSS的编程实现动画帧
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateX(-$n);
      }@else{
        transform: translateX($n);
      }
    }
  }
  100% {
    transform: translateX(0);
  }
}

$n2: 20%;
@keyframes y {
  @for $i from 0 to 4 { 
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateY(-$n2);
      }@else{
        transform: translateY($n2);
      }
    }
  }
  100% {
    transform: translateY(0);
  }
}

再介绍下SCSS的占位符：%
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
它可以取代以前 CSS 中的基类造成的代码冗余的情形。

%button{
	color: red;
}
div{
	%button;
}
// 编译为CSS就是
div{
	color: red;
}

3. 将SCSS文件转成CSS文件

• parcel工具（或webpack工具）+命令行
• 百度：SCSS转CSS的在线网址