1.@import

@import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常， @import 寻找 Sass 文件并将其导入，但在以下情况下， @import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css ；
文件名以 http:// 开头；
文件名是 url() ；
@import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass ，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
@import "foo.scss";
@import "foo";
都会导入文件 foo.scss 
2. @media 
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
.sidebar {
  width: 300px; 
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and 
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
@media 甚至可以比如变量，函数，以及运算符，代替条件的名称或者值： 
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; 
 3. @extend 继承 
 Sass 将一个选择器下的所有样式继承给另一个选择器 
这个非常好用，通常会有两个类选择器的样式基本相同，第二个只是比第一个选择器多点样式，原来的方案要么写两遍，要么在一个html标签上写两个选择器。 
使用 @extend 可以避免上述情况 
.error {
  border: 1px #f00;
  background-color: #fdd;
.seriousError {
  @extend .error;
  border-width: 3px;
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.seriousError { border-width: 3px; } 
Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 
同 class 元素一样，a:hover 的样式将继承给 .hoverlink。 
.hoverlink {
  @extend a:hover;
a:hover {
  text-decoration: underline;
a:hover, .hoverlink {
  text-decoration: underline; 
4.定义混合指令 @mixin 
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。 
混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义： 
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  color: #ff0000;
混合也需要包含选择器和属性，甚至可以用 & 引用父选择器： 
@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  * html & { height: 1px }
5. 引用混合样式 @include 
使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）： 
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。 
@mixin silly-links {
    color: blue;
    background-color: red;
@include silly-links;
  color: blue;
  background-color: red; 
混合样式中也可以包含其他混合样式，比如 
@mixin compound {
  @include highlighted-background;
  @include header-text;
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。 
参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号： 
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
p { @include sexy-border(blue, 1in); }
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值： 
@mixin sexy-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
  border-color: blue;
  border-width: 1px;
  border-style: dashed; 
  border-color: blue;
  border-width: 2px;
  border-style: dashed; 
混合指令也可以使用关键词参数，上面的例子也可以写成： 
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }
虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。 
有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理： 
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用： 
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
基本也就这些常用，如果发现错误解决不了，我的建议就是以前你怎么写的css你就怎么写肯定没错。当然有空去探个真相才是王道。  
                    Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）1.@import@import的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。通常，@import寻找 Sass 文件并将其导入，但在以下情况下，@import仅作为普通的 CSS 语句，不会导入任何 Sass 文件。文件拓展名是.css；	...
				Jerry 之前的文章.scss 文件里的特殊符号 - % 百分号和 $美元符号，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。
本文介绍另一个特殊符号 @ 的用法。
使用预处理器的优点之一是它们能够处理复杂、冗长的代码并对其进行简化。 这就是 mixins 派上用场的地方！
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
　　定义和使用：
　　使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
　　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
　　当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
　　实例：如果文档宽度小于 300 像素则修改背...
yarn add @atolye15/stylelint-config --dev
# Or with npm:
npm install @atolye15/stylelint-config --save-dev
将您的stylelint配置设置为： 
  " extends " : " @atolye15/stylelint-config "
只需在配置中添加"rules"键，然后在其中添加替代项即可。
 例如，要将indentation更改为制表符并关闭number-leading-zero规则： 
  " extends " : " @atolye15/stylelint-config " ,
				Sass MediaScreen
 用于检查设备组（移动设备，平板电脑，笔记本电脑，台式机）或设备名称（iPhone 5，iPhone X，iPhone 11 Pro Max，iPad Pro 12.9等）的Mixins。 可扩展，使用非常简单。
有用的网址
请勿在浏览器DevTools中检查适应性，因为在设备的横向方向上出的侧面。 最好在真实设备或模拟器（例如xCode Simulator）中进行检查。
 使用优化媒体查询。 没有它，就会生成很多相同的@media ...代码，尤其是为了方便起见，在每个选择器中分别使用mixin @include device()时。 Gulp包装器 。
$ yarn add sass-mediascreen
$ npm install sass-mediascreen
$ curl -O https://r
				Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。
变量用来存储需要在CSS中...
1.@import

2. @media

3. @extend 继承

4.定义混合指令 `@mixin`

5. 引用混合样式 `@include`

基本也就这些常用，如果发现错误解决不了，我的建议就是以前你怎么写的css你就怎么写肯定没错。当然有空去探个真相才是王道。
