• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 注释

    Sass 注释的工作方式在 SCSS 和缩进语法之间有很大的不同。两种语法都支持两种类型的注释:使用/**/定义的注释,会被编译到 CSS 中,而使用//的注释,不会被编译进 css 文件中。

    在SCSS中

    SCSS中的注释与 JavaScript 等其他语言中的注释类似。单行注释,以开头//,一直到行尾。单行注释中的任何内容都不会编译进 CSS;就 Sass 而言,这类注释被视为不存在。它们也被称为静默注释,因为它们不产生任何 CSS。

    多行注释,以/*开头,*/结尾。如果多行注释写在允许声明的地方,它会被编译为CSS注释。与静默注释相比,它们也被称为标准注释。编译为CSS的多行注释可能包含插值,将在编译注释之前对其进行计算。

    默认情况下,多行注释会以压缩模式从编译后的 CSS 中去除。但是,如果注释以/*!开头,它将始终包含在CSS 输出中。

    scsscss
    // This comment won't be included in the CSS.
    
    /* But this comment will, except in compressed mode. */
    
    /* It can also contain interpolation:
     * 1 + 1 = #{1 + 1} */
    
    /*! This comment will be included even in compressed mode. */
    
    p /* Multi-line comments can be written anywhere
       * whitespace is allowed. */ .sans {
      font: Helvetica, // So can single-line commments.
            sans-serif;
    }
    
    /* But this comment will, except in compressed mode. */
    /* It can also contain interpolation:
     * 1 + 1 = 2 */
    /*! This comment will be included even in compressed mode. */
    p .sans {
      font: Helvetica, sans-serif;
    }
    


    在 Sass 中

    缩进语法中的注释的工作方式略有不同:它们是基于缩进的,就像语法的其余部分一样。与 SCSS 一样,使用//编写的静默注释,永远不会编辑进 CSS中,但与 SCSS 不同的是,//开头下方缩进的所有内容也会被注释掉。

    以缩进开头的缩进语法中,注释/*以相同的方式工作,只是它们被编译为CSS。因为注释的扩展是基于缩进的,所以关闭*/是可选的。也像 SCSS 一样,/*注释可以包含插值,并且可以/*!开始,避免在压缩模式下被剥离。

    默认,多行注释也可以在缩进语法的表达式中使用。在这种情况下,它们的语法与 SCSS 中的语法完全相同。

    sasscss
    // This comment won't be included in the CSS.
       This is also commented out.
    
    /* But this comment will, except in compressed mode.
    
    /* It can also contain interpolation:
       1 + 1 = #{1 + 1}
    
    /*! This comment will be included even in compressed mode.
    
    p .sans
      font: Helvetica, /* Inline comments must be closed. */ sans-serif
    
    
    /* But this comment will, except in compressed mode. */
    /* It can also contain interpolation:
     * 1 + 1 = 2 */
    /*! This comment will be included even in compressed mode. */
    p .sans {
      font: Helvetica, sans-serif;
    }
    


    文档注释

    使用 Sass 编写样式库时,您可以使用注释来记录您的库提供的 mixins、函数、变量和占位符选择器,以及库本身。这些是由 SassDoc 工具读取的注释,它使用它们来生成漂亮的文档。

    文档注释是静默注释,在您正在记录的内容正上方用三个斜线(///)书写。SassDoc 将注释中的文本解析为 Markdown,并支持许多有用的注释来详细描述它。

    scsscass
    /// Computes an exponent.
    ///
    /// @param {number} $base
    ///   The number to multiply by itself.
    /// @param {integer (unitless)} $exponent
    ///   The number of `$base`s to multiply together.
    /// @return {number} `$base` to the power of `$exponent`.
    @function pow($base, $exponent) {
      $result: 1;
      @for $_ from 1 through $exponent {
        $result: $result * $base;
      }
      @return $result;
    }
    
    /// Computes an exponent.
    ///
    /// @param {number} $base
    ///   The number to multiply by itself.
    /// @param {integer (unitless)} $exponent
    ///   The number of `$base`s to multiply together.
    /// @return {number} `$base` to the power of `$exponent`.
    @function pow($base, $exponent)
      $result: 1
      @for $_ from 1 through $exponent
        $result: $result * $base
    
      @return $result
    

    上篇:样式表的结构

    下篇:特殊函数