Sass--@-Rules

最新推荐文章于 2025-03-31 23:09:05 发布

转载最新推荐文章于 2025-03-31 23:09:05 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3412211/blog/1550798

文章标签：

#python

本文详细介绍了Sass中的@import、@media和@extend等高级特性。解释了如何使用@import导入Sass文件，@media如何在CSS规则中嵌套使用，以及@extend如何避免重复样式，提高代码复用率。

2019独角兽企业重金招聘Python工程师标准>>>

@import、@media、@extend

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

· 文件拓展名是 .css；

· 文件名以 http:// 开头；

· 文件名是 url()；

· @import 包含 media queries。

分音 (Partials)

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

@media screen {

  .sidebar {

    @media (orientation: landscape) {

      width: 500px;

    }

  }

}

编译为

@media screen and (orientation: landscape) {

  .sidebar {

    width: 500px; } }

@extend

@extend 的作用是将重复使用的样式延伸 (extend) 给需要包含这个样式的特殊样式:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

@extend-Only 选择器 (@extend-Only Selectors)

(占位符%)有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。
.notice {
  @extend %extreme;
}
编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

转载于:https://my.oschina.net/u/3412211/blog/1550798