当前位置: 首页 > news >正文

08 vue3之认识bem架构及less sass 和scoped

bem架构

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

1. BEM架构

      1. 介绍

        1. BEM是Block Element Modifier的缩写

        2. Block:块,代表一个独立的模块,如:header、container、menu

        3. Element:元素,代表块中的组成部分,如:header__logo、menu__item

        4. Modifier:修饰符,代表块或元素的不同状态,如:menu__item_active、menu__item_disabled

 

BEM 命名约定的模式是:

.block {}  // el-input 代表码一个块
 
.block__element {} // el-input__inner  代表一个元素或者内容
 
.block--modifier {} //el-button--success 样式一样 颜色不同可自定义修饰符

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

// 使用sass 最小单元复刻一个bem 架构
$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;
$namespace: "ck" !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;}}
}

 全局引入bem.css

不能直接再app.vue以@import url();是无效

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';"}}}
})

 在页面中使用

<template><div class="ck-wraps">块级<div class="ck-wraps__right">元素<span class="ck-wraps--success">修饰符</span></div></div>
</template><script lang="ts" setup>
import { ref, reactive } from "vue";
</script><style lang="scss" scoped>
@include b("wraps") {color: red;@include e(right) {color: pink;}@include m(success) {color: blue;}
}
</style>

09 vue3之组件传参-CSDN博客文章浏览阅读2次。09 vue3之组件传参。https://blog.csdn.net/qq_37550440/article/details/142212697?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22142212697%22%2C%22source%22%3A%22qq_37550440%22%7D

相关文章:

08 vue3之认识bem架构及less sass 和scoped

bem架构 他是一种css架构 oocss 实现的一种 &#xff08;面向对象css&#xff09; &#xff0c;BEM实际上是block、element、modifier的缩写&#xff0c;分别为块层、元素层、修饰符层&#xff0c;element UI 也使用的是这种架构 1. BEM架构 1. 介绍 1. BEM是Block Element M…...

静态库的制作

静态库是一组对象文件的集合&#xff0c;它们在编译时被链接到可执行文件中。这意味着&#xff0c;静态库中的代码会被复制到每个使用它的程序中&#xff0c;因此静态库不需要在程序运行时被单独加载。制作静态库可以帮助你将常用的代码模块化、重用&#xff0c;简化开发过程。…...

PHP在现代Web开发中的高效应用与最佳实践

PHP在现代Web开发中的高效应用与最佳实践 在快速迭代的Web开发领域&#xff0c;PHP作为一门历史悠久且广泛应用的服务器端脚本语言&#xff0c;始终保持着其独特的魅力和强大的生命力。从简单的动态网页到复杂的企业级应用&#xff0c;PHP凭借其易学性、丰富的库支持和广泛的社…...

大数据-134 - ClickHouse 集群三节点 安装配置启动

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

2024网络安全人才实战能力白皮书安全测试评估篇

9月10日&#xff0c;国内首个聚焦“安全测试评估”的白皮书——《网络安全人才实战能力白皮书-安全测试评估篇》&#xff08;以下简称“白皮书”&#xff09;在国家网络安全宣传周正式发布。 作为《网络安全人才实战能力白皮书》的第三篇章&#xff0c;本次白皮书聚焦“安全测…...

[项目][WebServer][解析错误处理]详细讲解

可为每种情况都确实对应一个状态码&#xff0c;当发生错误时&#xff0c;跳转到对应的html页面即可但是为了代码的复用性&#xff0c;可以将所有的错误情况都归置处理 #define SEP ": " #define LINE_END "\r\n" #define WEB_ROOT "wwwroot" #…...

51单片机应用开发---数码管的控制应用

实现目标 1、掌握数码管结构、驱动原理&#xff1b; 2、 一、什么是数码管&#xff1f; 1.数码管定义 数码管&#xff0c;也称为LED数码管&#xff0c;基本单元是发光二极管(LED)。分为七段数码管和八段数码管(多一个小数点DP)。数码管在我们生活中无处不在&#xff0c;比如…...

Vue3+Django5+REST Framework开发电脑管理系统

前端&#xff1a;Vue3TypeScript 后端&#xff1a;Django5REST Framework 功能介绍 用户管理角色管理菜单管理配件管理仓库管理类型管理电脑管理入库管理出库管理库存管理收发明细管理 界面预览 源码地址&#xff1a;managesystem: 电脑管理系统...

Java8函数式接口全攻略

一、接口大白话 1.四大基础接口 Consumer<T> 核心方法&#xff1a;void accept(T t);消费者。接受一个输入参数&#xff0c;不返回任何结果的操作。望文生义&#xff1a;你给我啥&#xff0c;我就执行啥&#xff0c;没有结果。 Supplier<T> 核心方法: T get();供…...

