欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Sass 基础(八)_html/css_WEB-ITnose

程序员文章站 2022-05-04 13:40:32
...
@import
      Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具有不同的
      功效,详细解释如下。
      @import
        Sass 扩展了CSS 的@import 规则,让它能够引入 SCSS 和 Sass
        文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一
        的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
        @import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并
        直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:
        如果文件的扩展名师 .css
        如果文件名以 http:// 开头
        如果文件名师url().
        如果@import 包含了任何媒体查询(media queries)
        如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试
        着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。 例如:
        @import "foo.scss";
        或
        @import "foo";
        两者都将引入foo.scss文件,而
        @import "foo.css"
        @import "foo" screen
        @import "http://foo.com/bar";
        @import url(foo);
        将被编译为:
        @import "foo.css";
        @import "foo" screen;
        @import "http://foo.com/bar";
        @import url(foo);
      也可以通过一个 @import 引入多个文件。例如:
      将引入 rounded-corners 和text-shadow 两个文件。

      编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划
      线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。
      然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文
      如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被件名前面的下划线。

      例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做:
      @import "colors";//不用加下划线
      来引入 _colors.scss 文件。
      注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _colors.scss 不能与 colors.scss 并存。

      嵌套 @import

        虽然大部分时间只需要在顶层文件使用 @import 就行了,但是,你还可以把他们包含在css 规则和@media 规则中。
        然后这样引用:
          #main {
            @import "example";
        }
        编译出来的 CSS:
          #main .example {
              color: red;
        }
@media
    Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另
    外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一
    个简单示例:
    .siderbar{
        width:300px;
        @media screen and (orientation: landscape){
        width:500px;
        }
    }
    编译出来;
      .sidebar{
          width:300px;
      }
    @media screen and ( orientation : landscape){
    .sidebar{
      width:500px;
      }
    }
    @media 也可以嵌套@media:
    @media screen{
        .sidebar{
          @media (orientation: landscape){
            width:500px;
            }
        }
    }
    在使用@media 时还可以使用#{}:
    $media :screen;
    $feature:-webkit-min-device-pixel-ratio;
    $value:1.5;
    @media #{$media} and ($featrue:$value){
    .sidebar{
        width:500px;
        }
      }
    编译出来的css:
      @media screen and (-webkit-min-device-pixel-ratio;1.5){
        .sidebar{
            width:500px;
          }
      }
@extend
    Sass 中的@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 不止扩展类选择器,还可以扩展任何选择器,比如 .special.cool, a:hover, 或 a.user[href^="http://"] 例如
      .hoverlink{
          @extend a:hover;
      }
      a:hover{
          text-decoration:underline;
      }
    编译出来:
      a:hover, .hoverlink{
        text-decoration:underline;
      }

      .hoverlink{
        @extend a:hover;
      }
      .comment a.user:hover{
          font-weight:bold;
      }
    编译出来的CSS
      .comment a.user:hover, .comment
        .user .hoverlink{
          font-weight:bold;
    }
      多个扩展
      所设某个样式要继承多个地方的样式,那么可以使用@extend 来继承的多个选择器或者占位符的样式,如:
      .error{
        border:1px #f00;
        background-color:#fdd;
      }
      .attention{
        font-size:3em;
        background-color:#ff0;
      }
    .seriousError{
        @extend .error;
        @extend .attention;
        border-width:3px;
    }
    编译出来的css
      .error, seriousError{
          border-width:3px;
      }
    扩展单一选择器
      前面我们知道 %placeholder 不使用@extend显示调用是不会生成
      任何样式代码。那么在选择器中使用占位符一样。比如下面的代码
      #context a%extreme{
          color:blue;
          font-weight:bold;
          font-size:2em;
      }
    这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码:
    .notice{
      @extend %extreme;
    }
    编译出来的CSS
      #context a.nontice{
        color:blue;
        font-weight:bold;
        font-size:2em;
      }
@at-root
    @at-root 从字面上解释就是跳出跟元素。当你选择器嵌套多层之
    后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个
    简单的示例:
    .a{
      color:red;
      .b{
        color:orange;
      .c{
        color:yellow;
    @at-root .d{
      color:green;
          }
        }
      }
    }
  编译出来的css
    .a{
      color:red;
    }
  .a .b{
    color:orange;
    }
  .a .b .c{
    color:yellow;
  }
  .d{
    color;green;
  }
@debug
    @debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了
    @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
    @debug 10em +12em;
    会输出:
      Line 1 EEBUG: 22em
@warn
    @warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:
    @mixin adjust-location($x,$y){
    @if unitless($x){
      @warn "Assuming #{$x} to be in pixels";
      $x: 1px *$x;
    }
    @if unitless($y){
      @warn "Assuming #{$y} to be in pixels"
        $y: 1px *$y:
      }
      position:relative; left:$x; top:$y;
    }
@error
    @error 和@warn,@debug 功能是如出一辙。
    @mixin error($x){
        @if $x         width:$x * 10px;
    }@else if $x == 10{
      width:$x;
    }@else{
      @error "你需要将#{$x}值设置在10以内的数";
      }
    }
  .texst{
      @include error(15);
  }
  编译的时候:
  你需要将15 值设置在10 以内的数 on line 7 at column5

相关标签: Sass 基础(八)