阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 输出样式

      在本章中,我们将研究 SASS输出样式。SASS生成的CSS文件由反映文档结构的默认CSS样式组成。默认的CSS样式是好的,但可能不适合所有情况,另一方面SASS支持许多其他样式。

      它支持以下不同的输出样式:

      :nested

      嵌套样式是SASS的默认样式。这种方式的样式是非常有用的,当你处理大型CSS文件。它使得文件的结构更可读,并且可以容易地理解。每个属性都有自己的行,每个规则的缩进都是基于嵌套的深度。

      例如,我们可以在SASS文件中嵌套代码,如下所示:

      #first {
        background-color: #00FFFF;
        color: #C0C0C0; }
        #first p {
          width: 10em; }
      
      .highlight {
        text-decoration: underline;
        font-size: 5em;
        background-color: #FFFF00; }
      

      :expanded

      在展开类型的CSS样式中,每个属性和规则都有自己的线。与嵌套CSS样式相比,它需要更多的空间。规则部分由属于规则中的所有属性组成,其中规则不遵循任何缩进。

      例如,我们可以扩展SASS文件中的代码,如下所示:

      #first {
        background-color: #00FFFF;
        color: #C0C0C0;
      }
      #first p {
        width: 10em;
      }
      
      .highlight {
        text-decoration: underline;
        font-size: 5em;
        background-color: #FFFF00;
      }
      

      :compact

      紧凑的CSS风格竞争力比Expanded和Nested占用更少的空间。它主要关注选择器而不是其属性。每个选择器占用一行,其属性也放在同一行。嵌套规则彼此相邻,没有换行符,并且独立的规则组之间将有换行符。

      例如,我们可以压缩SASS文件中的代码,如下所示:

      #first { background-color: #00FFFF; color: #C0C0C0; }
      #first p { width: 10em; }
      .highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }
      

      :compressed

      与上面讨论的所有其他样式相比,压缩的CSS样式占用最少的空间。它仅提供空格,以在文件末尾分隔选择器和换行符。这种方式的样式是混乱,不容易阅读。

      例如,我们可以压缩SASS文件中的代码,如下所示:

      #first{background-color:#00FFFF;color:#C0C0C0}#first p{width:10em}.highlight{text-decoration:underline;font-size:5em;background-color:#FFFF00}
      
      目录
      目录