标签：scss 运算 sass 嵌套 width 数组 字符串 选择器 CSS

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

圆括号用来影响运算顺序

函数

标签：scss,运算,sass,嵌套,width,数组,字符串,选择器,CSS
来源： https://www.cnblogs.com/Mijiujs/p/12193380.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。