简介:今天在调试前端样式的时候,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. Python对文本读写的操作方法【源码】

    Dear ALL 今天给大家分享的是 TXT文本读写方式,也是文件操作最常用的一种方式,主要内容有: 文件写方法 文件读方法 with open() as f 方法 话不多说,码上见: ''' 标题: ...

  2. Python 简明教程 ---10,Python 列表

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 程序 = 算法 + 数据结构 -- Nicklaus Wirth 目录 从这句话程序 = 算法 + ...

  3. Codeforces Round #651 (Div. 2)

    感觉自己无可救药了. A题:找到小于等于n的两个不同的数的gcd最大是多少,显然是floort(n/2).设这两数是a * gcd, b * gcd然后gcd(a,b) = 1,那么gcd要尽量大,不 ...

  4. vue与react对比总结(一)

    一.react和vue设计上的共同理念 1.使用 Virtual DOM 2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 3.将注意力集中保持在核心库,而将其 ...

  5. 堆/题解 P3378 【【模板】堆】

    概念: 堆就是一颗二叉树,满足父亲节点总是比儿子节点大(小).因此,堆也分为大根堆和小根堆,大根堆就是父亲节点比儿子节点大,小根堆正好相反.注意加粗的地方,是每一个节点哦!!!!! 还是直接看例题吧, ...

  6. linux简单介绍

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. linux基本思想有两点,1.一切都是文件:2.每个软件有确定 ...

  7. 浅谈JVM和垃圾回收

    写在前面 简单的介绍一下JVM(Java Virtual Machine)吧,它也叫Java虚拟机.虽然它叫虚拟机,但是实际上不是我们所理解的虚拟机,它更像操作系统中的一个进程.JVM屏蔽了各个操作系 ...

  8. 「疫期集训day10」玫瑰

    不管我们在怎么抵抗,德国都已经败了----失守苏瓦松后绝望中的德国兵 (貌似今天的题记和内容毫无关系) 觉得以后还是不要抱怨考试失误了,感觉没啥大用 T1暴搜/状压(然俄一看题很像刚写过的二分答案,上 ...

  9. [PA2015]Siano 单调栈

    由于某人找了个单调栈的题解但是没研究透所以让我们来研究............ 首先先来考虑下面一种情况,假设第\(k\)次切割时,天数为\(d_k\),高度为\(b_k\),第\(k+1\)次切割时 ...

  10. C#foreach原理

    本文主要记录我在学习C#中foreach遍历原理的心得体会. 对集合中的要素进行遍历是所有编码中经常涉及到的操作,因此大部分编程语言都把此过程写进了语法中,比如C#中的foreach.经常会看到下面的 ...