scss指令笔记

最新推荐文章于 2024-06-20 17:54:56 发布

weixin_34071713

最新推荐文章于 2024-06-20 17:54:56 发布

阅读量86

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3407699/blog/3045562

版权

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

指令

@import
分音，如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在scss文件名前面加下划线就可以了，

@media媒体查询

查询条件也是允许嵌套的

  @media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
// 编译结果：
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

@extend继承
样式继承

// 例子1 
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// 编译结果：
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 border: 1px #f00;
 background-color: #fdd;
 border-width: 3px;
}
// 例子2
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.error.intrusion {
 background-image: url("/image/hacked.png");
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// 则<div class="seriousError intrusion"><div>也会有hacked.png的背景
// 编译结果为：
.error, .seriousError {
 border: 1px #f00;
 background-color: #fdd; }

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

.seriousError {
 border-width: 3px; }

延伸选择器
例如：.special.cool，a:hover 或者 a.user[href^="http://"]
多重延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

继续延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
.test{
  width: 10px;
   @extend .seriousError;
}

在媒体查询中延伸
Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

// 可行
@media print {
 .error {
   border: 1px #f00;
   background-color: #fdd;
 }
 .seriousError {
   @extend .error;
   border-width: 3px;
 }
}
// 不可以：
.error {
 border: 1px #f00;
 background-color: #fdd;
}

@media print {
 .seriousError {
   // INVALID EXTEND: .error is used outside of the "@media print" directive
   @extend .error;
   border-width: 3px;
 }
}

转载于:https://my.oschina.net/u/3407699/blog/3045562