学习Sass时的概念整理和学习路线

sass概念

1.基本语法
2.@charset   
统一规定   
scss 文件 必须加@charset
同时统一定义为 @charset "UTF-8";

3.数据类型 与变量
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符
$list:(1px,2em,4pt,"foo");
maps, 相当于 JavaScript 的 object，
$map:(key1: value1, key2: value2);

变量支持块级作用域$开头
格式为
$变量名：数据类型

变量支持 块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）；

局部变量转换为全局变量可以添加 !global
.demo{
  $color:red !global;
  color:$color;
}
.demo2{
  color:$color;
}
!default

4.运算
 加减可以做单位运算，乘除不可以；
 相等运算  不同类型可以运算  结果为false；
 关系运算  不同类型不可以运算
 颜色运算  项目中不允许使用颜色运算，
                     但是提一下  #2 34 56 +#65 43 21的计算方式  12+65 34+43 56+21 且不作用 alpha（阿尔法） 值
 
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
.demo{
 content:foo +"111";
}
.demo2{
  content:"foo" + 111;
}
.demo3{
  $str:"111";
  content:"foo#{$str}";
}

5.& 父类选择器 和 属性嵌套
.parent{
  color:red;
  & .child{
    color:blue;
  }
}
.parent{
  color:red;
  .child{
    color:blue;
  }
}  
// 嵌套属性
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

7.@-Rules 
scss:
@import  
非scss
@import url("")
将文件命名为 _colors.scss @import  文件不会被编译
@import  支持嵌套，不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media   媒体查询

@extend
.demo {
  border: 1px #f00;
  background-color: #fdd;
}

.demo2 {
  @extend .error;
  border-width: $color;
}
 
这种方式就是css的,

 @at-root
.parent {
  color:red;
  @at-root .child {
    font-size:12px;
  }
}

 @debug @warn 调试用

 @if() @else() @else if()

 @for $var from <start> through <end>，
 当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

@each 指令的格式是 $var in <list>,

@while 条件{
    
}

@mixin 和 @include
标准写法是  ($color:red) (red);
...  表示一个数组变量

@mixin demo($font-size,$color) {
 font-size:$font-size;
 color:$color;
}

.show {
  @include demo($color:blue,$font-size:12pt);
}
@function

输出格式 命令行实现 nested expanded compact compressed