scss中 怎么使用&

在 SCSS 中，& 表示父选择器，可以用来连接父选择器和子选择器，从而简化样式表的书写。比如，你可以使用 & 来表示当前选择器的父级选择器。

举个例子，如果你有一个下面的 HTML 结构：

<div class="wrapper">
  <div class="box"></div>
</div>

你想给 `.box` 添加一个 hover 效果，并且只有在 `.wrapper` 中的 `.box` 被 hover 时才会生效。你可以这样写：

.wrapper {
  .box {
    &:hover {
      // 添加 hover 效果
    }
  }
}

这样，编译后的 CSS 代码就会变成：

.wrapper .box:hover {
  /* 添加 hover 效果 */
}

这里，& 表示 `.wrapper .box`，也就是当前选择器的父级选择器，从而可以简化样式表的书写。

相关问题

scss中&有多少种用法

在 SCSS 中，& 的用法有以下几种：

1. 连接父选择器和子选择器

如前面所述，可以使用 & 来连接父选择器和子选择器，从而简化样式表的书写。

.wrapper {
  .box {
    &:hover {
      /* 添加 hover 效果 */
    }
  }
}

2. 嵌套伪类

可以使用 & 来嵌套伪类，比如：

a {
  &:hover {
    /* 添加 hover 效果 */
  }

  &:active {
    /* 添加 active 效果 */
  }
}

3. 嵌套属性选择器

可以使用 & 来嵌套属性选择器，比如：

input[type="text"] {
  &:focus {
    /* 添加 focus 效果 */
  }
}

4. 嵌套同级选择器

可以使用 & 来嵌套同级选择器，比如：

.button {
  &.primary {
    /* 添加 primary 效果 */
  }

  &.danger {
    /* 添加 danger 效果 */
  }
}

5. 嵌套父选择器

可以使用 & 来嵌套父选择器，比如：

.wrapper {
  &-header {
    /* 添加 header 效果 */
  }

  &-content {
    /* 添加 content 效果 */
  }
}

这些都是 & 的常见用法，当然还有其他用法，比如结合 @at-root 或者 @each 等语句使用，但是这些用法相对比较少见。

scss 中使用boolean

在 SCSS 中，可以使用布尔值（Boolean）来控制样式的输出。以下是一个例子：

$primary-color: #007bff;
$danger-color: #dc3545;

@mixin button-variant($color, $background, $border: $background) {
  background-color: $background;
  border-color: $border;
  color: $color;
  &:hover {
    background-color: darken($background, 10%);
    border-color: darken($border, 10%);
  }
}

$use-primary: true;

.btn {
  @if $use-primary {
    @include button-variant(white, $primary-color);
  } @else {
    @include button-variant($primary-color, white, $primary-color);
  }
}

$use-danger: false;

.btn-danger {
  @if $use-danger {
    @include button-variant(white, $danger-color);
  } @else {
    @include button-variant($danger-color, white, $danger-color);
  }
}

在上面的例子中，我们定义了两个 mixin，一个是 `button-variant`，它接受三个参数：文字颜色、背景颜色和边框颜色。另一个是 `.btn`，它使用了 `@if` 条件语句来判断是否使用 `$primary-color` 作为背景颜色。