:root {
    --navbar-transparent: "true";
  }

@if var(--navbar-transparent) == "true" {
.nav-booking {
    position: absolute;
    width: 100%;
    background: transparent;
    padding-top: 20px;
  }
} @else {
.nav-booking{
    border-bottom: 2px solid #d6d1d180;
 }
}

* {
  --navbar-transparent: true;
  
}

.nav-booking {
    /* if !true */
    padding:var(--navbar-transparent,20px);
    border:var(--navbar-transparent,5px solid green);
    /*  */
    
    background:red;
    height:10px;
    margin:10px;
 }

<div></div>

<!-- you need to set "initial" to get your false -->
<div></div>

@function get($var) {
  @return map-get($custom-properties,$var);
}

$custom-properties: ();

@each $key,$value in $custom-properties {
  :root {
    --#{$key}: #{$value};
  }
}

$custom-properties: (
  ''navbar-transparent'': true,//...
);

@function get($var) {
  @return map-get($custom-properties,$var);
}

$custom-properties: (
  ''navbar-transparent'': true,);

@each $key,$value in $custom-properties {
  :root {
    --#{$key}: #{$value};
  }
}

@if (get(navbar-transparent)) {
  .nav-booking {
    position: absolute;
    width: 100%;
    background: transparent;
    padding-top: 20px;
  }
} @else {
  .nav-booking{
    border-bottom: 2px solid #d6d1d180;
  }
}

:root {
  --navbar-transparent: true;
}

.nav-booking {
  position: absolute;
  width: 100%;
  background: transparent;
  padding-top: 20px;
}

BootSwatch _variables.scss 和 _bootswatch.scss 有什么用？

如何解决BootSwatch _variables.scss 和 _bootswatch.scss 有什么用？

关于 BootSwatch 是引导程序的主题，我想知道 _variables.scss 和 _bootswatch.scss 文件的用途是什么？

我不确定如何实现它们，甚至不知道为什么包含它们。

谢谢！

css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）

什么是 sass

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时

【特点】

• 完全兼容 CSS3
• 在 CSS 语言的基础上增加变量 (variables)、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式

scss && sass

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如 IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。

任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具

[注意] 本文使用 scss 语法

缓存

默认情况下，Sass 会自动缓存编译后的模板（template）与 partials，这样做能够显著提升重新编译的速度，在处理 Sass 模板被切割为多个文件并通过 @import 导入，形成一个大文件时效果尤其显著。

基础规则

【注释】

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won''t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

使用插值语句的注释

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译后：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

【嵌套规则】

Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内

#main{
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

等同于
#main .redbox{}

【引用父选择器 &】

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

[注意] & 等于 a 即父元素

【属性嵌套】

CSS 中有一些属性遵循相同的 “命名空间”；比如，font-family, font-size, 和 font-weight 都在 font 命名空间中。在 CSS 中，如果你想在同一个命名空间中设置一串属性，你必须每次都输出来。Sass 为此提供了一个快捷方式：只需要输入一次命名空间，然后在其内部嵌套子属性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译为：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

带属性的命名空间

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
编译后
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

SassScript

除了普通的 CSS 属性的语法，Sass 支持一些扩展，名为 SassScript。SassScript 允许属性使用变量，算术和额外功能。SassScript 可以在任何属性值被使用。

SassScript 也可以用来生成选择器和属性名称，当编写 mixins 时非常有用。这是通过 interpolation（插值）完成。

【变量】

使用 SassScript 最直截了当的方法是使用变量。变量以美元符号开始，赋值像设置 CSS 属性那样：

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

编译为：
#main {
  width: 5em; 
}

数据类型

SassScript 支持 7 种主要的数据类型：

