【CSS】sass/scss

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能

css功能扩展

4.1嵌套规则

.css1{
    .css2{}
}

4.2父选择器&

a {
  &:hover {
    color: red;
  }
}

4.3属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

命名空间可以包含自己的属性值

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

4.4占位符选择器%foo

与常用的id与class选择器写法相似，只是#或.替换成了%。必须通过@extend指令调用，单独使用未通过@extend调用则不会编译到CSS文件中

注释

多行注释/* */

单行注释//

变量$

$width: 5em
#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用(即局部变量)，全局定义的则为全局变量。

局部变量添加!global声明转换为全局变量

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

数据类型

1.数字，1，2,13,10px

2.字符串：有引号与无引号字符串，"foo"，baz

3.颜色：blue，#4a3f9，rgba(255,0,0,0.5)

4.布尔型：true，false

5.数组：用空格或逗号作分隔符，1.5em 1em 0 2em， A,B,C

6.maps：相当于JS的object，（key1:value1,key2,value2）

也支持其他css属性，比如unicode字符集，或!important声明。然而Sass不会特殊对待这些属性值，一律视为无引号字符串。

字符串

使用#{}时，有引号字符串将被编译为无引号字符串，便于mixin中引用选择器名

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

 数组

nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

子数组 1px 2px, 5px 6px

如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)

运算

数字运算符+-*/%，如果必要会在不同单位件转换值

关系运算<,>,<=,>=也可用于数组运算

相等运算==,!=也可用于所有数据类型

可以颜色值运算、字符串运算

布尔运算and、or、not

圆括号用来影响运算顺序

函数