Featured image of post Sass
笔记 编程

Sass

SASS 简介

  • SASS 是一种 CSS 预处理器，可以编译成标准的 CSS，提高了代码的复用性、可维护性和可读性。
  • 扩展名：.sass 或 .scss。其中 .sass 使用缩进语法，无需花括号和分号；.scss 更接近标准 CSS 语法。

安装 SASS

安装 SASS：使用 Node.js 安装 SASS

npm i sass

SASS 核心特性

变量

  • 使用 $ 符号定义变量，便于在样式表中复用相同的值。

    $primary-color: #3498db;
body {
  color: $primary-color;
}

嵌套

  • 允许在选择器中嵌套书写子选择器，使层级关系更清晰。

    nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

混合

  • 使用 @mixin 定义可复用的代码块，可以传入参数以实现动态样式。

    <style scoped lang="scss">
@mixin rounded($round) {
  border-radius: $round;
}

.box1 {
  @include rounded(10px);
  background-color: #f00;
}
</style>

继承

  • 使用 @extend 实现选择器继承，减少重复代码。

    <style scoped lang="scss">
.button {
  padding: 10px;
  color: white;
  border: none;
}

.primary-button {
  @extend .button;
  background-color: red;
}
</style>

运算

  • 支持基本的数学运算，便于动态调整数值。

    <style scoped lang="scss">
$base-width: 500px;

.container {
  width: $base-width - 20px;
  margin: 10px / 2;
  background-color: aqua;
}
</style>

函数

内置函数

  • SASS 提供了许多内置函数，常见的如 lighten、darken、rgba、percentage 等。

    $bg-color: lighten(#3498db, 20%);
background-color: $bg-color;

自定义函数

  • 可以使用 @function 定义自己的函数，以实现复杂的样式逻辑。

    <style scoped lang="scss">
$base-width: 20px;

@function double($value) {
  @return $value * 2;
}
div {
  width: double($base-width);
  background-color: red;
}
</style>

控制指令

条件语句（@if、@else）

  • 通过 @if 和 @else 实现条件判断，为不同场景编写样式。

    $theme: dark;

body {
  @if $theme == dark {
    background: #333;
  } @else {
    background: #fff;
  }
}

  • ​ 背景变色器

    <template>
  <div class="choose-color">
    <!-- 添加一个选色器 -->
    <input type="color" v-model="primaryColor" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: 'red',
    };
  },
  computed: {
    primaryColorVar() {
      return `--primary-color: ${this.primaryColor};`;
    },
  },
  mounted() {
    document.documentElement.style.setProperty('--primary-color', this.primaryColor);
  },
  watch: {
    primaryColor(newVal) {
      document.documentElement.style.setProperty('--primary-color', newVal);
    },
  },
};
</script>

<style lang="scss">
.choose-color {
  width: 500px;
  height: 500px;
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

循环（@for、@each、@while）

  • @for

    @for 用于迭代一个数值范围。它通常用于需要按顺序生成一系列数字的场景。

    语法：
@for $variable from start through end {

}

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

.col-1 {
  width: 33.3333%;
}
.col-2 {
  width: 66.6667%;
}
.col-3 {
  width: 100%;
}

  • @each

    @each 用于迭代一个列表。它通常用于需要遍历一组预定义的值的场景。

    语法：
@each $variable in list {

}

@each $color in red, green, blue {
  .#{$color}-text {
    color: $color;
  }
}

.red-text {
  color: red;
}
.green-text {
  color: green;
}
.blue-text {
  color: blue;
}

  • ​ 综合举例

    <template>
  <div class="greetings">
    <div class="row">
      <div class="col-1 red-text">width-33%-red-text</div>
      <div class="col-2 green-text">width-66%-green-text</div>
      <div class="col-3 blue-text">width-99%-blue-text</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.greetings {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: center;
}
@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

@each $color in red, green, blue {
  .#{$color}-text {
    background-color: $color;
    color: #fff;
  }
}
</style>

    sass-1

导入（@！import）与模块化

模块化

模块化是指将样式表分成多个独立的模块或文件，每个模块处理特定的功能或组件。这种方法可以提高代码的可维护性和复用性。

如何实现模块化：
1、创建多个Sass文件：根据功能或组件将样式分成不同的Sass文件。例如，你可以有一个 _variables.scss 文件用于存储变量，一个 _buttons.scss 文件用于按钮样式，一个 _layout.scss 文件用于布局样式等。
2、使用下划线命名：通常，模块文件以 _ 开头，表示这是一个部分文件，不应该被直接编译成CSS。
3、组织文件夹结构：将相关的Sass文件放在同一个文件夹中，以便更好地管理和维护。

styles/
│
├── _variables.scss
├── _buttons.scss
├── _layout.scss
└── main.scss

@import

// main.scss
@import 'variables';
@import 'buttons';
@import 'layout';

举例：

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _buttons.scss
.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// _layout.scss
.container {
  width: 80%;
  margin: 0 auto;
}

// main.scss
@import 'variables';
@import 'buttons';
@import 'layout';

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

部分文件（Partials）

部分文件是专门为了被其他文件导入而设计的，它们本身不会被编译成独立的 CSS 文件。

部分文件的文件名通常以下划线开头，例如 _variables.scss、_buttons.scss 等。

你使用 @import 指令导入一个部分文件时，不需要在文件名前加下划线

CSS
Licensed under CC BY-NC-SA 4.0