• 数字 (例如： 1.2, 13, 10px)
• 文本字符串，带引号字符串和不带引号字符串 (例如："foo", ''bar'', baz)
• 颜色 (例如：blue, #04a3f9, rgba (255, 0, 0, 0.5))
• 布尔值 (例如：true, false)
• 空值 (例如：null)
• 值列表 (list)，用空格或逗号分隔 (例如： 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps，从一个值映射到另一个 (例如 (key1: value1, key2: value2))

【字符串】 CSS 指定两种字符串类型：带引号的字符串（"Lucida Grande"），还有不带引号的字符串（sans-serif）SassScript 识别这两种类型，并且一般来说，在编译输出的 CSS 文件中不会改变 Sass 文档中使用的字符串类型。

[例外] 当使用 #{} 时，带引号的字符串将被编译为不带引号的字符串

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

编译后：

body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

".header" 最终被编译为 .header

【列表】 列表 (lists) 是指 Sass 如何表示在 CSS 声明的，类似 margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif 这样的值，列表只是一串其他值，无论是用空格还是用逗号隔开。事实上，独立的值也被视为列表：只包含一个值的列表。

列表本身没有太多的功能，但是 SassScript list functions 使它们非常有用。nth 函数可以直接访问列表中的某一项；join 函数可以将多个列表拼接在一起；append 函数可以将某项添加到列表中；@each 指令可以将添加样式到列表中的每一项。

【Maps】 Maps 代表一个键和值对集合，其中键用于查找值。他们可以很容易地将值收集到命名组中，并且可以动态地访问这些组。在 CSS 中你找不到和他们类似的值，虽然他们的语法类似于媒体查询表达式：

$map: (key1: value1, key2: value2, key3: value3);

和列表（Lists）不同，Maps 必须始终使用括号括起来，并且必须用逗号分隔。Maps 中的键和值可以是任意的 SassScript 对象。一个 Maps 可能只有一个值与给定的键关联（尽管该值可以是一个列表）。一个给定的值可能与许多键关联。

Maps 的主要操作使用的是 SassScript 函数。map-get 函数用于查找 map 中的值，map-merge 函数用于添加值到 map 中的值， @each 指令可以用来为 map 中的每个键值对添加样式。map 中键值对的顺序和 map 创建时始终相同。

[注意] 需要注意的是 map 的建（keys）可以是任何 Sass 数据类型（甚至是另一个 map），并且声明 map 的语法允许是任意的 SassScript 表达式，这个表达式将被评估为一个值以确定建（keys）。

运算

所有数据类型的支持相等运算 (== 和！=)。此外，每种类型都有其自己特殊的运算方式。

【数字运算】 SassScript 支持对数字标准的算术运算（加法 +，减法 - ，乘法 *，除法 / 和取模 %）。Sass 数学函数在算术运算期间会保留单位。这意味着，就像在现实生活中，你不能用不相同的单位数字进行算术运算（比如数字后面添加了 px 和 em 单位）

【除法和 /】 CSS 允许 / 出现在属性值之间作为分隔数字的方式，如下代码

p.ex2{font:italic bold 12px/20px arial,sans-serif;})
12px/20px 是 font-size/line-height的简写形式

SassScript 在以下几种情况下会进行除法运算

• 使用了变量
• 使用了函数
• 使用了括号

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
  width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

如果你想纯 CSS 的 / 和变量一起使用（即 / 不作为除法使用），你可以使用 #{} 插入他们。例如：

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

编译后：
p {
  font: 12px/30px;
}

【减法，负数，和 -】 在 CSS 和在 Sass 中 - 有许多不同的意义。它可以是一个减法运算符（比如在 5px - 3px 中） 也可以表示一个负数（比如在 - 3px 中） 还可以是一个一元负运算符（比如在 -$var 中） 或是标识符的一部分（比如在 font-weight 中）

那么如何使用 - 呢？

• 减法的时候，你总是在 - 两侧保留空格。
• 当表示一个负数或一元负运算时候，在 - 前面包含一个空格，后面不加空格。
• 如果在一个空格隔开的 list（列表）中，你可以将一元负运算使用括号括起来，比如在 10px (-$var) 中。

【颜色运算】 所有算术运算都支持的颜色值，颜色值的运算是分段进行计算的，也就是，依次计算红（red），绿（green），以及蓝（blue）的成分值。例如：

p {
  color: #010203 + #040506; // 计算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，并且编译为：
}

编译后
p {
  color: #050709; 
}

【opacify 和 transparentize 函数】 调整颜色的 alpha 通道可以使用

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

编译后：
p {
  color: rgba(255, 0, 0, 0.8); // 0.5 + 0.3
  background-color: rgba(255, 0, 0, 0.25);//  直接使用0.25替代了0.5
}

【字符串运算】

运算可用于连接字符串

p {
  cursor: e + -resize;
}

编译后：
p {
  cursor: e-resize; 
}

带引号和不带引号字符串加运算

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译后
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

【圆括号】 圆括号可以用来影响运算的顺序 (注：优先级)：

p {
  width: 1em + (2em * 3);
}

编译后：
p {
  width: 7em; 
}

插值

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

编译后：
p.foo {
  border-color: blue; 
}

使用插值来避免运算

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

编译后：
p {
  font: 12px/30px; 
}

SassScript 中的 &

就像当它在选择器中使用一样，SassScript 中的 & 指向当前父选择器。

.foo{
    &:hover{
        color:red;
    }
}

编译后：
.foo:hover {
  color: red; 
}

变量默认

如果分配给变量的值后面添加了！default 标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。

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

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

编译后：
#main {
  content: "First content"; // 使用了之前定义的
  new-content: "First time reference"; 
}

