scss

在 上一篇 scss 讲解了 用js 的方式打开 scss，这篇我们在实战中使用他们

导入外部变量

有时候一个变量需要多个文件中都需要使用，这个时候就需要把变量抽离出去，达到复用的效果

举例来讲 config.scss 文件定义变量，function.scss 使用变量，因为是不同的文件下，所以这个时候就需要用到引用

config.scss 直接定义，不需要 使用 export 等 js 方式导出

/* config.scss */
$namespace: 'el' !default;
$common-separator: '-' !default;
$element-separator: '__' !default;
$modifier-separator: '--' !default;
$state-prefix: 'is-' !default;

有两种引入方法 在 function.scss 中，使用 @use 'config'(因为是在同一个文件目录下) 直接引入; 使用的话是 config.xxx

另一种方式是 @use 'config' as *;,全量导入，不用加 conifg 前缀，直接使用$namespace

个人建议是第一种，相当于有一个命名空间，可以让其他开发人员明确的知道这个是外部引入的变量

💡 如果不想暴露某些变量呢？🧐

使用-或者 _作为变量前缀

// src/_corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;

 // 会产生错误 $-radius 不能在corners 外部使用.
  padding: 5px + corners.$-radius;
}

🦊map

类似于 js 中的 object 的概念，可以通过相应的 键 找到对应的 值，键名必须是唯一的，值可以重复 与 list 不同，map 必须用 括号括起来

举例说明：

@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

获取值(map.get)

map.get($font-weights, "medium") // 500

设置值(map.set)

map.set($font-weights, "bold", 900)
map.get($font-weights, "bold") // 900

合并值(map.merge)

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

 map.merge($light-weights, $heavy-weights);

如果两个map具有相同的键，则在返回的map中使用第二个映射的值 在 element-plus 有大量使用 map 结构的地方

$text-color: () !default;
$text-color: map.merge(
  (
    'primary': #303133,
    'regular': #606266,
    'secondary': #909399,
    'placeholder': #a8abb2,
    'disabled': #c0c4cc,
  ),
  $text-color
);
// 用户自己配置
$text-color:('primary','#ccc';)

如果想让用户自定义配置文本颜色，可以使用 map.merge 合并默认颜色和用户的颜色，因为同名map 会覆盖，那么用户的自定义配置文本颜色就会生效

❤ 参数变量 (...)

函数有时需要传递多个参数，参数的个数不固定，这个时候可以使用展开运算符,对参数进行全部收集

mixin

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

include 中使用

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

/* 全部传入*/
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

编译为

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

在函数中使用

这个是 element-plus 中有用到

@function joinVarName($list) {
  $name: '--el';
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
};

// getCssVarName('button', 'text-color') => '--el-button-text-color'
@function getCssVarName($args...) {
  @return joinVarName($args);
}

.font{
     color: var( #{getCssVarName('button', 'text-color'),"red"});   
}

其实这个 参数变量 ($agrs...) 和 js 中的展开语法有点相似，只不过 js 中的 function a(...rest){ } 是在变量的后面

👨 占位选择符(%)

看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 %，他可以像 class 或者 id 选择器那样使用，但是不会被编译到 CSS 文件中。

先看用法

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

你也会好奇，这个和 我定义一个.toolbelt,然后使用@extend 有什么区别 看输出后的 css 文件就知道了

使用 extend

很明显的看到，是用占位选择符%没有产生新的类，减小代码打包体积，而且让其他开发人员明确的知道不是单独的一个选择器 可以把常用的 css 属性提取出来,比如在 element-plus 中使用 %size

%size {
  width: 100%;
  height: 100%;
}

.image-inner{
   @include %size;
   vertical-align: top;
   opacity: 1;
}

.image-wrapper{
   @include %size;
    position: absolute;
    top: 0;
    left: 0;
}

总结

scss是一门很强大的 处理css的语言，一些前端程序员认为 css 不是那么重要，js才是前端核心， 在我看来，html css js 既然是前端的三架马车，那么就不能有短板，而且个人觉得 css 要比 js 更难一些，要学好 css 付出的精力要比 js 更多，技术没有高下之分，只要对业务有帮助的事情就应该被认真对待❤