elementui样式库分析——alert
时间:2019-09-26
本文章向大家介绍elementui样式库分析——alert,主要包括elementui样式库分析——alert使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我以elementui中alert组件为例展开。el用的是sass预编译器,具体语法在https://www.sasscss.com中查询。
目录结构分析
主要用到这两个。BEM是啥?是一个命名规范,具体看这里 https://zhuanlan.zhihu.com/p/33188830。
好了,主要说一下mixins.scss这个。var.scss可以理解成一个配置文件(颜色、字体大小、圆角大小之类的)。
mixins.scss 的任务是动态生成 “el-alert__... ” 这种格式的class
/* BEM -------------------------- */ /** 插值 套一层class="el-.." 在一个选择器内声明变量(如:$B、$E),嵌套在里面的其他选择器都可以访问到它 */ @mixin b($block) { $B: $namespace+'-'+$block !global; .#{$B} { @content; } } /** 插值 套一层class="el-title__..." at-root:输出到根层级上 */ @mixin e($element) { $E: $element !global; $selector: &; $currentSelector: ""; @each $unit in $element { $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; } @if hitAllSpecialNestRule($selector) { @at-root { #{$selector} { #{$currentSelector} { @content; } } } } @else { @at-root { #{$currentSelector} { @content; } } } } /** 插值 套一层class="...__content" */ @mixin m($modifier) { $selector: &; $currentSelector: ""; @each $unit in $modifier { $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; } @at-root { #{$currentSelector} { @content; } } }
原文地址:https://www.cnblogs.com/sunday123/p/11589395.html
- 基于 Spring Cloud 完整的微服务架构实战
- maven build时报错Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test
- Spring Cloud(九)高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务
- Spring Cloud(八)高可用的分布式配置中心 Spring Cloud Config
- 用Raspberry Pi Zero打造「即插即用」的Web服务器
- Spring Cloud(七)服务网关 Zuul Filter 使用
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
- Spring Cloud(六)服务网关 zuul 快速入门
- Docker Registry Server 搭建,配置免费HTTPS证书,及拥有权限认证、TLS 的私有仓库
- Ubuntu 17.04 编译安装 Nginx 1.9.9 配置 https 免费证书
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- Docker Image 解决镜像无法删除的问题
- Docker Hub 仓库使用,及搭建 Docker Registry
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法