• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

变量

325 0

sass支持变量,开头使用$符号表示,并且可以存储多种数据类型。

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

例子

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

变量也是有作用域的。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用,局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

我们在h1选择器里面声明的变量,只有他本身或者他里面的子选择器才有效,而{}就是一个作用域,可以理解为js中function的作用域。

全局声明 !global

哪怕我们的变量是写在作用域中的,我们依然可以使用强制声明,将其转换为全局的声明,这就和css中的!important效果相同

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

此时下面的p元素选择器的颜色color变成了green

0
  • 本文分类:SASS
  • 本文标签:sass变量
  • 流行热度:已超过 325 人围观了本文
  • 最后更新:2020年04月20日 - 3时22分36秒
  • 发布日期:2020年04月20日 - 3时17分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码