//设置字体大小
@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的更多相关文章

  1. Sass中常用的函数

    字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 S ...

  2. Sass中的mixin,function,extend

    Mixins: 用于相类似的css属性将会被使用多次,每次调用时仅仅有小的参数改变: Function 用于计算得出相关值: Extend 有一批属性完全匹配时,应该使用extend

  3. sass中@的作用

    总结一下sass中用到@的地方. 1.继承@extend SASS允许一个选择器,继承另一个选择器.比如,现有class1: .class1 { border: 1px solid #ddd; } c ...

  4. sass中mixin常用的CSS3

    圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius ...

  5. Sass中的Map 详解

    Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: ...

  6. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  7. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  8. 前端框架中 “类mixin” 模式的思考

    "类 mixin" 指的是 Vue 中的 mixin,Regular 中的 implement 使用 Mixin 的目的 首先我们需要知道为什么会有 mixin 的存在? 为了扩展 ...

  9. Sass中连体符(&)的运用

    在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor ...

随机推荐

  1. 浅谈js单例模式

    单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的 ...

  2. Sublime Text3使用及常用插件

    1.安装packages组件: 参考一: https://sublime.wbond.net/installation 参考二: http://blog.csdn.net/superskk6/arti ...

  3. php连mssql中文乱码问题

    我在将一个aspx+mssql的系统做成php+mssql的系统时,感觉架构大不一样,aspx多是aspx页面+aspx.cs后台协同开发,多用可视化空间开发,而php我则选用了smarty模板,感觉 ...

  4. JIRA 6.0.1 (ZIP Archive)最新破解方法,绝对可用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. 数字信号处理与音频处理(使用Audition)

    前一阵子由于考博学习须要,看了<数字信号处理>,之前一直不清除这门课的理论在哪里应用比較广泛. 这次正巧用Audition处理了一段音频,猛然发现<数字信号处理>这门课还是很实 ...

  6. 验证(Verification)与确认(Validation)的差别

    验证(Verification)与确认(Validation)的差别 说法一: (2)“验证(Verification)”的涵义 通过提供客观证据对规定要求已得到满足的认定. (2)“确认(Valid ...

  7. 电话qie听器

    业务逻辑: 当有电话打进来或电话打出去的时候,对电话进行录音. public class TelphoneyListenerService extends Service { private stat ...

  8. ios的@property属性和@synthesize属性

    当你定义了一系列的变量时,需要写很多的getter和setter方法,而且它们的形式都是差不多的,,所以Xcode提供了@property 和@synthesize属性,@property用在 .h ...

  9. html5标签兼容ie6,7,8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  10. inux设置普通用户无密码sudo权限

    配置普通用户无密码sudo权限: root用户进入到Linux系统的/etc目录下 cd /etc 将sudoers文件赋予写的权限 chmod u+w /etc/sudoers 编辑sudoers文 ...