面试问到SASS高级语法在项目中的应用该如何回答？仿element-ui的使用方式。

亲身经历

sass基本语法想必大家都能掌握，但本身我们的项目复杂度不够高，小型公司又没有自己的前端规范，基本上想怎么写就怎么写。导致我们长时间做一些低级的 dirty work。那些高级语法更是从未用到。

本文主旨在于例举一些较为常用语法，以及本人在项目中的使用，意在与各位初级工程师互相交流学习，大佬就请绕道吧。

BEM规范

在这里贴出一篇BEM的基本介绍文章 编写模块化CSS：BEM

在这里贴出一篇文章，关于BEM规范的常见问题已经给出了很棒的解决方案。 关于BEM规范的十个常见问题

代码示例

需求如图所示，生成一个头部导航。（抱歉只截个header，公司项目，需要小小保密）

html结构

<template>
  <header class="t-header">
    <!-- t 的含义是top，代表页面顶部header   其实就是el-header  我们写的是自己的组件，所以不需要el作为标识。-->
    <!-- 页面内其他容器可能也包含header，为了不与其他容器混淆，增加自己独有标识t -->
    <div class="t-header__container">
      <div v-for="(item) in sublist" :key="item.name" class="t-header__item">
        {{ item.name }}
      </div>
    </div>
  </header>
</template>

export default {
  name: 'Index',
  data() {
    return {
      sublist: [
        { name: '首页', path: 'home' },
        { name: '赛事引言', path: 'describe' },
        { name: '赛程安排', path: 'plan' },
        { name: '奖项设置', path: 'reward' },
        { name: '组织单位', path: 'unit' },
        { name: '联系方式', path: 'rank' },
      ],
    }
  },

sass语法 （正文开始）

• 利用sass变量，提前定义命名空间和mixin文件。利用sass特性，使用传参的方式生成我们想要的class类名。
• 在组件内部使用mixin 语法。
• 其实颜色和背景图等变量可以在声明文件中定义。但是由于项目着实太小，且共用部分不多，于是便定义在组件内部。

定义命名空间变量

// BEM 代码块 元素 修饰符
// el-button__header 按钮模块的 头部代码
// el-button--info  按钮模块的info状态样式
// is-distable 禁用状态的代码
$namespace:'el';//修饰命名空间 本例中没有使用到
$state-prefix:'is-';// 修饰状态
$modifier-separator:'--';// 修饰类型
$element-separator:'__';// 划分空间分隔符

定义mixin

@import "./var";// 引入定义的变量

@mixin b($namespace,$block) {
  // 重新定义一个变量B,  值是b函数传入的前缀和名字
  // global 声明全局变量
  $B: $namespace+'-'+$block !global;
  // # 取表达式里面的值，放在#号的位置。编译完成就是.el-btn
  .#{$B}{
    //放入原有样式
    @content
  }
}
// 使用方法示例：真正使用时，并不会在这个文件中使用，这个文件专门生成mixin。
// include 就是调用mixin的意思。假如mixin相当于js的函数，include就是调用函数。
@include b(t, header) {
    background: #fff
}
// 会编译为
.t-header{
    background: #fff
}

-------------------------------分割线---------------------------------

// .z-button.is-dissabled
@mixin when($state) {
  // @at-root声明在根下，跳出所有父级选择器
  @at-root {
    // &将父选择器取出来，放到&符号的位置
    &.#{$state-prefix + $state}{
      @content;
    }
  }
}

// 使用方法示例：真正使用时，并不会在这个文件中使用，这个文件专门生成mixin。
@include b(t, header) {
    @include when(active) {
        color:#fff
    }
}
// 会编译为
.t-header.is-active{
    color: #fff
}
-------------------------------分割线---------------------------------


// &--primary ==> .el-button--primary
@mixin m($modifier) {
  @at-root {
    #{ & + $modifier-separator + $modifier }{
      @content;
    }
  }
}
// 使用方法示例：真正使用时，并不会在这个文件中使用，这个文件专门生成mixin。
@include b(t, header) {
    @include m(primary) {
        color:#fff
    }
}
// 会编译为
.t-header--primary{
    color: #fff
}
-------------------------------分割线---------------------------------



@mixin e($element){
  @at-root{
    &{
      #{"." + $B + $element-separator + $element}{
        @content
      }
    }
  }
}

// 使用方法示例：真正使用时，并不会在这个文件中使用，这个文件专门生成mixin。
@include b(t, header) {
    @include e(primary) {
        color:#fff
    }
}
// 会编译为
.t-header{
    .t-header__item{
        color: #fff
    }
}

header 组件中如何使用mixin来书写自己的样式？

// 将各种颜色定义在css开头，当下次定制化项目来临时，直接更改颜色和图片即可。
// 不需要在css中逐一寻找
$front-color-default: #fff;
$front-color-active: #000;
$front-color-hover: #000;
$header-bg: rgba(0, 122, 224, .7);
$header-bg-active: #fff;
$header-bg-hover: #fff;

// t-header
@include b(t, header) {
  background: $header-bg;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
  line-height: 60px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  cursor: pointer;

  // t-header__container
  @include e(container) {
    float: right;
  }
  // t-header__item
  @include e(item) {
    color: $front-color-default;
    width: 150px;
    text-align: center;
    float: left;
    &:hover{
      transition: .3s;
      background: $header-bg-hover;
      color: $front-color-hover;
    }

    // 激活状态的样式 is-active
    @include when(active) {
      color: $header-bg-active;
    }
  }
}

具体可以查看我的github：github.com/TimmyYagami…

总结：以上就是sass几种语法在项目中的应用方式啦！我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！