规则

Sass 支持所有 CSS3 的 @ 规则，以及一些已知的其他特定的 Sass "指令"。

【@import】

Sass 扩展了 CSS @import 规则，允许其导入 SCSS 或 Sass 文件。被导入的全部 SCSS 或 Sass 文件将一起合并到同一个 CSS 文件中。此外，被导入文件中所定义的任何变量或混入（mixins）都可以在主文件

可以正确导入scss或sass文件
@import "foo.scss";
@import "foo";

不能正确导入的形式
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import 支持导入多个文件语句

@import "rounded-corners", "text-shadow";

@import 用在嵌套

example.scss 包含
.example {
  color: red;
}

如此引入：
#main {
  @import "example";
}

等同于
#main {
  .example {
      color: red;
    }
}

编译后
#main .example {
  color: red;
}

[注意 1] 该指令只允许出现在文档顶层（注：最外层，不在嵌套规则内） [注意 2] 不允许在 mixin) 或控制指令 (control directives) 中嵌套 @import

【@media】 Sass 中 @media 指令的行为和纯 CSS 中一样，只是增加了一点额外的功能：它们可以嵌套在 CSS 规则。如果一个 @media 指令出现在 CSS 规则中，它将被冒泡到样式表的顶层，并且包含规则内所有的选择器。这使得很容易地添加特定 media 样式，而不需要重复使用选择器，或打乱样式表书写流。例如：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译后：
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
      width: 500px; 
   } 
}

@extend

继承另一个样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后：
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

这意味着.error 说定义的所有样式也适用于.seriousError，除了.seriousError 的特定样式。相当于，每个带有.seriousError 类的元素也带有.error 类。

类（class）选择，并不是唯一可以扩展。她可以扩展任何定义给单个元素的选择器，如.special.cool, a:hover, 或 a.user [href^="http://"]。 例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译后：
a:hover, .hoverlink {
  text-decoration: underline; 
}

警告指令

【@debug】

@debug 指令打印 SassScript 表达式的值到标准的错误输出流。这对于调试具有复杂 SassScript 表达式的 Sass 文件非常有用的。

@debug 10em + 12em;

输出：Line 1 DEBUG: 22em

【@warn】

@warn 指令打印 SassScript 表达式的值到标准的错误输出流。这对于警告用户弃用库 或 修复 mixin 轻微的错误是非常有用的。

使用示例

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @warn "Assuming #{$x} to be in pixels";
        $x: 1px * $x;
      }
      @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
        $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
}

【@error】

@error 指令抛出一个 SassScript 表达式的值作为一个致命的错误，其中包括一个不错的堆栈跟踪。这对于验证混入（mixin）和函数的参数很有用。例如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @error "$x may not be unitless, was #{$x}.";
      }
      @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
      }
      position: relative; left: $x; top: $y;
}

控制指令和表达式

