sass 继承 占位符 %placeholder
@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的更多相关文章
- [Sass]占位符 %placeholder
[Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...
- 占位符(placeholder text)
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...
- 输入框占位符placeholder
占位符placeholder的益处不用多说,但是很不幸的是,在IE8之前的浏览器里是无法实现placeholder这一属性的,所以在需要兼容IE8之前的浏览器的情况下,我们不得不想办法模拟实现plac ...
- IE8支持HTML5的占位符placeholder
/*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...
- tensorflow中常量(constant)、变量(Variable)、占位符(placeholder)和张量类型转换reshape()
常量 constant tf.constant()函数定义: def constant(value, dtype=None, shape=None, name="Const", v ...
- c++11模拟boost元占位符placeholder
准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什 ...
- RunTime运行时在iOS中的应用之UITextField占位符placeholder
RunTime运行时机制 runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语言API. 在我们平时编写的Objective-C代码中, 程序运行过程时, 其实最终 ...
- 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 ...
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
随机推荐
- legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))
legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...
- SQLSERVER 和 ORACLE的if not exist 用法
sql server: if not exists (select 1 from TB_Procedure where Id='2018ZZZ') BEGIN insert into TB_Proce ...
- LeetCode--443--压缩字符串(未看)
问题描述: 给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长 ...
- 20180821ImportContactFromExcel
Excel创建vcf文件,借助百度云助手导入Iphone6Plus Sub CreateContractList() Set Wb = Application.ThisWorkbook FilePat ...
- 根据list集合某个字段进行排序
import java.util.ArrayList; import java.util.List; class Student { private String name; private doub ...
- springboot添加log4j日志配置log4j.xml生成日志文件
第一步:添加pom文件依赖 <!-- log4j --> <dependency> <groupId>org.springframework.boot</gr ...
- sqlite3 查询表
cx = sqlite3.connect("c:/数据库地址") # 打开数据库cu = cx.cursor()# query the tablerows = cu.execute ...
- 安装docker No package docker available
安装docker 时候出现以下问题 yum -y install dockerLoaded plugins: fastestmirrorDetermining fastest mirrors * ba ...
- SpringBoot系列之jar包转war包
1.修改pom,将打包方式改为war包 2.dependencides中配置外部tomcat <!--因配置外部TOMCAT 而配置--> <dependency> <g ...
- Spring注解之 @SuppressWarnings注解
简介:java.lang.SuppressWarnings是J2SE5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告,不 ...