Scss--变量--使用/实例

原文网址：Scss--变量--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

        本文用示例介绍Scss的变量的用法。

        变量以美元符号（$）开头，赋值方法与 CSS 属性的写法一样。

简单示例

Scss：

$width: 5em;

#main {
  width: $width;
}

编译后的CSS：

#main {
  width: 5em;
}

作用域

说明

        变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。

        将局部变量转换为全局变量可以添加 !global 声明。

示例

Scss：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译后的CSS：

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

插值语句：#{}

说明

        通过 #{} 插值语句可以在选择器或属性名中使用变量

示例

SCSS

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译后的CSS：

p.foo {
  border-color: blue;
}

避免 Sass 运行运算表达式

        #{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

示例

SCSS：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

 编译后的CSS：

p {
  font: 12px/30px; 
}

变量定义：!default

说明

        可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

示例

SCSS：

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译后的CSS：

#main {
  content: "First content";
  new-content: "First time reference"; 
}

变量是 null 空值时将视为未被 !default 赋值

SCSS

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译后的CSS：

#main {
  content: "Non-null content"; 
}