sass简介和使用代码-CSDN博客

本文链接：https://blog.csdn.net/alankuo/article/details/142707217

一、Sass简介

定义
- Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器。它扩展了CSS的语法，使得样式表的编写更加高效、灵活且易于维护。
主要特点
- 变量（Variables）
  - 可以定义变量来存储颜色、字体、尺寸等信息，方便在样式表中重复使用和修改。例如，可以定义一个主色调变量$primary - color: #336699;，然后在多个样式规则中使用这个变量。
- 嵌套（Nesting）
  - 允许在一个选择器内部嵌套另一个选择器的样式规则，这使得CSS的结构更加清晰，类似于HTML的嵌套结构。例如：
```
nav {
  ul {
    margin: 0;
    padding: 0;
    list - style: none;
  }
  a {
    text - decoration: none;
  }
}
```
- 混合（Mixins）
  - 类似于函数，可以定义一组可复用的CSS属性集。例如，可以定义一个圆角混合器：
```
@mixin border - radius($radius) {
  -webkit - border - radius: $radius;
  -moz - border - radius: $radius;
  border - radius: $radius;
}
```
  然后在需要使用圆角的元素中调用这个混合器：div { @include border - radius(5px); }
- 继承（Inheritance）
  - 可以让一个选择器继承另一个选择器的样式，减少代码的冗余。例如：
```
 .button {
    border: 1px solid #ccc;
    padding: 10px;
  }
  .primary - button {
    @extend.button;
    background - color: $primary - color;
  }
```
- 运算（Operations）
  - 支持对数值进行数学运算，如加法、减法、乘法和除法。可以用于计算元素的尺寸、间距等。例如：
```
$base - font - size: 12px;
h1 {
  font - size: $base - font - size * 2;
}
```

二、Sass使用代码示例

变量的使用

首先创建一个.scss文件（例如styles.scss）。
定义变量：

$text - color: #333;
$background - color: #f9f9f9;

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

嵌套的使用

假设我们有一个HTML结构如下：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

在Sass中编写样式：

nav {
  ul {
    list - style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline - block;
      margin - right: 10px;

      a {
        text - decoration: none;
        color: #333;

        &:hover {
          color: #666;
        }
      }
    }
  }
}

混合器的使用

定义一个文本阴影混合器：

@mixin text - shadow($x, $y, $blur, $color) {
  text - shadow: $x $y $blur $color;
}

h1 {
  @include text - shadow(1px, 1px, 2px, rgba(0, 0, 0, 0.5));
}

继承的使用
- 定义一个基础的按钮样式：

  .button {
     display: inline - block;
     padding: 10px 20px;
     border: 1px solid #ccc;
     text - align: center;
   }

  .primary - button {
     @extend.button;
     background - color: #007bff;
     color: white;
   }

运算的使用
- 计算元素的宽度：

   $column - width: 100px;
   $gutter - width: 10px;

  .column {
     width: $column - width;
     margin - right: $gutter - width;
   }

  .double - column {
     width: $column - width * 2+ $gutter - width;
   }

要使用Sass，还需要将.scss文件编译成普通的.css文件，可以使用命令行工具（如node - sass或dart - sass）或者集成到构建工具（如Webpack、Gulp等）中进行编译。