sass用法

sass用法

关键词	含义
@mixin	定义样式块（像函数）
@content	插槽位，调用者注入内容
@at-root	脱离当前嵌套层级，写到顶层
#{}	SCSS 插值，拼接字符串生成类名

<template>
  <div>
    <div>scss</div>
    <a>& 当前元素</a>
    <div id="main">变量 $</div>
    <p class="foo">插值语句 #{}</p>
    <div id="content">!default</div>
    <div class="d">
      <div class="dja">
        <span>span</span>
        <div>div</div>
      </div>
    </div>
    <div class="error intrusion">Oh no! You've been hacked!</div>
    <div class="seriousError">Oh no! You've been hacked!2</div>

    <div class="a-if">if</div>

    <div>
      <div v-for="item in 3" :class="[`item-${item}`]">{{ item }}</div>
    </div>

    <div>
      <div v-for="item in animals" :key="item" :class="[`${item}-icon`]">
        {{ item }}
      </div>
    </div>

    <div class="silly-links">silly-links</div>

    <div class="primary">primary</div>

    <div id="sidebar">sidebar</div>
  </div>
</template>

<script setup>
import { ref } from "vue";

let animals = ref(["puma", "sea-slug", "egret", "salamander"]);
</script>

<style lang="scss" scoped>
// 1. & 当前元素
// 2. 变量 $
// 3. 插值语句 #{}
// 4. 变量定义默认值
// 5. @extend 继承
// 6. @debug
// 7. @if
// 8. @for 值必须是整数
// 9. @each <list>
// 10. @mixin @include 混合使用
// 11. 参数
// 12. sass 函数指令
// 13. @content 是一个占位符
// 就像 JS 里的回调函数，或 Vue 里的 <slot>，你可以这样理解它：

// @mixin e($elem) {
//   $name: $b + $element-connect + $elem;
//   @at-root {
//     #{$name} {
//       @content;
//     }
//   }
// }

$width: 50px;
$color: blue;

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

#main {
  color: $color;
}

$name: foo;

$attr: border;

p.#{$name} {
  #{$attr}: 1px solid;
  #{$attr}-color: red;
}

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

#content {
  content: $content;
}

.d {
  // @import "./dja.scss";
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error.intrusion {
  background-image: url("@/assets/static/images/flowers.jpg");
}

.seriousError {
  @extend .error;
  border-width: 3px;
  @debug 10em + 14em;
}

$type: monster;

.a-if {
  @if $type == ocean {
    color: skyblue;
  } @else if $type == matador {
    color: aqua;
  } @else if $type == monster {
    color: rosybrown;
  } @else {
    color: black;
  }
}

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

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

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

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

$values: #ff0000, #00ff00, #0000ff;

.primary {
  @include colors($values...);
}

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

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

#sidebar {
  width: grid-width(5);
}
</style>

留个问题：

@extend 和 @mixin/@include 都是用来复用样式的，但它们的工作机制不同，使用场景也不一样。