英文软件汉化中文软件教程asi exe dll 等汉化教程

相信大家在使用国际软件的时候&#xff0c;会经常碰到英文类型的软件 或者玩一些游戏使用一些工具&#xff0c;也基本都是外网的&#xff0c;那么对于用户来讲 就会非常的不方便&#xff01; 小编为大家整理了一些国内大佬出的的英文软件汉化中文软件的视频教程 教程分为EX…...

HTTP 请求方式`application/x-www-form-urlencoded` 与 `application/json` 怎么用?有什么区别?

HTTP 请求方式总结&#xff1a;application/x-www-form-urlencoded 与 application/json 在前后端交互中&#xff0c;客户端发送数据到服务器的常见方式有两种&#xff1a;application/x-www-form-urlencoded 和 application/json。本文将详细介绍这两种请求方式的特点、使用方…...

prometheus 集成 grafana 保姆级别安装部署

前言 本文 grafana 展示效果只需要 prometheus node_exporter grafana 其他的选择安装 环境和版本号 系统: CentOS 7.9 prometheus: 2.54.1 pushgateway: 1.9.0 node_exporter: 1.8.2 alertmanager: 0.27.0 grafana:11.2.0 官网:https://prometheus.io/ 下载地址:h…...

Apache SeaTunnel Committer 进阶指南

Apache SeaTunnel 作为一个开源的数据集成工具&#xff0c;旨在简化和加速海量数据的采集和传输。 社区的 Committer 是指拥有项目存储库的写权限的社区成员&#xff0c;即 Committer 可以自行修改代码、文档和网站&#xff0c;也可以合并其他成员的贡献。成为 Apache SeaTunn…...

组件上的v-model(数据传递),props验证,自定义事件,计算属性

一.props验证 在封装组件时对外界传递过来的props数据进行合法性校验&#xff0c;从而防止数据不合法问题。 1.基础类型检查 String,Number,Boolean,Array,Object,Date,Function,Symbol 2.多个可能的类型 3.必须项校验 4.属性默认值 5.自定义验证函数 <template>&…...

mfc140u.dll文件错误的相关修复方法,4种方法修复mfc140u.dll

当面对基于Microsoft Visual C开发的应用程序出现启动或运行失败时&#xff0c;mfc140u.dll文件错误往往是罪魁祸首之一。这个动态链接库&#xff08;DLL&#xff09;文件对于许多Windows软件来说是必不可少的&#xff0c;因为它包含了重要的编程代码和数据。如果发现此文件损坏…...

Redis中使用布隆过滤器解决缓存穿透问题

一、缓存穿透(失效)问题 缓存穿透是指查询一个一定不存在的数据&#xff0c;由于缓存中没有命中&#xff0c;会去数据库中查询&#xff0c;而数据库中也没有该数据&#xff0c;并且每次查询都不会命中缓存&#xff0c;从而每次请求都直接打到了数据库上&#xff0c;这会给数据…...

css百分比布局中height:100%不起作用

百分比布局时&#xff0c;我们有时候会遇到给高度 height 设置百分比后无效的情况&#xff0c;而宽度设置百分比却是正常的。 当为一个元素的高度设定为百分比高度时&#xff0c;是相对于父元素的高度来计算的。当没有给父元素设置高度&#xff08;height&#xff09;时或设置…...

java程序员入行科目一之CRUD轻松入门教程(二)

封装工具类 封装获取连接&释放资源操作 在实际使用JDBC的时候&#xff0c;很多操作都是固定的&#xff0c;没有必要每次都去注册驱动&#xff0c;获取链接对象等等。 同样&#xff0c;释放资源的close操作也可以封装一下 下面是封装好的具体工具类 package com.jimihua.u…...

(不用互三)解密AI创作:提升Prompt提示词的提问技巧

文章目录 &#x1f34a;AI创作的核心&#xff1a;提示词 Prompt 的重要性1. 什么是提示词工程&#xff1f;1.1 提示词的工作原理1.2 高薪提示词工程师的现实1.3 谁能胜任提示词工程师&#xff1f; 2. 提示词编写技巧3. 常见的提示词框架3.1 CO-STAR 框架3.2 BORKE 框架 4. 提示…...

Python 错误 ValueError 解析,实际错误实例详解 (二)

文章目录 前言Python 中错误 ValueError: Not Enough Values to UnpackPython 中的 ValueError 是什么修复Python字典中 ValueError:ValueError: not enough values to unpack修复Python中 ValueError:not enough values to unpackPython 中错误 ValueError: Setting an Arra…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...