@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. 数组常用的API——splice()截取

    他的几个作用:截取  删除  增加  替换. 当传递一个参数的时候 : 截取开始的位置,参数代表下标,默人会截取到结束的位置. 当传递两个参数的时候: 第一个参数是删除的下标: 第二个参数代表删除几个 ...

  2. PHP简单实现一言 / 随机一句功能

    很多网站都喜欢在页面中加个一言,不过一般都是调用的第三方api.其实,使用万能的php能用短短的几行代码就实现该功能! 将下列代码复制并粘贴到 api.php 中保存,你的专属“一言” API 就搭建 ...

  3. javascript的代码块

    a block of code 注意到这个问题是在看书的时候,中文版中出现“代码片段”这样的词语,于是就去翻看了英文版的原书.书中的用了a block of code,难道不应该翻译成代码块吗?(作为 ...

  4. Android中include标签的使用(打开引用布局,隐藏当前布局)

    在开发app的时候,有时候一个布局会反复用到,可以把反复用到的布局单独写一个xml文件,什么时候用到就用includ标签引入xml 下面是我写的反复用到的一个xml,里面有2个button,一个Tex ...

  5. 一个数字从后向前输入每一位数字,Camel和Pascal命名规范,IsValid()

    int num = int.Parse(Console.ReadLine()); ; ) { n = num % ; num /= ; Console.WriteLine(n); } Camel和Pa ...

  6. C++_函数2-内联函数

    内联函数的目的是为了提高程序运行速度所做的一项改进. 常规函数与内联函数的区别不在于编写方式,而在于C++编译器如何将它们组合到程序中. 编译过程的最终产品是:可执行程序,由一组机器语言指令组成.运行 ...

  7. 【算法笔记】B1006 换个格式输出整数

    1006 换个格式输出整数 (15 分) 让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(<10),换个格式来输出任一个不超过 3 位的正整数 ...

  8. JS获取按键的代码,Js如何屏蔽用户的按键

    [From] http://www.zgguan.com/zsfx/jsjc/1181.html 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress,onkeydown ...

  9. svn的branch truck tag

    对于branch truck tag一直迷迷糊糊的,想搞明白,但是一直又没来弄明白,最近就用了这种方式来开发 可以我又不是完全了解怎么操作,所以查看了下资料,这个解释得很详细呀,连我都看得懂的东西,真 ...

  10. linux运维基础知识

    linux运维基础知识大全 一,序言 每一个微不足道的知识,也是未来的铺垫.每一份工作的薪资职位,也是曾经努力的结果. 二,服务器 1,运维人员工作职责: 1)保证数据不丢失:2)保证服务器24小时运 ...