sass中常用mixin
//设置字体大小 @mixin font($s:14px,$h:1.5,$f:microsoft yahei){ font:$s/#{$h} $f; } //参数(方向,大小,颜色),默认:向下,10px,红色 %arrow{ width:; height:; line-height:; font-size:; overflow:hidden; display: inline-block; } @mixin arrow($dir:bottom,$size:10px,$color:red){ @extend %arrow; border:#{$size} dotted transparent; @if $dir=="top"{ border-bottom:#{$size} dotted #{$color}; border-top:0 none; }@else if $dir=="right"{ border-left:#{$size} dotted #{$color}; border-right:0 none; } @else if $dir=="bottom"{ border-top:#{$size} dotted #{$color}; border-bottom:0 none; } @else if $dir=="left"{ border-right:#{$size} dotted #{$color}; border-left:0 none; } } .arrow-top{ @include arrow(top); } .arrow-right{ @include arrow(right); } .arrow-bottom{ @include arrow; } .arrow-left{ @include arrow(left); }
sass中常用mixin的更多相关文章
- Sass中常用的函数
字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 S ...
- Sass中的mixin,function,extend
Mixins: 用于相类似的css属性将会被使用多次,每次调用时仅仅有小的参数改变: Function 用于计算得出相关值: Extend 有一批属性完全匹配时,应该使用extend
- sass中@的作用
总结一下sass中用到@的地方. 1.继承@extend SASS允许一个选择器,继承另一个选择器.比如,现有class1: .class1 { border: 1px solid #ddd; } c ...
- sass中mixin常用的CSS3
圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius ...
- Sass中的Map 详解
Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- 前端框架中 “类mixin” 模式的思考
"类 mixin" 指的是 Vue 中的 mixin,Regular 中的 implement 使用 Mixin 的目的 首先我们需要知道为什么会有 mixin 的存在? 为了扩展 ...
- Sass中连体符(&)的运用
在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...
随机推荐
- 几乎每个文件里面都有 #ifdef __cplusplus extern "C" { #endif 可我没找到程序里那个地方定义了__cplusplus 啊?这又是怎么回事呢?
我们的C语言有个进化版,叫C++,这个想必楼主知道,Keil MDK是支持C++编程的,也就是说,你可以用C语言或者C++写你的程序,都可以. 但是,有一个问题,就是头文件的问题,C语言写的头文件C+ ...
- 分布式搜索elasticsearch 索引文档的增删改查 入门
1.RESTful接口使用方法 为了方便直观我们使用Head插件提供的接口进行演示,实际上内部调用的RESTful接口. RESTful接口URL的格式: http://localhost:9200/ ...
- JAVA的反射机制原理
http://www.cnblogs.com/hongxinlaoking/p/4684652.html 一 反射机制的概念: 指在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法,对于 ...
- SIGGRAPH
这两天看了一些文章,今天来说说SIGGRAPH. 对于搞图形学的人来说,SIGGRAPH绝对是如雷贯耳.SIGGRAPH是计算机图形界(也包含图像)最顶级的会议,没有之中的一个,是全世界的图形学者公认 ...
- Objective C 代码片段(类别)
@interface NSString (reverse) -(NSString *) reverseString; @end @implementation NSString (reverse) - ...
- [Whole Web, Node.js, PM2] Restarting your node.js app on code change using pm2
Aadd watch to the config.json file: { "apps": [{ "name": "App1", " ...
- android92 aidl远程进程通信
05项目RemoteService.java package com.itheima.remoteservice; //05项目 import com.itheima.remoteservice.Pu ...
- mysql 学习心得 [学习]
http://www.cnblogs.com/lyhabc/p/3822267.html
- careercup-树与图 4.6
4.6 设计一个算法,找出二叉查找树中指定结点的“下一个”结点(也即中序后继).可以假定每个结点都含有指向父节点的连接. 思路: 有两种情况:1)如果该结点存在右子树,则中序后继即为右子树中最小的结点 ...
- java pdu短信解码
java pdu短信解码 长短信未验证 有兴趣的可以试试 根据python的方法改写的 /** * PDU短信解析 * * * @param pduPayload * @return */ publi ...