experience
The basic syntax of SASS should be well understood, but our project complexity is not high enough, and small companies don’t have their own front-end specifications, so they can basically write whatever they want. As a result, we do some low-level dirty work for a long time. Advanced grammar is never used.
The purpose of this article is to give some examples of common grammar, and my use in the project, intended to exchange and learn from the junior engineers, please detour.
BEM specification
Too long to look at version: BEM is the CSS naming convention used by Element-UI. The example in this article also mimics the functionality implemented by Element.
Here post a basic introduction to writing modular CSS: BEM
Post an article here with a great solution to a common problem with the BEM specification. Ten frequently asked questions about the BEM specification
Code sample
The framework used in this paper is VUe2 + SASS
HTML structure
<template>
<header class="t-header">
<! -- T stands for top, the top of the page. Header is actually el-header. We're writing our own component, so we don't need el. -->
<! Other containers on the page may also contain headers. To avoid confusion with other containers, add your own unique identifier 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>
Copy the codeexport default {
name: 'Index'.data() {
return {
sublist: [{name: 'home'.path: 'home' },
{ name: 'Event Introduction'.path: 'describe' },
{ name: 'Fixture arrangement'.path: 'plan' },
{ name: 'Award Setting'.path: 'reward' },
{ name: 'Organizational unit'.path: 'unit' },
{ name: 'Contact Information'.path: 'rank'},]}},Copy the codeSass Syntax (start of text)
Design idea:
- Use sass variables to define namespaces and mixin files in advance. Use the sASS feature to generate the desired class name by passing arguments.
- Use mixin syntax inside components.
- Variables such as color and background images can be defined in declaration files. But because the project was too small and shared too little, it was defined inside the component.
Define namespace variables
// BEM code block element modifier
// The header code of the el-button__header button module
// el-button--info Specifies the info status style of the button module
// is-distable disables the state code
$namespace:'el';// Modify the namespace that is not used in this example
$state-prefix:'is-';// Modify the state
$modifier-separator:The '-';// Modify the type
$element-separator:'__';// Divide the space delimiter
Copy the codeDefine a mixin
@import "./var";// Introduce a defined variable
@mixin b($namespace,$block) {
// redefine a variable B with the prefix and name passed in by the function B
// global declares global variables
$B: $namespace+The '-'+$block !global;
// # take the value of the expression and place it in position #. When you compile it, you get.el-btn
.#{$B}{
// Add the original style
@content
}
}
// Example usage: When actually used, it is not used in this file, which specifically generates mixins.
// include means to call mixin. If mixins are js functions, include is a calling function.
@include b(t, header) {
background: #fff
}
// will compile to
.t-header{
background: # FFF} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --// .z-button.is-dissabled
@mixin when($state) {
// @at-root declares that under the root, all parent selectors are jumped
@at-root {
// & takes the parent selector out and places it in the ampersand position&.#{$state-prefix + $state}{ @content; }}}// Example usage: When actually used, it is not used in this file, which specifically generates mixins.
@include b(t, header) {
@include when(active) {
color:#fff
}
}
// will compile to
.t-header.is-active{
color: # FFF} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --// &--primary ==> .el-button--primary
@mixin m($modifier){ @at-root { #{ & + $modifier-separator + $modifier }{ @content; }}}// Example usage: When actually used, it is not used in this file, which specifically generates mixins.
@include b(t, header) {
@include m(primary) {
color:#fff
}
}
// will compile to
.t-header--primary{
color: # FFF} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- @ mixinse($element){
@at-root{
&{
#{"." + $B + $element-separator + $element}{
@content
}
}
}
}
// Example usage: When actually used, it is not used in this file, which specifically generates mixins.
@include b(t, header) {
@include e(primary) {
color:#fff
}
}
// will compile to
.t-header{
.t-header__item{
color: #fff
}
}
Copy the codeHow can mixins be used in header components to write their own styles?
// Define the colors at the beginning of the CSS. When the next customization project comes, change the colors and images directly.
// There is no need to search through the 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;
}
// The active state style is IS-active
@include when(active) {
color: $header-bg-active; }}}Copy the code