Scss语法

1、定义和使用变量

$primary-color: #333;
$secondary-color: #666;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

h1 {
  color: $secondary-color;
}

2、全局变量

body {
  $secondary-color: #666 !global;
  color: $secondary-color;
}

h1 {
  color: $secondary-color; // 现在可以访问 $secondary-color
}

3、deep写法

<!-- scss写法 -->
::v-deep .a{

}

<!-- less写法 -->
/deep/ .a {
  
}

4、定义和使用混合宏

使用 @mixin 来定义混合宏，并使用 @include 来调用混合宏。

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

5、带参数的混合宏

$blue: #324157;
$light-blue: #3A71A8;

@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.blue-btn {
  @include colorBtn($blue)
}

.light-blue-btn {
  @include colorBtn($light-blue)
}

6、继承（@extend）

.button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
}

.primary-button {
  @extend .button;
  background-color: #3498db;
  color: #fff;
}

.secondary-button {
  @extend .button;
  background-color: #2ecc71;
  color: #fff;
}

7、占位选择器

占位选择器以 % 符号开头，只有在被继承时才会生成CSS代码。

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}

<!-- 编译后 -->
.success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

8、运算

示例：数值运算

$base-padding: 10px;
$double-padding: $base-padding * 2;
$half-padding: $base-padding / 2;

.container {
  padding: $double-padding $half-padding;
}

示例：颜色运算

<!-- lighten和darken为内置函数 -->
$base-color: #3498db;
$light-color: lighten($base-color, 20%);
$dark-color: darken($base-color, 20%);

.button {
  background-color: $base-color;
  border-color: $dark-color;

  &:hover {
    background-color: $light-color;
  }
}

9、自定义函数

@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

.container {
  font-size: px-to-rem(18px);
}

<!-- 编译后 -->
.container {
  font-size: 1.125rem;
}