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更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...
随机推荐
- P2410 [SDOI2009]最优图像 ZKW最大费用最大流
$ \color{#0066ff}{ 题目描述 }$ 小E在好友小W的家中发现一幅神奇的图画,对此颇有兴趣.它可以被看做一个包含N×M个像素的黑白图像,为了方便起见,我们用0表示白色像素,1表示黑色像 ...
- \\.\Global\vmx86: 系统找不到指定的文件
使用vmware虚拟机时出现如下的错误: vmware安装无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件 解决办法: 新建文件,将下面的代码拷贝进去: @Echo Off ...
- github提交项目
1.建立git仓库 在GitHub上先新建一个仓库. 新建一个文件夹 cd git clone https://github.com/xxxxxxx/xxxxx.git 3.把你的项目拖进去,cd 进 ...
- QDU_CEF(补)
C - Arthur and Table Arthur has bought a beautiful big table into his new flat. When he came home, A ...
- 查找表 219.Contains Duplicate(2),217 Contain Duplicate, 220(3)
思路:滑动窗口(长度为k+1)看这个窗口里的是否有两个元素的值相同.加查找表. //时间:O(n) //空间:O(k) class Solution { public: bool containsNe ...
- bzoj3098 Hash Killer II 生日共计
题目传送门 题目大意: 让你构造一个字符串,使字符串在题目给出的哈希条件下统计出错. 思路:生日攻击,结论题,尚未理解. #include<bits/stdc++.h> #define C ...
- 剑指offer——面试题15.2:判断两个整数m和n的二进制中相差多少位
#include"iostream" using namespace std; int CountDifferentBit(int m,int n) { ,diff=m^n; wh ...
- 2019.03.26 读书笔记 关于 invoke与begininvoke
invoke与begininvoke是同步委托和异步委托,但是有两种使用情况: 1. control中的invoke.begininvoke. 2. delegrate中的invoke.beginin ...
- Java基础21-构造函数之间的调用
public class Test{ public static void main(String[] args){ Persion p2=new Persion("小明",22) ...
- php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...