sass知识点记忆

一、主要的数据类型：

• 数字：1，2，3，4，10px
• 字符串，有引号字符串与无引号字符串: "foo", 'bar', baz
• 颜色：blue, #ff6600, rgba(255,0,0,255)
• 布尔值：true, false
• 空值：null
• 数组，用空格或逗号作为分隔符：1.5em 1em 0 2em 或 1.5em, 1em, 0, 2em
• maps,相当于js的Object：（key1: value1, key2: value2）

***如果数组中包含两个数组的写法:(1px 2px) (5px 6px)使用空格分割

二、关系运算符

• 数字的加减乘除、取整：+, -, *, /, %
• 关系运算：<, >, <=, >=, ==, !=

1:除法运算/

以下三种情况/将被视为除法运算符号：
1: 如果值、或值的一部分，是变量或者函数的返回值
2: 如果值被圆括号包裹
3: 如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}


编译为：
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

1.1:含有变量的同时，不做除法运算

如果需要使用变量，同时又要确保/不做除法运算而是完整的编译到css文件中，只需要用#{}插值语句将变量包裹
例如：

 p{
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}
  }


 编译为：
 p{
    font: 12px/30px
  }

2:字符串运算

1：+可用于连接字符串。
2： 如果引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的。相反 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
3：圆括号()可以影响运算顺序

p:before{
  cursor: e + -resize;
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
  content: "I ate #{5 + 10} pies";
  width: 1em + (2em * 3); //圆括号可以影响运算顺序
}


编译为：
p:before{
  cursor: e-resize;
  content: "Foo Bar";
  font-family: sans-serif;
  margin: 7px auto;
  content: “I ate 15 pies”;
  width: 7em
}

三、@-Rules与指令

1: @import

@import 允许其导入SCSS或Sass文件，被导入的文件将合并编译到同一个CSS文件中,另外，被导入文件中所包含的变量后者混合指令（mixin）都可以在导入的文件中使用

以下都会导入文件foo.scss
如果没有指定拓展名，Sass将会试着寻找文件名相同，拓展名为.scss 或 .sass的文件将其导入

@import "foo.scss"
或
@import "foo"

1.1: 嵌套@import

大多数情况下，一般在文件的最外层使用@import，其实，也可以将@import嵌套进css样式或者@media中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中

1、test.scss文件

.testClass{
  color: red;
 }


2、将test.scss导入到#main样式内：

#main{
  @import "test.scss"
}


3、编译为：
#main .testClass{
  color: red;
}

2: @extend