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,465