//设置字体大小
@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. nyoj 1870 愚人节礼物

    愚人节的礼物 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. hdu1839之二分+邻接表+Dijkstra+队列优化

    Delay Constrained Maximum Capacity Path Time Limit: 10000/10000 MS (Java/Others)    Memory Limit: 65 ...

  3. spring事物传播机制 事物隔离级别

    Spring事务类型详解: PROPAGATION_REQUIRED--支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. PROPAGATION_SUPPORTS--支持当前事务,如 ...

  4. (翻译)什么是Java的永久代(PermGen)内存泄漏

    http://www.codelast.com/?p=7248 转载请注明出处:http://www.codelast.com/ 本文是我对这篇文章的翻译:What is a PermGen leak ...

  5. [C#]工具类—FTP上传下载

    public class FtpHelper { /// <summary> /// ftp方式上传 /// </summary> public static int Uplo ...

  6. UML类图中类与类的四种关系图解

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

  7. 适合高级Java程序员看的12本书

    1.Thinking in Java 2.Head First Java 3.Java in a Nutshell 4.The elements of Java style 5.Effective J ...

  8. 在Android中访问内置SE和基于SE的卡模拟(一)

    2013-10-10 编写 前言 在“十问Android NFC手机上的卡模拟”文中仅仅简单的介绍了一下相关的概念,如果需要了解基于SE的卡模拟的更多细节,也就是,究竟在Android的NFC手机上, ...

  9. [译]信仰是怎样毁掉程序猿的How religion destroys programmers

    作者原文地址 作者John Sonmez 英文水平不够高,翻译不太准确. 翻译地址:译文 尽管文章是13年的,可是这段时间恰好看到.net开源核心之后,各种java和.net掐架. 语言之争有些牵涉到 ...

  10. Big Clock

    Problem Description Our vicar raised money to have the church clock repaired for several weeks. The ...