Sass 详细教程

短命女 2022-12-30 08:10 102阅读 0赞

#  #

# 1、Sass 介绍 #

1.  Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
2.  Sass 是一个 CSS 预处理器。
3.  Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
4.  Sass 完全兼容所有版本的 CSS。
5.  Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
6.  Sass 生成良好格式化的 CSS 代码，易于组织和维护。
7.  Sass 文件后缀为 .scss。

--------------------

# 2、为什么使用 Sass? #

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

我们可以举个例子，我们会在 CSS 中重复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了：

/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
    
    $primary_1: #f6555a;
    $primary_2: #b2ad7f;
    $primary_3: #ff6700;
    
    /* 使用变量 */
    
    .main-header {
        background-color: $primary_1;
    }
    
    .menu-left {
        background-color: $primary_2;
    }
    
    .menu-right {
        background-color: $primary_3;
    }

--------------------

## 3、在Visual Studio Code上使用sass ##

1.  安装Easy sass插件
2.  第二步，修改vscode的配置

"easysass.compileAfterSave": true, 
     "easysass.formats": [ //nested：嵌套缩进的 css 代码。
    //expanded：没有缩进的、扩展的css代码。
    //compact：简洁格式的 css 代码。
    //compressed：压缩后的 css 代码
            {
                "format": "expanded",
                "extension": ".css"
            },
            {
                "format": "compressed",
                "extension": ".min.css"
            }
        ],
    "easysass.targetDir": "css/" //路径

--------------------

# 4、Sass 变量 #

**1、变量用于存储一些信息，它可以重复使用。**

**2、Sass 变量可以存储以下信息：**

*  字符串
 *  数字
 *  颜色值
 *  布尔值
 *  列表
 *  null 值

**3、Sass 定义变量使用 $ 符号：**

$bg-color:#ff6700；

4、使用变量

div{
    background-color:$bg-color;}

--------------------

# 4、Sass 嵌套规则与属性 #

--------------------

## 4.1、Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。 ##

1.          在css中直接使用标签嵌套。
2.          有些时候需要使用父选择器，这个时候则使用 & 占位符。

--------------------

## 4、2Sass 嵌套属性 ##

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

在 Sass 中，我们可以使用嵌套属性来编写它们

实例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./css/dom.css">
    </head>
    
    <body>
        <div class="box">
            <div class="button-gurp">
                <button>开始</button>
                <button>结束</button>
            </div>
        </div>
    </body>
    
    </html>

--------------------

sass代码：

* {
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    $bg-color:aqua;
    .box {
        width: 400px;
        height: 400px;
        background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .button-gurp {
            width: 100px;
            height: 120px;
            border: 1px solid springgreen;
            button {
                width: 40px;
                height: 20px;
                font-size: 12px;
                background-color: $bg-color;
                color: #000;
                box-shadow: 1px 1px 5px #333;
                margin-top: 40px;
                animation: jump 5s infinite linear;
                &:hover {
                    animation-play-state: paused;
                }
            }
        }
    }
    
    @keyframes jump {
        0% {
            transform: translateY(0px);
        }
        25% {
            transform: translateY(50px);
        }
        50% {
            transform: translateY(0px);
        }
        75% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0px);
        }
    }

--------------------

# 5、Sass @import #

Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。

我们可以安装不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。

--------------------

## Sass 导入文件 ##

1.  类似 CSS，Sass 支持 @import 指令。
2.  @import 指令可以让我们导入其他文件等内容。
3.  CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

*  Sass @import 指令语法如下：
 *      @import filename;

**注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。**

1.  此外，你也可以导入 CSS 文件。
2.  导入后我们就可以在主文件中使用导入文件等变量。

**以下实例，导入 variables.scss、colors.scss 和 reset.scss 文件。**

@import "variables";  
@import "colors";  
@import "reset";

--------------------

# 6、Sass @mixin 与 @include #

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

--------------------

## 6.1定义一个混入 ##

混入(mixin)通过 @mixin 指令来定义。 @mixin name \{ property: value; property: value; ... \}

// 以下实例创建一个名为 "important-list" 的混入：
    @mixin important-list {
        color: aquamarine;
        font-size: 14px;
        font-weight: 700;
        border: 1px solid greenyellow;
    }

**注意：**Sass 的连接符号 - 与下划线符号 \_ 是相同的，也就是 @mixin important-text \{ \} 与 @mixin important\_text \{ \} 是一样的混入。

### 6.2使用混入 ###

@include 指令可用于包含一混入：

@include important-list;

实例：

### sass代码： ###

@mixin important-list {
        color: aquamarine;
        font-size: 14px;
        font-weight: 700;
        border: 1px solid greenyellow;
    }
    
    .box {
        @include important-list;
        background-color: pink;
    }

### css生成代码： ###

.box {
      color: aquamarine;
      font-size: 14px;
      font-weight: 700;
      border: 1px solid greenyellow;
      background-color: pink;
    }

## 6.3向混入传递变量 ##

混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入：

### sass代码： ###

@mixin bordered($color, $width) {
        border: $width solid $color;
      }
      .box{
          @include bordered(pink, 1px)
      }
      .box1{
          @include bordered(#a5a5a5, 10px)
      }

### css生成： ###

.box {
      border: 1px solid pink;
    }
    
    .box1 {
      border: 10px solid #a5a5a5;
    }

--------------------

### 6.4可变参数 ###

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

--------------------

# 7、Sass @extend 与 继承 #

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

## Sass 代码： ##

button-basic  {
      border: none;
      padding: 15px 30px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button-report  {
      @extend .button-basic;
      background-color: pink;
    }
    
    .button-submit  {
      @extend .button-basic;
      background-color:yellow;
      color: white;
    }

## Css 代码： ##

.button-basic, .button-report, .button-submit {
      border: none;
      padding: 15px 30px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button-report  {
      background-color:pink;
    }
    
    .button-submit  {
      background-color:yellow;
      color: white;
    }

## @extend 很好的体现了代码的复用。 ##