当前位置: 首页 > 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…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...