一、Scss 变量

1、变量使用

  在 scss 语法中，变量定义要放在最前面，$border-color和 $border_color是一个意思。

/* 定义 */
$color: #f00;
$border-color: #f2f2f2;

/* 使用 */
.container {
  color: $color;
  border-color: $border-color;
}

/* 定义 */
:root {
  --color: #f00;
  --border-color: #f2f2f2;
}

/* 使用 */
.container {
  color: var(--color);
  border-color: var(--border-color);
}

2、变量范围

  定义在选择器外的是全局变量，定义在选择器内的是局部变量。

// 全局变量
$primary-color: #3498db;

body {
  background-color: $primary-color;
}

.header {
  color: $primary-color;
}

body {
  background-color: $primary-color !global; // 表示定义的是全局变量（不建议使用）
}

.header {
  color: $primary-color;
}

.card {
  // 局部变量
  $card-bg-color: #ecf0f1;

  background-color: $card-bg-color;

  .card-title {
    // 可以访问外层的局部变量
    color: $card-bg-color;
  }
}

3、变量默认值

  变量默认值可以实现：在不同的地方使用相同的变量，但根据需要在不同的地方提供不同的值

• _variables.scss

$primary-color: #3498db !default;

.container {
  border-color: $color;
}

• _page1.scss

// 引入变量文件
@import 'variables';

// 在页面1中覆盖主题颜色
$primary-color: #e74c3c;

.container {
  border-color: $color;
}

• _page2.scss

// 引入变量文件
@import 'variables';

// 在页面2中使用默认主题颜色
body {
  background-color: $primary-color;
}

4、变量类型 ✨

  其实到现在我们已经可以感受到 sass 是一种类编程语言。所以它相较于 css，可以支持更多的数据类型（maps、数据、空值、布尔值等等）。

$font-size: 16;
$line-height: 1.5;

body {
  font-size: $font-size;
  line-height: $line-height;
}

$font-family: 'Helvetica, Arial, sans-serif';
$prefix: 'user-';

body {
  font-family: $font-family;
}

.$prefix-profile {
  font-size: 16px;
  color: #3498db;
}

$primary-color: #3498db;
$background-color: rgba(255, 255, 255, 0.8);

body {
  background-color: $background-color;
}

$is-dark-theme: true;
$is-mobile: false;

body {
  color: $is-dark-theme ? #fff : #333;

  @if $is-mobile {
    background-color: #f0f0f0;
  } @else {
    background-color: #fff;
  }
}

$colors: (#3498db, #e74c3c, #2ecc71);

.footer {
  // 使用列表类型
  border-color: nth($colors, 2);
}

$font-sizes: (
  small: 12px,
  medium: 16px,
  large: 20px
);

.header {
  font-size: map-get($font-sizes, medium);
}

$no-value: null;

.header {
  border: $no-value; // 使用 null 类型
}

6、插值语法

  插值语句可以应用在选择器、属性名、属性值、注释等等上。

$class-name: danger; // ② 选择器
$attr: color; // ③ 属性名
$author: '任先生' // ④ 注释
  /*
  @author: #{$author}
*/ a.#{$class-name} {
  border-#{$attr}: #f00;
}

二、Scss 嵌套

1、选择器嵌套

.container {
  width: 1200px;
  margin: 0 auto;

  a {
    color: #333;

    &:hover {
      text-decoration: underline;
      color: #f00;
    }

    .top {
      border: 1px #2f2f2f solid;

      // & 代表父选择器
      &-left {
        float: left;
        width: 200px;
      }
    }
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
}
.container a {
  color: #333;
}
.container a:hover {
  text-decoration: underline;
  color: red;
}
.container a .top {
  border: 1px #2f2f2f solid;
}
.container a .top-left {
  float: left;
  width: 200px;
}

2、属性嵌套

.container {
  width: 1200px;
  margin: 0 auto;

  a {
    color: #333;
    // 属性嵌套
    font: {
      size: 14px;
      family: sans-serif;
      weight: bold;
    }
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
}
.container a {
  color: #333;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
}

三、@import 导入

提示

  现在官网更加推荐使用 具有命名空间功能 的 @use (opens new window) 代替 @import (opens new window)

1、导入方式

• 样式目录

styles/
|-- _index.scss
|-- variables/
|   |-- _colors.scss
|   |-- _typography.scss
|-- components/
|   |-- _buttons.scss
|   |-- _forms.scss
|-- main.scss

• scss 中的@import

@import 'styles';

@import 'variables/colors';
@import 'variables/typography';
@import 'components/buttons';
@import 'components/forms';

2、css 与 scss ✨

  在 scss 中不要使用：

@import 'public.css'; // 会被当做css导入，不会编译 ✖
@import 'https://example.com/styles.css'; // import远程的url样式表，在scss是不支持的 ✖

  而在 css 中也不可以：

@import url(public); // 直接使用filename是scss中的功能，在css中是没有自动识别文件功能 ✖

3、Partial 文件

  在 SCSS 中，文件名前加下划线（_）的文件通常被称为部分文件（Partial Files）。

  这些以_开头的文件通常作为一个局部样式或变量的存储地点，可以被其他 SCSS 文件引用，但不会被编译为 css 文件。

_public.scss和public.scss文件在引入时，会被看做一个文件

@import 'public'; // 相当于引入了_public.scss 或 public.scss 文件

4、路由别名处理

  在项目中，如果我们想要使用@别名，需要在前面加上一个**~**才可以

.scrollbar-wrapper {
  background: url('~@/assets/common/leftnavBg.png') no-repeat 0 100%;
}

四、@extend 和 @mixin

1、extend 类扩展

  -@extend (opens new window)可以将一个选择器的样式应用到另一个选择器上

如果使用不当，可能会生成复杂的选择器结构，影响样式的可读性和维护性

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;

  &-info {
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
  }

  &-success {
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
  }
}

/* .alert-success、.alert-info 类扩展到了.alert样式上 */
.alert,
.alert-success,
.alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

2、mixin 样式混入 ✨

• @mixin (opens new window)用于定义一个可重用的样式块，可以在不同的选择器中引用。

在 vue、小程序、uniapp 等中有相似的概念，共享不同的内容

// 待调用的样式块
@mixin alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  @include alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  @include alert;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;

  /* 混入成功 */
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;

  /* 混入成功 */
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

3、区别分析

• @extend：适用于需要在多个选择器之间共享相同样式的情况

  相较于@mixin 而言，@extend 的一大优势是类继承样式转换后不会生成重复的 css

• @mixin：适用于需要在不同选择器中应用相似样式

  值得说明的是，@mixin 是可以接受参数，进而动态地生成样式

// 定义 @mixin
@mixin link-styles($color, $hover-color, $font-size: 16px, $font-weight: normal) {
  color: $color;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease-in-out;

  // 大小调整
  font-size: $font-size;
  font-weight: $font-weight;

  &:hover {
    color: $hover-color;
    text-decoration: underline;
  }
}

// 使用 @include 引用 @mixin
.link {
  @include link-styles(#3498db, #e74c3c);
}

// 使用 @include 引用 @mixin，并自定义字体大小和粗细
.link-large {
  @include link-styles(#3498db, #e74c3c, 20px, bold);
}