简介:今天在调试前端样式的时候,el-button组件位置需要调整并且 需要改字体大小 。直接上了一个 font-text:20px; 发现没作用,谷歌调试发现并未作用到组件里的<span></span>标签上,于是需要深入到组件中的span标签加样式

<span class="tree-append-delete">
<el-button size="mini" type="text" on-click={ () => this.append(data) }> + </el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }> - </el-button>
</span> //css
<style scoped>
 .tree-append-delete {
   margin-left: 40px;
}
.tree-append-delete > span{
   font-size: 20px;
}
</style> //引入scss之后的简便写法
<style lang="scss" scoped>
 .tree-append-delete {
   margin-left: 40px;
   span {
     font-size: 20px; 
   }
}
</style>

总结:scss 可以简化我们定义css时候 定位重复的繁琐代码

初步知道scss 简化css复杂层级的更多相关文章

  1. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  2. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...

  3. CSS:z-index层级在IE中无效

    引用地址:http://apps.hi.baidu.com/share/detail/19853262 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前 ...

  4. 经验分享:使用 Restyle.js 简化 CSS 预处理

    Andrea Giammarchi的restyle.js是一个新的,基于JavaScript的CSS预处理器,能够运行在服务端(通过Node.js)或者浏览器中.它宣称自己是“一种简化的CSS方法”, ...

  5. 使用scss为css样式自动添加浏览器前缀

    当一个浏览器实现一个新的属性.值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别. 浏览器使用前缀来尝试一些新属性.值和选择器,即使他们还没有最 ...

  6. css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

    适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码,稍作修改可以生成下图.css代码如下: @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ ...

  7. 一天搞定CSS:层级(z-index)--18

    因为定位的出现,所以有了元素重叠的情况,此时就出现了显示谁的情况.在多层布局时,容易出现这种情况 定位position见:http://blog.csdn.net/baidu_37107022/art ...

  8. [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用

    在我们的产品中,均使用CSS Modules来作为样式解决方案,大致的代码是这样的: import React from 'react'; import styles from './table.cs ...

  9. [SCSS] Pure CSS for multiline truncation with ellipsis

    1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font’s load event 4. Cross browser

随机推荐

  1. IDEA 2019版本永久破解教程

    1.第一步解压文件(文件网盘下载链接在下面) 2.运行IDEA安装包 3.点击Next 4.注意安装位置文件夹不要带中文-选择好点击Next 5.勾选64-bit launcher,勾选.java,点 ...

  2. 重学 Java 设计模式:实战中介者模式「按照Mybaits原理手写ORM框架,给JDBC方式操作数据库增加中介者场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 同龄人的差距是从什么时候拉开的 同样的幼儿园.同样的小学.一样 ...

  3. CodeForces 3 D.Least Cost Bracket Sequence【贪心+优先队列】

    Description 给出一个括号序列,中间有一些问号,将第i个问号换成左括号代价是a[i],换成右括号代价是b[i],问如果用最少的代价将这个括号序列变成一个合法的括号序列 Input 第一行一个 ...

  4. 你知道Redis可以实现延迟队列吗?

    最近,又重新学习了下Redis,深深被Redis的魅力所折服,我才知道Redis不仅能快还能慢(我想也这么优秀o(╥﹏╥)o),简直是个利器呀. 咳咳咳,大家不要误会,本文很正经的啦! 好了,接下来回 ...

  5. idea2020.1.2破解,亲测可行,激活至2089年!

    一.下载最新版IDEA2020安装包 官网:https://www.jetbrains.com/idea/download/ 旧版:https://www.jetbrains.com/idea/dow ...

  6. NLP(一)

    “自然语言处理”(Natural Language Processing 简称 NLP)包含所有用计算机对自然语言进行的操作. 自然语言工具包(NLTK) 语言处理任务与相应 NLTK 模块以及功能描 ...

  7. HTTPS连接建立过程(单向&双向)

    HTTPS连接建立过程(单向&双向) 什么是https SSL(Secure Sockets Layer 安全套接字协议),及其继任者传输层安全(Transport Layer Securit ...

  8. 【经典DP】洛谷 P2782 友好城市

    嘤嘤嘤,昨天两个文化课老师在上奥赛时招呼我(亲切交流),今天又要写工作报告,没时间写题解,希望今天能补上 友好城市 题目://洛谷那粘来的题面竟然能把格式粘过来 题目描述 有一条横贯东西的大河,河有笔 ...

  9. Buy a Ticket,题解

    题目连接 题意: 没个位置有一个点权,每个边有一个边权,求对于每个点u的min(2*d(u,v)+val[v])(v可以等于u) 分析: 我们想这样一个问题,从u到v的边权*2再加一个点权就完了,我们 ...

  10. (二)pandas处理丢失数据

    处理丢失数据 有两种丢失数据: None np.nan(NaN) import numpy as np type(None) NoneType type(np.nan) float 1. None N ...