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 ...
随机推荐
- 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错
做足准备工作之后进行安装oracle,运行runInstall的时候别的时候输出如下错误 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错.请确保此目录是可写 ...
- EF搜索数据自动将表名变复数问题
原因这个是自己生成的需要在model加Table 其他博主写了aweier2011
- Python 函数和模块
200 ? "200px" : this.width)!important;} --> 介绍 在python中也存在函数的概念,标准的函数我们可以叫内置函数,这类函数可以直接 ...
- 安装、配置JDK的步骤
1.配置环境变量,打开我的电脑--属性--高级--环境变量,新建系统变量JAVA_HOME .变量值:jdk的目录,比如d:/java.选择“系统变量”中变量名为“Path”的环境变量双击该变量,把J ...
- Unity4向上(Unity5)兼容PlayerPrefs的数据存储
好久没有写项目.开发相关的内容了,刚好最近在做项目的更新时,遇到一个比较有意思的坑就随手记录一下. 因为项目的上一上线版本是由Unity5.3发的包,而最新的项目来不及同步更新到5.3版本发包测试,所 ...
- java+数据库+D3.js 实时查询人物关系图
先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...
- java基础之synchronized使用方法
首先.參考文章:http://www.cnblogs.com/devinzhang/archive/2011/12/14/2287675.html PS:參考文章非常长,但内容非常丰富,若是刚開始学习 ...
- ListBox获取行字符串
ListBox获取行字符串 关键点 获取ListBox第1行的字符串 获取ListBox第2行的字符串 获取ListBox第n行的字符串 CListBox::GetText int GetText( ...
- careercup-递归和动态规划 9.8
9.8 给定数量不限的硬币,币值为25分.10分.5分和1分,编写代码就是n分有几种表示法. 解法: 使用回溯法进行解决,实际上就是一个类似枚举的过程,主要是在搜索尝试过程中寻找问题的解,当发现已不满 ...
- axis2调用webservice
public static long TIMEOUTINMILLISECONDS=100000; /** * 调用webservice * @param url webserviceURL * @pa ...