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 ...
随机推荐
- 配置ModSecurity防火墙与OWASP规则
中文译文参考:http://netsecurity.51cto.com/art/201407/446264.htm 英文原文参考:http://resources.infosecinstitute.c ...
- ASP.NET用HttpListener实现文件断点续传
本文转载:http://www.cnblogs.com/TianFang/archive/2007/01/03/610739.html 断点续传的原理很简单,就是在Http的请求和应答的报文头上和一般 ...
- matlab2013a for linux/Ubuntu 安装步骤及创建快捷方式(ubuntu14.04下安装)
1.挂载安装镜像:sudo mount -o loop myfile.iso /media/mnt #挂载ISO文件,使用參数 -o loop mnt为已经建立好的文件夹. 2.运行安装 ...
- phpmailer使用gmail SMTP的方法
终于能够通过phpmailer使用gmail账号发送邮件了phpmailer(现在的版本是1.73)是一个很好用的工具,可以很方便的使用php语言发送邮件,支持smtp及验证,我们一直都用它. 但是, ...
- lsb_release 提示命令不存在
1. 报错信息 bash: lsb_release: command not found 2. 问题原因 未安装 lsb_release 命令 3. 解决方法 用 yum 命令安装 lsb_relea ...
- sudo 免密码
转自:sudo 免密码 很多都是修改/etc/sudoers权限为740再加上一句 ALL=NOPASSWD:ALL 或者加一句 yourname ALL=(ALL) NOPASSWD: ALL 然后 ...
- Java基础知识强化之IO流笔记49:IO流练习之 复制指定目录下指定后缀名的文件并修改名称的案例
1. 复制指定目录下指定后缀名的文件并修改名称的案例 需求:复制指定目录下的指定文件,并修改后缀名. • 指定的文件是:.java文件. • 指定的后缀名是:.jad • 指 ...
- iOS CocoaPods自动管理第三方开源库
最近在开发中发现在项目中使用了好多第三方库,然而第三方更新的时候本地却不能及时更新.然而CocoaPods则可以管理第三方依赖包的更新,这些“体力活”会被节省好多时间,下面介绍一下CocoaPods的 ...
- ls -l命令详解
输入: ls -l 输出: -rwxr-xr-x root root May : b 第一个字段(1个字符):文件类型 - :普通文件 d:目录文件 b:块设备文件(block) c:字符设备文件(c ...
- mysql数据库时间、字符串类型互转
时间格式转换: select DATE_FORMAT(NOW(),"%y-%m-%d %H:%i:%s") 字符串转时间: select STR_TO_DATE("201 ...