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更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...
随机推荐
- linux安装数据库
1.登录数据库 mysql -u root -p xxxxxx 2.创建数据库 create database xx; 3.use xx; 4.source xx.sql
- SDUT OJ 顺序表应用5:有序顺序表归并
顺序表应用5:有序顺序表归并 Time Limit: 100 ms Memory Limit: 880 KiB Submit Statistic Discuss Problem Description ...
- vue脚手架的安装和使用
脚手架安装:
- scrapy 请求和响应
scrapy Request类的一些参数意义 url: 就是需要请求,并进行下一步处理的url callback: 指定该请求返回的Response,由那个函数来处理. method: 一般不需要指定 ...
- struts2学习笔记(五)—— OGNL
一.OGNL概述 1.1 什么是OGNL OGNL的全称是对象图导航语言( object-graph Navigation Language),它是一种功能强大的开源表达式语言,使用这种表达式语言,可 ...
- C++_函数2-内联函数
内联函数的目的是为了提高程序运行速度所做的一项改进. 常规函数与内联函数的区别不在于编写方式,而在于C++编译器如何将它们组合到程序中. 编译过程的最终产品是:可执行程序,由一组机器语言指令组成.运行 ...
- CMakeFiles/species.inc.dir/build.make:57: recipe for target 'CMakeFiles/species.inc' failed
新装的WSL编译2017.3.4版本的mfix,只要涉及到带化学反应的就会报错: 由于之前从没遇到过,对cmake又不熟悉,所以有些摸不着头脑,后来仔细查看报错提示,发现是在CMakeFiles/sp ...
- Python-list()之remove()/pop() I /del()
代码块 remove #remove删除首个符合条件的元素,并不删除特定的索引. n =[1,2,2,3,4,5] n.remove(3) print (n) #输出 [1, 2, 2, 4, 5] ...
- Mutation and Iteration
avoid mutating a list as you are iterating over it 代码: def remove_dups(L1,L2): for e in L1: if e in ...
- Maven-常规问题
1.编译(compile)Maven项目时,报错: -Dmaven.multiModuleProjectDirectory system property is not set. 处理方案:Windo ...