@extend

//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
} .btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}

编译出来的css

//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
} .btn-second {
background-clor: orange;
color: #fff;
}

占位符,减少代码的重复

//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
} .btn {
@extend %mt5;
@extend %pt5;
} .block {
@extend %mt5; span {
@extend %pt5;
}
}

转为css

//CSS
.btn, .block {
margin-top: 5px;
} .btn, .block span {
padding-top: 5px;
}

sass 继承 占位符 %placeholder的更多相关文章

  1. [Sass]占位符 %placeholder

    [Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...

  2. 占位符(placeholder text)

    占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...

  3. 输入框占位符placeholder

    占位符placeholder的益处不用多说,但是很不幸的是,在IE8之前的浏览器里是无法实现placeholder这一属性的,所以在需要兼容IE8之前的浏览器的情况下,我们不得不想办法模拟实现plac ...

  4. IE8支持HTML5的占位符placeholder

    /*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...

  5. tensorflow中常量(constant)、变量(Variable)、占位符(placeholder)和张量类型转换reshape()

    常量 constant tf.constant()函数定义: def constant(value, dtype=None, shape=None, name="Const", v ...

  6. c++11模拟boost元占位符placeholder

    准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什 ...

  7. RunTime运行时在iOS中的应用之UITextField占位符placeholder

    RunTime运行时机制 runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语言API. 在我们平时编写的Objective-C代码中, 程序运行过程时, 其实最终 ...

  8. based on Greenlets (via Eventlet and Gevent) fork 孙子worker 比较 gevent不是异步 协程原理 占位符 placeholder (Future, Promise, Deferred) 循环引擎 greenlet 没有显式调度的微线程,换言之 协程

    gevent GitHub - gevent/gevent: Coroutine-based concurrency library for Python https://github.com/gev ...

  9. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

随机推荐

  1. Redis持久化AOF和RDB对比

    RDB持久化 AOF持久化 全量备份,一次保存整个数据库 增量备份,一次保存一个修改数据库的命令 保存的间隔较长 保存的间隔默认一秒 数据还原速度快 数据还原速度一般 save会阻塞,但bgsave或 ...

  2. centos php5.4 升级 php7

    接上篇,edusoho需要php5.5以上版本,于是需要升级本地php php是通过yum默认安装的.以下安装参考 link https://blog.csdn.net/u012569217/arti ...

  3. gooreplacer 很好用

    国内上 StackOverflow, hackernews 之类的站点会慢. 因为页面里有链接指向 google 谷歌, 会被墙. 于是拖累了整个页面的显示. gooreplacer 可以把这些被墙连 ...

  4. 雷林鹏分享:C# 常量

    C# 常量 常量是固定值,程序执行期间不会改变.常量可以是任何基本数据类型,比如整数常量.浮点常量.字符常量或者字符串常量,还有枚举常量. 常量可以被当作常规的变量,只是它们的值在定义后不能被修改. ...

  5. Python自学:第二章 使用制表符或换行符来添加空白

    print("Languages:\n\tPython\n\tC\n\tJava") 输出为: Languages: Python C Java

  6. android -------- 安装APK报错:Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE解决方法

    记录一个 DELETE_FAILED_INTERNAL_ERROR Error while Installing APK问题 之前遇到这个问题 方案1 将data/data/目录下该应用的包名的目录删 ...

  7. Spring Boot 针对 Java 开发人员的安装指南

    Spring Boot 可以使用经典的开发工具或者使用安装的命令行工具.不管使用何种方式,你都需要确定你的 Java 版本为 Java SDK v1.8 或者更高的版本.在你开始安装之前,你需要确定你 ...

  8. Music in Car CodeForces - 746F (贪心,模拟)

    大意: n首歌, 第$i$首歌时间$t_i$, 播放完获得贡献$a_i$, 最多播放k分钟, 可以任选一首歌开始按顺序播放, 最多选w首歌半曲播放(花费时间上取整), 求贡献最大值. 挺简单的一个题, ...

  9. Date类型与String类型的相关问题

    今天完成boss交代的任务时,遇到Date类型与String类型的相关问题,参考了网上的一些例子,并且自己写了demo,现在记录下了总结一下: (一)判断一个字符串是不是合法的日期格式 public ...

  10. STLC - 软件测试生命周期

    什么是软件测试生命周期(STLC)? 软件测试生命周期(STLC)定义为执行软件测试的一系列活动. 它包含一系列在方法上进行的活动,以帮助认证您的软件产品. 图 - 软件测试生命周期的不同阶段 每个阶 ...