SassScript 支持一些基本控制指令和表达式，比如仅在在某些条件下包含样式，或者包括相同的样式几次变化。

[注意] 控制指令是一项高级功能，日常编写过程中并不常用到，主要在 mixins（混合）指令中使用，尤其是像 Compass 这样的库。

【@if】 @if 指令需要一个 SassScript 表达和嵌套在它下面要使用的样式，如果表达式返回值不为 false 或者 null ，那么后面花括号中的内容就会返回：

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译后：
p {
  border: 1px solid; 
}

@if 语句后面可以跟多个 @else if 语句和一个 @else 语句。 如果 @if 语句失败，Sass 将逐条尝试 @else if 语句，直到有一个成功，或如果全部失败，那么会执行 @else 语句。 例如：

$type: monster;
p {
 @if $type == ocean {
     color: blue;
  } @else if $type == matador {
     color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后：
p {
  color: green; 
}

【@for】 @for 指令重复输出一组样式。对于每次重复，计数器变量用于调整输出结果。该指令有两种形式： @for $var from <start> through <end> @for $var from <start> to <end>

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后：
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

【@each】 @each 指令通常格式是 @each $var in <list or map>。$var 可以是任何变量名，像 $length 或者 $name，和 < list or map > 是一个返回列表（list）或 map 的 SassScript 表达式。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
      background-image: url(''/images/#{$animal}.png'');
  }
}

编译后：
.puma-icon {
  background-image: url(''/images/puma.png''); 
}
.sea-slug-icon {
  background-image: url(''/images/sea-slug.png''); 
}
.egret-icon {
  background-image: url(''/images/egret.png''); 
}
.salamander-icon {
  background-image: url(''/images/salamander.png''); 
}

【遍历 Map】

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
      font-size: $size;
  }
}

编译后：
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

Mixin

混入 (mixin) 允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），比如 .float-left。混入 (mixin) 还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西。 他们甚至可以带 arguments，引入变量，只需少量的混入 (mixin) 代码就能输出多样化的样式。

【定义一个 Mixin】

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

【引用混合指令 @include】

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译后：
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

【mixin 参数】

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 100px); }

编译后：
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

【参数设置默认值】

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

编译后：
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; 
}

【可变参数】 有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后：
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

【参数结合 list map 使用】

@mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
    @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
    @include colors($value-map...);
}

编译后：
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

【mixin 传递内容块】

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译后：
* html #logo {
  background-image: url(/logo.gif);
}

【变量的作用域】

传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译后：
.colors {
  background-color: blue; // 引用的mixin的变量值
  color: white; // 这里引用的是全局的变量
  border-color: blue;// 引用的mixin的变量值
}

函数指令

Sass 支持自定义函数，并能在任何值或脚本上下文中使用

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译后：
#sidebar {
  width: 240px; 
}

调用方式

#sidebar { width: grid-width($n: 5); }

输出格式

虽然 Sass 默认的 CSS 输出格式非常好，并且能反映文档的结构，但是由于每个人的喜好和需求各不相同，因此 Sass 支持其他几种格式。Sass 允许您通过设置:style 选项 或使用 --style 命令行标志，在四种不同的输出格式之间进行选择。

【:nested】

nested（嵌套）格式是 Sass 默认的输出格式，因为它的格式反映 CSS 样式与 HTML 文档结构。每个属性都独占用一行，但缩排不是固定的。每个规则是基于它的何嵌套深度缩进。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

【:expanded】

expanded（扩展）格式更像是手写的 CSS 样式，每个属性和规则都独占用一行。在规则之内的属性缩进的，但规则没有任何特殊的缩进。例如：

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

【:compact】

compact（紧凑）格式比起 nested（嵌套）或 expanded（扩展）格式占据更小的空间。这种格式重点聚焦在选择器上，不是它们的属性。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

【:compressed】

compressed（压缩）格式占用尽可能小的空间，在该文件的末尾会有一个换行，并且除了必要的分隔选择器之外，基本没有多余空格，它还包括其他一些小的压缩，比如选择颜色最小的表示方式。

#main{color:#fff;background-color:#000}#main p{width:10em}

小结

