sass

| Grammar and Usage

变量 $ (Variables: $)

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

变量定义 !default (Variable Defaults: !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';
}

父选择器 & (Referencing Parent Selectors: &)

a -> &:hover
.main -> &-sideBar => .main-sideBar

属性嵌套 (Nested Properties)

.kb { font: { family: fantasy; weight: bold; } }

插值语句 #{}

字符串运算：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。字符串中插入变量 #{$value}

命令行 Interactive Shell

$ sass -i
>> "Hello, Sassy World!"  => "Hello, Sassy World!"
>> 1px + 1px + 1px  => 3px
>> #777 + #777  => #eeeeee
>> #777 + #888  => white

继承样式 @extend

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

| 控制指令 (Control Directives)

@if

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

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

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
两种格式：@for $var from <start> through <end>; @for $var from <start> to <end>

through: 条件范围包含与的值;
to: 条件范围只包含的值不包含的值;
ps: $var 可以是任何变量，比如 $i；和必须是整数值。

@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 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而是一连串的值，也就是值列表。 @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@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');
}

multipleassignment: @each $animal, $color, $cursor in (puma, black, default),
  (sea-slug, blue, pointer), (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
iscompiledto: .puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move;
}

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

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}
// 编译后
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

| 混合指令 (Mixin Directives)

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue, 1in);
}
// 给参数设置默认值
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}
// 关键词参数 (Keyword Arguments):可打乱顺序使用，使用默认值可以省缺
p {
  @include sexy-border($color: blue);
}
h1 {
  @include sexy-border($color: blue, $width: 2in);
}

参数变量 (Variable Arguments)

@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);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

向混合样式中导入内容

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

| 函数指令 (Function Directives)

$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: grid-width($n: 5);
}
编译为 #sidebar {
  width: 240px;
}

/* 自定义内外边距 */
$i: 1;
$basepx: 1px;

@while $i <=100 {
  .marT#{$i} {
    margin-top: ($basepx * $i);
  }

  .marB#{$i} {
    margin-bottom: ($basepx * $i);
  }

  .marR#{$i} {
    margin-right: ($basepx * $i);
  }

  .marL#{$i} {
    margin-left: ($basepx * $i);
  }

  .padT#{$i} {
    padding-top: ($basepx * $i);
  }

  .padB#{$i} {
    padding-bottom: ($basepx * $i);
  }

  .padR#{$i} {
    padding-right: ($basepx * $i);
  }

  .padL#{$i} {
    padding-left: ($basepx * $i);
  }

  $i: $i + 1;
}

| 配置 sass 全局变量

// vue.config.Js
css: {
  loaderOptions: {
    sass: {
      prependData: "@import \"@/assets/styles/variables.scss\";"
    }
  }
}

// vite.config.Js
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "/@/style/element-variables.scss" as *;`,
    },
  },
}

方法一：

/* 配置 sass全局变量 start ---------*/
// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
  return path.resolve(__dirname, '../src/assets/css/' + name);
}

function generateSassResourceLoader() {
  var loaders = [
    cssLoader,
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
        resources: [
          resolveResource('variables.scss'),
          resolveResource('custom.scss'),
          resolveResource('mixin.scss'),
        ],
      },
    },
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
    });
  } else {
    return ['vue-style-loader'].concat(loaders);
  }
}
/* 配置 sass全局变量 end ---------*/

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // sass: generateLoaders('sass', { indentedSyntax: true }),
  // scss: generateLoaders('sass'),
  // 修改 sass 和 scss
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus'),
};

方法二：

// utils.js;
return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // scss: generateLoaders('sass'), // 原来的
  scss: generateLoaders('sass').concat({ // 修改后的
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/css/variable.scss'), // scss variable setting
    },
  }),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus'),
};