【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

圆括号用来影响运算顺序

函数

上一篇:sass和scss的主要区别


下一篇:浅谈Css、less和Sass(SCSS)