本文内容全部来自 sass 文档，通过查阅一遍文档，基本上能掌握 sass 的一些常用用法。

div+css 之 CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline 轮廓

1、CSS 文本设置：
CSS 文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

2、CSS 字体设置：
CSS 字体属性
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

3、CSS 列表设置：
CSS 列表属性 (list)
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset

列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url () 值，就可以使用图像作为标志。

4、CSS 表格设置：

表格边框： border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：
table, th, td{border: 1px solid blue;}
折叠边框：border-collapse 属性设置将表格边框折叠为单一边框：
table{border-collapse:collapse;}
表格宽度和高度：通过 width 和 height 属性定义表格的宽度和高度。
table{width:100%;}
th{height:50px;}
表格文本对齐：text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td{text-align:right;}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td{height:50px;vertical-align:bottom;}
表格内边距：控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td{padding:15px;}
表格颜色：
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}

5、css outline 轮廓线设置：

ooutline：在一个声明中设置所有的轮廓的属性。

outline-color：设置轮廓的颜色。

outline-style：设置轮廓的样式。包括以下选项：
none：默认。定义无轮廓。
dotted：定义点状的轮廓。
dashed：定义虚线轮廓。
solid：定义实线轮廓。
double：定义双线轮廓。双线的宽度等于 outline-width 的值。
groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 的值。
ridge：定义 3D 凹槽轮廓。此效果取决于 outline-color 的值。
inset：定义 3D 凹槽轮廓。此效果取决于 outline-color 的值。
outset：定义 3D 凹槽轮廓。此效果取决于 outline-color 的值。
inherit：规定应该从父元素继承轮廓样式的设置。
outline-width：设置轮廓的宽度。

thin：规定细轮廓。
medium：默认。规定中等的轮廓。
thick：规定粗轮廓。
length：数值。规定轮廓粗细的值。
inherit：规定应该从父元素继承轮廓样式的设置。

Gatsby，使用 SCSS 模块的问题，css 正常工作但 SCSS 不

如何解决Gatsby，使用 SCSS 模块的问题，css 正常工作但 SCSS 不

我在 Gatsby 中遇到了 CSS 模块的问题。一切正常，直到我将模块的文件格式从 CSS 更改为 scss。当然，我安装了一个sass插件。最奇怪的部分是全局样式文件作为 scss 正常工作，没有任何问题。将模块的文件格式从 CSS 更改为 scss 后，我在终端中收到此错误：

ERROR #98123 WEBPACK
Generating development JavaScript bundle Failed
Mini CSS Extract Plugin Loader Invalid Options
options.modules should be object
File: src/components/modules/footer.module.scss
Failed Re-building development bundle - 0.477s

页脚组件代码：

import React from "react";
import { Link } from "gatsby";
import * as style from "../components/modules/footer.module.scss";
const Footer = (props) => {
  return (
    <div>
      <div className={props.color}>
        <p>Learn</p>
        <Link>HOW</Link>
       </div>
      <div className={props.color}>
         <ul>
          <li>Contact</li>
          <li>Privacy Policy</li>
          <li>Terms of use</li>
        </ul>
        <p className={style.feature}>follow us</p>
        <ul>
          <li>
            <img></img>
          </li>
          <li>
            <img></img>
          </li>
          <li>
            <img></img>
          </li>
        </ul>
      </div>
    </div>
  );
};
    export default Footer;

来自模块的代码：

.feature {
  color: blue;
}

gatsby-config.js:

module.exports = {plugins: ["gatsby-plugin-react-helmet",`gatsby-plugin-sass`],};
    

你们知道这个错误背后的原因是什么吗？我只是猜测它是项目配置的问题，节点、webpack 等的一些问题，但我不知道它特别是什么。我创建了一个新项目来测试 CSS 模块，并且在新项目上运行正常。

关于在@if scss 中使用 css 变量和scss if判断的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于BootSwatch _variables.scss 和 _bootswatch.scss 有什么用？、css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）、div+css 之 CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline 轮廓、Gatsby，使用 SCSS 模块的问题，css 正常工作但 SCSS 不的相关信息，请在本站寻找。