亲身经历
sass基本语法想必大家都能掌握，但本身我们的项目复杂度不够高，小型公司又没有自己的前端规范，基本上想怎么写就怎么写。导致我们长时间做一些低级的 dirty work。那些高级语法更是从未用到。
本文主旨在于例举一些较为常用语法，以及本人在项目中的使用，意在与各位初级工程师互相交流学习，大佬就请绕道吧。
BEM规范
太长不看版本：BEM就是 element-ui 所使用的css 命名规范。本文例子也是仿照element实现的相关功能。
在这里贴出一篇BEM的基本介绍文章 编写模块化CSS：BEM
在这里贴出一篇文章，关于BEM规范的常见问题已经给出了很棒的解决方案。
关于BEM规范的十个常见问题
代码示例
本文中所使用框架为 vue2 + sass
43C8CEA0-B7FC-4d20-AC60-6DCF5973ECB4.png
需求如图所示，生成一个头部导航。（抱歉只截个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:'__';// 划分空间分隔符
@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
}
}
// 将各种颜色定义在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;
}
}
}
