@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的更多相关文章

  1. [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 ...

  2. 多媒体查询 @media 报错

    You may not @extend an outer selector from within @media.You may only @extend selectors within the s ...

  3. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  4. CSS预处理框架:less,scss

    CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...

  5. Scss开发临时学习过程

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

  6. sacc scss less

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  7. 前端scss的使用及gulp发布方式

    如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一 ...

  8. sasscore学习之_mixin.scss

    _mixin scss包括常用的mixin,%及@functionmixin,通过@include调用,样式通过拷贝的方式使用,尤其适用于传递参数%,通过@extend调用,样式通过组合申明的方式使用 ...

  9. .scss写法及如何转化为.css

    scss可视化工具:http://koala-app.com/index-zh.html scss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/1 ...

随机推荐

  1. request对象常用方法

    String getParameter(String name)根据表单组件名称获取提交数据 Sring[] getParameterValues(String name)获取表单组件对应多个值时的请 ...

  2. 停止memcached服务

    telnet 127.0.0.1 11211 进入memcache stats 查看pid号 退出memcache kill -9 pid号

  3. hdu 6196 搜索+剪枝

    Today, Bob plays with a child. There is a row of n numbers. One can takes a number from the left sid ...

  4. 3.1、Factorization Machine模型

    Factorization Machine模型 在Logistics Regression算法的模型中使用的是特征的线性组合,最终得到的分隔超平面属于线性模型,其只能处理线性可分的二分类问题,现实生活 ...

  5. STM32基础分析——PWM配置

    在使用STM32F103产生固定频率.固定占空比的PWM波时,虽然有官方以及众多开发板提供的例程,但是关于有点问题并没有说的很清晰,并且<STM32F10X参考手册>的中文翻译可能容易造成 ...

  6. 老男孩python作业4-ATM程序开发

    实现一个ATM + 购物商城程序: 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款 ...

  7. checkstyle 各标签 (有几个没翻译,不懂意思)

    以下是对checkstyle 7.8.1 version各标签的翻译,有少数几个标签没翻译,不太懂官网的意思,就空了,希望游客能帮忙补充补充,另外有错的话也希望大家留言下哈,另外转载的话请标明一下 1 ...

  8. 使用 v-model 实现 双向绑定.(子组件和父组件.)

    vue 自定义组件 v-model双向绑定. 父子组件同步通信   父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件 ...

  9. 创建一个流(Stream)可以让Bitmap或Image保存到流里面

    创建一个流(Stream)可以让Bitmap或Image保存到流里面   http://blog.csdn.net/angxiao/article/details/7481465 写文件流       ...

  10. HDU 6321 (状压dp)

    题目大意:: 为给你n个点(n<=10,nn<=10,n) 初始时没有边相连 然后有m个操作(m<=30000m<=30000) 每次可以添加一条边或删除一条边 允许有重边 要 ...