阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 语法

      在本章中,我们将学习SASS 语法。SASS支持两种语法,即 SCSS缩进语法

      • **SCSS(Sassy CSS)**是CSS语法的扩展。这意味着每个有效的CSS也是一个有效的SCSS。SCSS更容易维护大型样式表,并且可以识别供应商特定的语法和许多CSS。SCSS文件使用扩展名 .scss

      • 缩进 - 这是较旧的语法,有时仅称为 Sass 。使用这种形式的语法,可以简洁地编写CSS。SASS文件使用扩展名 .sass

      SASS缩进语法

      SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。

      • 它使用缩进而不是 {} 来分隔块。

      • 要分隔语句,它使用换行符而不是分号_(;)_。

      • 属性声明和选择器必须放在一行,{和}中的语句必须放在新行和缩进。

      例如,考虑以下SCSS代码:

      .myclass {
        color= red;
        font-size= 0.2em;
      }
      

      缩进语法是一种旧的语法,不建议在新的Sass文件中使用。如果使用此文件,它将在CSS文件中显示错误,因为我们使用 = 而不是**:**来设置属性和变量。

      使用下面的命令编译上面的代码:

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

      接下来,运行上面的命令,它将在 style.css 文件中显示错误,如下所示:

      Error: Invalid CSS after "  color= red": expected "{", was ";"
              on line 2 of C:\ruby\lib\sass\style17.scss
      
      1: .myclass {
      2:   color= red;
      3:   font-size= 0.2em;
      4: }
      

      SASS的语法差异

      大多数CSS和SCSS语法在SASS中工作完美。但是,有一些差异,在以下部分中解释:

      属性语法

      CSS属性可以通过两种方式声明:

      • 属性可以声明为类似于CSS但没有分号(;)

      • **colon(:)**将以每个属性名称为前缀。

      例如,您可以写为:

      .myclass
        :color red
        :font-size 0.2em
      

      默认情况下,可以使用上述两种方法(属性声明不带分号,冒号以属性名称开头)。 但是,在使用 “>:property_syntax 选项。

      多线选择器

      在缩进语法中,选择器可以在逗号后出现时放在换行符上。

      例子

      下面的示例描述了在SCSS文件中使用多行选择器:

      <html>
      <head>
         <title>Multiline Selectors</title>
         <link rel="stylesheet" type="text/css" href="style.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
         <script src="/attachments/tuploads/sass/jquery.min.js"></script>
         <script src="/attachments/tuploads/sass/bootstrap.min.js"></script>
      </head>
      <body>
         <h2>Example using Multiline Selectors</h2>
         <p class="class1">Welcome to Tutorialspoint!!!</p>
         <p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p>
      </body>
      </html>
      

      接下来,创建文件 style.scss。 请注意 .scss 扩展名。

      style.scss

      .class1,
      .class2{
         color:red;
      }
      

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

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

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

      生成的 style.css 如下所示:

      style.css

      .class1,
      .class2 {
        color: red;
      }
      

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

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

      注释

      注释占用整行并包围嵌套在它们下面的所有文本,它们是基于行的缩进语法。

      @import

      在SASS中, @import 指令可以使用/不使用引号。与SCSS不同,它们必须使用引号。

      例如,在SCSS中, @import 指令可以用作:

      @import "themes/blackforest";
      @import "style.sass";
      

      这可以在SASS中写为:

      @import themes/blackforest
      @import fontstyle.sass
      

      Mixin指令

      SASS支持 @mixin@include 等指令的缩写。您可以使用 =+ 字符替换 @mixin@include 更简单,更容易阅读。

      例如,您可以将mixin指令写为:

      =myclass
        font-size: 12px;
      
      p
        +myclass
      

      是相同的

      @mixin myclass
        font-size: 12px;
      
      p
        @include myclass
      

      已弃用的语法

      SASS支持使用一些旧的语法。但是,在SASS中使用此语法是不推荐。如果您使用此语法将显示警告,并且将在以后的版本中删除它。一些旧的语法如下表所示。

      序号运算符和描述
      1=
      它用于代替:将变量和属性设置为SassScript的值。
      2
      3
      而不是$,! 被用作可变前缀。 当使用函数而不是$时,函数不会改变。
      目录
      目录