阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 注释

      在本章中,我们来研究Sass 注释。注释是放在源代码中的不可执行语句。注释使源代码更容易理解。Sass支持两种类型的注释。

      • 多行注释 - 使用/ *和* /写入。多行注释保存在CSS输出中。

      • 单行注释 - 这些是使用 // 和注释写成的。单行注释不会保留在CSS输出中。

      例子

      下面的示例演示了在SCSS文件中使用注释:

      <html>
      <head>
         <title>SASS comments</title>
         <link rel="stylesheet" type="text/css" href="style.css"/>
      </head>
      <body>
        <h1>Welcome to TutorialsPoint</h1>
        <a href="//www.axihe.com/">TutorialsPoint</a>
      </body>
      </html>
      

      接下来,创建文件 style.scss 。

      style.scss

      /* This comment is
       * more than one line long
       * since it uses the CSS comment syntax,
       * it will appear in the CSS output. */
      body { color: black; }
      
      // These comments are in single line
      // They will not appear in the CSS output,
      // since they use the single-line comment syntax.
      a { color: blue; }
      

      您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:

      sass --watch C:\ruby\lib\sass\style.scss:style.css
      

      接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

      style.css

      /* This comment is
       * more than one line long
       * since it uses the CSS comment syntax,
       * it will appear in the CSS output. */
      body {
        color: black; }
      
      a {
        color: blue; }
      

      输出

      让我们执行以下步骤,看看上面的代码如何工作:

      • 将上述html代码保存在 sass_comments.html 文件中。
      • 在浏览器中打开此HTML文件,将显示如下输出。
      目录
      目录