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 ...
随机推荐
- linux中vi/vim显示行号设置
vim打开文件是,默认不提示行号. 至于显示行号的用途,因人而异 临时修改只需要在编辑文件时输入 :set number 即可 linux下一个主机可能有N个账户.对于配置分为两种:仅配置当前账户,配 ...
- wechat server的配置
一 服务器地址 https://github.com/donal-tong/wechat4server 包括源代码及数据库脚本放在dump文件夹里 1.根据sql脚本创建需要的数据库hcapi,然后命 ...
- Safari浏览器Session问题
Safari浏览器中经常出现session无法写入或同一个会话中Session ID常变动的事情.尤其以iOS7版本居多. 问题本身并不难猜,应该就是cookie无法写入引起的.奇怪的是,部分同版本的 ...
- java23 XML
XML:可扩展标记语言. xml可以当成一个小型的数据库, html / \ html5 xhtml(格式比较严格) | xml xml解析方式有2种: -SAX,SAX是基于事件流的解析,事件流解析 ...
- careercup-数学与概率 7.7
7.7 有些数的素因子只有3.5.7,请设计一个算法,找出其中第k个数. 解法: 首先,我们可以将满足条件的前几个数列出来,以此寻找解题思路. 一种简单的思路就是对于已经列出的数,我们依次去乘以3,5 ...
- PHP【第一篇】安装
一.准备 1.环境 系统平台:Red Hat Enterprise Linux Server release 7.3 (Maipo) 内核版本:3.10.0-514.el7.x86_64 2.下载安装 ...
- 普通SQL注入
安全防御:过滤/转义非法参数,屏蔽SQL查询错误. 工具:Firefox,hackbar,sqlmap,burpsuite 1.联想tms站 例1, 联想tms站fromCity参数存在普通SQL注入 ...
- 一种协程的 C/C++ 实现
一种协程的 C/C++ 实现 介绍 在前几天接触到了协程的概念,觉得很有趣.因为我可以使用一个线程来实现一个类似多线程的程序,如果使用协程来替代线程,就可以省去很多原子操作和内存栅栏的麻烦,大大减少与 ...
- Integer跟int的区别(备份回忆)
int与Integer的区别 int 是基本数据类型Integer是其包装类,注意是一个类.为什么要提供包装类呢???一是为了在各种类型间转化,通过各种方法的调用.否则 你无法直接通过变量转化.比如, ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...