Scss学习--关于Scss指令@import、@meida

@import 导入文件指令

@mixin list-reset-group{
    margin: 0;
    padding: 0;
    list-style: none;
}

$family:unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
@import "./particular/part01.scss";

注意：

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

1. 文件拓展名是 .css；
2. 文件名以 http:// 开头；
3. 文件名是 url()；
4. @import 包含 media queries。

scss库文件：

一般是用来存放待引用的样式的文件，一般以’_’(下划线)开头命名文件
（如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。）
引入该文件时，不必加入下划线
例如：在file文件下有个_part.scss文件,那么导入该文件可以使用：

@import “./file/part.scss”;

注意：

不能再同一个目录下同时出现例如_path.scss和path.scss这样的文件，
不然再导入文件时，系统将无法识别你要导入的文件是哪一个

@import的嵌套

//假设example.scss 文件包含以下样式：
.example {
  color: red;
}
//导入到 #main 样式内
#main {
  @import "example";
}
//将会被编译为
#main .example {
  color: red;
}

@media 提升指令

@media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套
如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器

nav{
   border: 1px solid orange;
   @media p{
       font{
           size:14px;
       }
   }
}

nav{
   border: 1px solid orange;
   p{
       font{
           size:14px;
       }

       @media div{
           width: 10px;
           display: flex;
           flex-wrap: wrap;
       }
   }
}

@media的内部嵌套

@media foo{
    div{
        color: palegreen;
        @media (screen) { /*嵌套时必须加入小括号*/
            font-size: 18px;;
        }
    }
}

可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

@media screen {
    .sidebar {
      @media (orientation: landscape) {
        width: 500px;
      }
    }
  }

  $media: screen;
  $feature: -webkit-min-device-pixel-ratio;
  $value: 1.5;
  
  @media #{$media} and ($feature: $value) {
    .sidebar {
      width: 500px;
    }
  }