null 值 - scss 数据值

百变鹏仔2年前 (2023-11-21)阅读数 48#技术干货

文章标签语句

null 值 - scss 数据值

null 值

null是其类型的唯一值。它表示缺少值，并且通常由函数返回以指示缺少结果。

@use "sass:map";
@use "sass:string";

@debug string.index("Helvetica Neue", "Roboto"); // null
@debug map.get(("large": 20px), "small"); // null
@debug &; // null

如果列表包含null，则从生成的 CSS 中，将null省略。

scss 语句	css 语句
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas"); h3 { font: 18px bold map-get($fonts, "sans"); }	h3 { font: 18px bold; }

如果属性值为null，则完全省略该属性。

scss 语句	css 语句
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas"); h3 { font: { size: 18px; weight: bold; family: map-get($fonts, "sans"); } }	h3 { font-size: 18px; font-weight: bold; }

null也是falsey，这意味着它适用于任何采用布尔值的规则或运算符，它都算作false。这使得使用可以null的值作为@if和if()条件，变得很null容易。

scss 语句	css 语句
@mixin app-background($color) { #{if(&, '&.app-background', '.app-background')} { background-color: $color; color: rgba(#fff, 0.75); } } @include app-background(#036); .sidebar { @include app-background(#c6538c); }	.app-background { background-color: #036; color: rgba(255, 255, 255, 0.75); } .sidebar.app-background { background-color: #c6538c; color: rgba(255, 255, 255, 0.75); }

scss 语句

css 语句

@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)