SASS是什么?

一种CSS处理器,生成CSS的工具

css处理器现状

Sass功能&特性

  • 定义变量 ($)
  • 混合宏 (@mixin)
  • 占位符 (%placeholder)
  • 扩展 (@extend)
  • 嵌套&继承
  • 运算&函数
  • Map & List
  • 控制命令

Sass变量

Sass混合宏

​

Sass继承

​

Sass占位符

​

混合宏 vs 继承 vs 占位符

​

混合宏 vs 继承 vs 占位符

​

混合宏 

​

继承

​

占位符

​

SASS嵌套

​

SASS运算

​

SASS函数

​

Text

字符串函数    数字函数    列表函数    颜色函数    三元函数    自定义函数

SASS的&符

​

SASS的@at-root

​

SASS的控制命令

​

  • @if / @if ... @else
  • @for 
  • @each
  • @while

SASS的@if / @if ... @else

​

SASS的@for

​

SASS的@each

​

SASS的List

​

SASS的Map

​

编写SASS的技巧

  • ​管理好文件结构
  • 有效使用Sass变量
  • 减少对mixin的依赖
  • 拥抱placeholder
  • 用函数做更多的事情
  • 合理嵌套
  • 保持Sass简单

扩展阅读

Thank you!

SASS

By wtmanutd

SASS

  • 1,815