sass继承
@extend
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。
scss.style

css.style

从sass 3.2.0以后就可以定义占位选择器%。
这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
scss.style


css.style


定义了两个占位选择器%ir和%clearfix,其中%clearfix这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。
ps:在@media中暂时不能@extend @media外的代码片段,以后将会可以。
sass继承的更多相关文章
- sass 继承 占位符 %placeholder
@extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- Css预处理器实践之Sass、Less大比拼
xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难 ...
- CSS预处理器实践之Sass、Less比较
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- Sass基本特性
Sass扩展/继承@extend 代码的继承,声明方式:.class;调用方式:@extend 如: .btn { border: 1px solid #ccc; padding: 6px 10px; ...
- DOM常用操作,Sass基础
一个元素的子元素个数ParentNode.childElementCount 只读属性返回一个无符号长整型数字,表示给定元素的子元素数. 取消当前事件e.preventDefault();有时候我们选 ...
- CSS之 sass、less、stylus 预处理器的使用方式
更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490 使用变量: sass: 使用 $ 符号定义变量,如: $ba ...
- SCSS入门
1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处 ...
- SCSS详解
SCSS入门 CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...
随机推荐
- 华为敏捷DevOps实践:产品经理如何开好敏捷回顾会议
大家好,我是华为云DevCloud项目管理服务的产品经理 恒少:) 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数.我希望借助 ...
- 使用@符号让C#中的保留字做变量名的方法详解
原来还有一种办法就是加@符号(看了@符号的作用又多了一个): 复制代码代码如下: class @int { static void Main(string[] args) ...
- 删除outlook2007账户
开始-设置-控制面板-邮件-显示配置文件-删除-确定
- 图解SQL Server 2008入门必会
图解SQL Server 2008入门必会 https://jingyan.baidu.com/article/656db918eded1ee381249c0b.html 图解SQL Server ...
- javascript JSON. 转换 注意事项
JSON.stringify() 会舍弃 方法..只有属性才会转换成 json 字符串,所以 用 JSON.stringify()=='{}' 来判断对象是否为空 是错误的!!!! 正确的做法 是 ...
- rest-assured的日志使用介绍
在许多测试用例当中,为了帮助我们创建正确的断言和发送正确的请求,打印出详细的响应和请求数据是非常有用的.为此我们可以使用rest-assured提供的预定义过滤器或者使用其中的一些快捷方法. 一.请求 ...
- Luogu P1272 重建道路 树形DP
刚才瞅了半天自己当初写的,终于瞅出来了...QWQ 设f[i][j]表示以i为根的子树,包含j个节点所需砍掉的最小边数 那么可知f[u][1]=u的度: 方程:f[u][j]=min(f[u][j], ...
- POJ1077 Eight A*
这个题扔到A*可也还行... 定义估价函数h():为每个数或空格的位置 到 最终状态中所在位置 的 曼哈顿距离 的 总和. 把状态压成一个九进制数,便于存储和判重. 然后记录方案可以记录一下此次的操作 ...
- 江西理工大学南昌校区排名赛 E: 单身狗的种树游戏
题目描述 萌樱花是一只单身狗. 萌樱花今天决定种树,于是他来到了自己家的后院. 萌樱花的后院有n个树坑,所有树坑排列在一行上,每一个树坑都可以种一棵树,相邻树坑间的距离为1,现在所有的树坑都是空着的. ...
- VBS虚拟键盘十六进制列表
Set WshShell=WScript.CreateObject("WScript.Shell") '打开我的电脑WshShell.Sendkeys chr(&h88b6 ...