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 ...
随机推荐
- hdoj 2612 Find a way【bfs+队列】
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 音频播放(iOS开发)
音频处理 一.录音 录音应用场景 语音聊天 即时通讯软件中,都包含语音发送功能 语音备忘录 录一段音频,来记录某件事情 录音功能实现 导入AVFoundation框架 作用:一些多媒体的处理,基本上都 ...
- .NET中常见对象
.NET中六大内置对象:1.Response 2.Request 3.Session 4.Appliction 5.Server 6.Cookie System.Web.HttpCo ...
- 【三支火把】---C语言const用法总结
C语言关键字const相信对于不少C语言新手是既陌生又熟悉的,好像经常见,但是却不知道为何用,怎么用?学习至此,总结一下const的用法,使用程序来帮助你理解该关键字,希望能帮到像我一样的新手. 我看 ...
- 要注意null合并运算符的优先级比+还要低
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:要注意null合并运算符的优先级比+还要低.
- Nodejs实现代理服务器配置
var net = require('net'); var local_port = 8893; //在本地创建一个server监听本地local_port端口 net.createServer(fu ...
- JavaWeb国际化
软件的国际化: 软件在不同的地方,适应不同的风格: 中国: 显示中文,以及服务符合中国习惯的文本字符串! 美国: 显示英文,以及服务符合他国习惯的文本字符串! 这种软件,就叫国际化的软件! 如何做到国 ...
- 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...
- shell 中函数放回字符串问题
shell 中函数放回字符串问题 shell 中不可以直接 return 字符串 ,可以return 数字.如果要return 字符串 改为 echo "hello world" ...
- How to save/read file on different platforms
You can use standard c functions, such as fopen, fwrite, to save and read file on different platform ...