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更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...
随机推荐
- Puppet全面详解
1. 概述 puppet是一个开源的软件自动化配置和部署工具,它使用简单且功能强大,正得到了越来越多地关注,现在很多大型IT公司均在使用puppet对集群中的软件进行管理和部署,如google利用p ...
- win7关闭关机时的自动终止的功能
gpedit.msc->计算器配置->管理模板->系统->关机选项->启用 参考: http://www.xitongcheng.com/jiaocheng/win7_a ...
- WebApi接口 - 响应输出xml和json 转
格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码 ...
- swarm1
type 必选项,1表示container,2表示swarm stack,3表示compose stack title 必选项 description 必选项 image 必选项,该应用使用的dock ...
- Qt 学习之路 2(38):存储容器
Qt 学习之路 2(38):存储容器 豆子 2013年1月14日 Qt 学习之路 2 38条评论 存储容器(containers)有时候也被称为集合(collections),是能够在内存中存储其它特 ...
- day--39-MySQL的多表查询
多表查询一:表的基本介绍 可以参考:https://www.cnblogs.com/cdf-opensource-007/p/6517627.html 建立一个员工表信息表和一个部门表,每个员工都对应 ...
- POJ_1850 Code【组合的运用】
题目: Transmitting and memorizing information is a task that requires different coding systems for the ...
- JAVA 大数 A+B问题
A + B Problem II I have a very simple problem for you. Given two integers A and B, your job is to ca ...
- Feel Good(两遍单调栈维护区间+前缀和)
Bill is developing a new mathematical theory for human emotions. His recent investigations are dedic ...
- DVWA1.9平台XSS小结
LOW级别就不写了...... 直接上中高级别(结合源码更好理解) 1.XSS Reflected(Medium) 从源码中可以清楚的看到,输入的<script>标签被过滤掉了,看清了,只 ...