css拓展语言css

sass一种帮助你简化css工作流程的方式帮助你更容易维护和开发css内容
sass是目前为止世界上最成熟稳定和强大的专业级css拓展语言
sass是用ruby语言写的，但是两者的语法没有关系

sass语法

sass文件后缀名
sass后缀名有两种一种后缀名为sass 不适用大括号与分号
另一种是scss文件这种和平时使用的css文件差不多使用大括号与分号
使用变量
sass最重要的特性就是为css引入了变量我们可以吧反复使用的css属性值定义为变量然后通过变量名来引用他们二无需重复书写这一过程
- sass使用$符号来标识变量
- 变量声明：$highlight-color: #F90;
  这意味着变量$highlight-color现在的值是#f90
  任何可以用作css的属性值的赋值都可以用作sass的变量值甚至是以空格分隔的多个属性值或以逗号分隔的多个属性值
  变量可以定义在规则快内和规则快外
- 变量引用：变量之间可以互相引用
- 变量名
  sass变量名可以与css中的属性名和选择器名称相同包括中划线和下划线
  在sass中下划线与中划线是相互兼容的
sass选择器可以互相嵌套
- 父选择器
  在使用伪类选择器时如：hover 要在徐娜则其之前加入&
  当包含夫选择器标识符的嵌套给i则被打开时他不会像后代选择器那样进行拼接而是&被父选择器直接替代
- 群组选择器
- 子组合选择器和同层组合选择器
  “>” “+” “~”
  上面这三个选择器必须和其他选择器配合使用以指定浏览器仅选择某种特定上下文中的元素
  
  子组合选择器：> 选择一个元素的直接子元素
  同层相邻组合选择器： + 选择后面紧跟着的元素
  同层全体组合选择器： ~ 选择所有之后的同层元素不管他们之间隔了多少元素
- 嵌套属性
  吧属性名从-的地方划开在根属性后加个冒号紧跟一个{}块，
  吧子属性写在这个{}块中
导入sass文件 @import “文件名”
- 默认变量值！default
- 原生css可以导入
混合器
使用混合器来实现大段样式的重用
使用@mixin标识符定义
使用@include 定义的名字来进行引用
可以使用混合器吧样式中的通用样式抽离出来，然后在其他地方重用
- 选择器的链式继承
  继承也可以嵌套互相继承
  1
  2
  3
  4
  5
  6
  7
  8
  .one{
  }
  .two{
  @extend .one
  }
  .three{
  @extend .two
  }
- 继承的局限性
  也有很多选择器不被支持继承
  如包含选择器（.one.two）
  或相邻兄弟选择器（.one+.two）目前不支持继承
- 不要太过于依赖继承后期很难修改和维护
sass函数
- 字符串函数
- 数字函数
- 列表函数
- introspection函数
- 三元函数
- 颜色函数