学习Vue3 第十三章（实操组件和认识less sass 和 scoped）

概览

什么是less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

官方文档 Less 快速入门 | Less.js 中文文档 - Less 中文网

sass 和 less 一样 都是css预处理器

官方文档 Sass教程 Sass中文文档 | Sass中文网 

在vite中使用less |  sass

npm install less  -D 安装即可

npm install sass -D 安装即可

在style标签注明即可

<style lang="less">

</style>

<style lang="scss">

</style>

什么是scoped

实现组件的私有化, 当前style属性只属于当前模块.

　在DOM结构中可以发现,vue通过在DOM结构以及css样式上加了唯一标记,达到样式私有化,不污染全局的作用,

 样式穿透问题学到第三方组件精讲 ::v-deep  >>> /deep/  :deep()

bem架构

他是一种css架构 oocss 实现的一种 （面向对象css） ，BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，element UI 也使用的是这种架构

BEM 命名约定的模式是：

.block {}

.block__element {}

.block--modifier {}

 

使用sass 最小单元复刻一个bem 架构

$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;
$namespace:'xm' !default;
@mixin bfc {
    height: 100%;
    overflow: hidden;
}

//混入
@mixin b($block) {
   $B: $namespace + $block-sel + $block; //变量
   .#{$B}{ //插值语法#{}
     @content; //内容替换
   }
}

@mixin flex {
    display: flex;
}

@mixin e($element) {
    $selector:&;
    @at-root {
        #{$selector + $element-sel + $element} {
            @content;
        }
    }
}

@mixin m($modifier) {
    $selector:&;
    @at-root {
        #{$selector + $modifier-sel + $modifier} {
            @content;
        }
    }
}

全局扩充sass

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: "@import './src/bem.scss';"
            }
        }
    }
})

Vue 组件用法

<template>
    <div class="xm-wraps">
         <div>
            <Menu></Menu>
         </div>
         <div class="xm-wraps__right">
            <Header></Header>
            <Content></Content>
         </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import Menu from './Menu/index.vue'
import Content from './Content/index.vue'
import Header from './Header/index.vue'
</script>

<style lang="scss" scoped>
@include b('wraps'){
    @include bfc;
    @include flex;
    @include e(right){
        flex:1;
        display: flex;
        flex-direction: column;
    }
}
</style>