scss-@extend
@extend指令用于共享规则和选择器之间的关系。它可以扩展所有其他类的样式在一个类中,也可应用于自己特定的样式。
查看如下scss@extend示例:
.style{
font-size: 30px;
font-style: italic;
}
h2{
color: #787878;
@extend .style
}
.container{
@extend h2
}
编译后的css代码如下:
.style, h2, .container {
font-size: 30px;
font-style: italic;
}
h2, .container {
color: #787878;
}
scss-@extend的更多相关文章
- [SCSS] Reuse Styles with the SCSS @extend Directive
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It dep ...
- 多媒体查询 @media 报错
You may not @extend an outer selector from within @media.You may only @extend selectors within the s ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- CSS预处理框架:less,scss
CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...
- Scss开发临时学习过程
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- sacc scss less
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 前端scss的使用及gulp发布方式
如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一 ...
- sasscore学习之_mixin.scss
_mixin scss包括常用的mixin,%及@functionmixin,通过@include调用,样式通过拷贝的方式使用,尤其适用于传递参数%,通过@extend调用,样式通过组合申明的方式使用 ...
- .scss写法及如何转化为.css
scss可视化工具:http://koala-app.com/index-zh.html scss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/1 ...
随机推荐
- 为什么有些网站PING不通但又能访问.
一PING它,出现request timed out,发关4个送数据包,返回0个.丢失率100%,明明不通但为什么又能够访问? 应该是该网站禁用了ICMP回应或者开启了ICMP过滤.如果设置了ICMP ...
- error while loading shared libraies :libopencv_core_so.3.4:cannot open shared object
TX2 上安装自己编译的opencv,使用时出现: error while loading shared libraies :libopencv_core_so.3.4:cannot open sha ...
- 【转】nginx在Windows系统启动不了
这几天用到Nginx,第一次是win7系统下部署,一次性成功,第二次在win10系统下,部署失败. 出现的情况: 打开Nginx.exe,界面一闪而过,而且进程里面搜不到Nginx. 1.端口占用问题 ...
- get请求和post的请求的区别
https://www.cnblogs.com/logsharing/p/8448446.html
- Day45--js基本小结
JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...
- codeforces 1101G (Zero XOR Subset)-less 前缀异或+线性基
题目传送门 题意:给出一个序列,试将其划分为尽可能多的非空子段,满足每一个元素出现且仅出现在其中一个子段中,且在这些子段中任取若干子段,它们包含的所有数的异或和不能为0. 思路:先处理出前缀异或,这样 ...
- 文件对象FSO应用 文件对象FSO应用
FileSystemObject对象被用来访问服务器上的文件系统.这个对象能够处理文件.文件夹和目录路径.用它来检索文件系统信息也是可能的. 下面的代码创建了一个文本文件,并写入了一些文本: dim ...
- poj1002 字典树+map+查询单词出现次数
487-3279 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 309235 Accepted: 55223 Descr ...
- java.lang.ref.Reference<T>
//看之前先要知道java里面的四种引用.package com.zby.ref; import sun.misc.Cleaner; /** * 引用对象的抽象基础类.这个类定义了所有引用对象的公共操 ...
- Java Web编程
一.二.三有空补 四. Web应用的安全 1. CSS攻击,跨站脚本攻击 跨站脚本,顾名思义,就是恶意攻击者利用网站漏洞往Web页面里插入恶意代码,一般需要以下几个 条件: (1)客户端访问的网站 ...