乐趣区

关于前端:关于SASS变量

SASS 中定义变量的公式如下:

// $ 符号固定,variables 为变量名,expression 为表达式
$<variables>: <expression>;

$font-size-medium: 32px / 2;     // 16px
$font-size-normal: 12px + 2px;   // 14px
$font-size-small: 12px;          // 12px

SASS 中的变量是命令式的,意味着你在批改变量前后,值可能不雷同的。

$font-size: 14px;
.box {font-size: $font-size; // 14px}

// 批改值
$font-size: 16px;
.item {font-size: $font-size; // 16px}

SASS 默认变量

有些时候,咱们心愿定义一些变量并给默认值,这样内部用户应用的时候,能够从新定义雷同的变量,但变量的值由内部用户本人规定,此时能够应用默认变量!default:

$font-size: 14px !default;
$theme-color: #4093ff !default;

// 应用默认
.box {
  font-size: $font-size;          // 14px;
  background-color: $theme-color; // #4093ff;
}

// 本人定义
$font-size: 16px;
$theme-color: #58a;
.box {
  font-size: $font-size;          // 16px
  background-color: $theme-color; // #58a;
}
在一些组件库或者款式库中,简直都容许用户自定义款式,其本质就是默认变量在起作用。

SASS 局部变量

因为 SASS 容许嵌套规定,所以变量也能够定义在嵌套规定中。当在嵌套规定中定义一个变量时,此变量的拜访范畴只存在于此规定内,对于内部不可见,例如:

.box {
  .item {
    $font-size: 16px;
    font-size: $font-size; // 16px;
  }
  .row {font-size: $font-size; // error Undefined variable}
}

对于嵌套规定中雷同命名的变量,内层的变量会遮蔽外层的变量,例如:

.box {
  $font-size: 14px;
  .item {
    $font-size: 16px;
    font-size: $font-size; // 16px;
  }
}

然而在一些流程管制语句中,变量没有遮蔽成果,例如:

$is-active: true !default;
$font-size: 14px;
$theme-color:#4093ff;

@if $is-active {
  $font-size: 16px;
  $theme-color:#f60;
}

.box {
  font-size: $font-size;          // 16px
  background-color: $theme-color; // #f60
}
退出移动版