Sass知识点

为什么要用Sass

• Sass是世界上最成熟、最稳定、最强大的专业级css扩展语言
• Sass与所有版本的CSS完全兼容
• Sass 拥有比任何其他CSS 扩展语言更多的特性和能力
• 大约15年来，Sass一直受到其热爱的核心团队的积极支持

安装

• Node.js安装Sass
  • npm install -g sass

声明变量

• 全局变量和局部变量
• $width: 300px;
  • $：变量声明
  • width：变量名称
  • 300px：变量值

默认变量

• $width: 300px !default;
  • 默认变量只需添加 !default

嵌套选择器

-eg

伪类嵌套

• eg

混合宏

• 好处：复用重复代码块
• 不足之处：是会生成冗余的代码块
• 带参数 和 不带参数
• 调用：@include border-radius(参数名);
• eg

继承

• 调用：@extend 类名
• eg

占位符

• 如果不被 @extend 调用的话，不会产生任何代码。
• 调用：@extend 类名
• eg

插值

• 用法：#{} -eg

@if

• true 为红色 false 为黄色
• eg

@for

• through and to
• eg

• eg

@while

• eg

@each

• $list 相当于一个数组
• eg