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 ...
随机推荐
- 教程-隐藏/显示任务栏-程序不在任务显示-全面控制Windows
1.隐藏任务条 var h:THandle; //变量h:=FindWindow('Shell_TrayWnd',nil);ShowWindow(h,SW_hide); 2.显示任务条h:=Find ...
- 【转】解决Cannot change version of project facet Dynamic web module to 2.5
http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...
- Ubuntu 12.04 wine QQ
1.首先安装最新版的wine1.52,没记错版本号应该是这个 sudo add-apt-repository ppa:ubuntu-wine/ppa sudo apt-get update sudo ...
- 【转】以XML文件方式保存用户数据——2013-08-25 22
正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...
- Top 10 Questions about Java Exceptions--reference
reference from:http://www.programcreek.com/2013/10/top-10-questions-about-java-exceptions/ This arti ...
- Linux环境下搭建Android开发环境
最近在折腾linux.因为咱是搞安卓开发的,所以少不了需要搭建Android开发环境,就此小记,希望能给向我一样的开发者一点帮助!开干! 1.安装JDK 下载JDK包,得到的是类似于jdk-8u65- ...
- [转]ORACLE 绑定变量用法总结
转:http://blog.csdn.net/wanghai__/article/details/4778343 在oracle 中,对于一个提交的sql语句,存在两种可选的解析过程, 一种叫做硬解析 ...
- Java中的编码问题
下面将侧重介绍java乱码是如何产生的.存在哪些乱码的情况.该如何从根本上解决乱码问题.各位随博主一起征服令人厌烦的java乱码问题吧!!! 一.Java编码转换过程 我们总是用一个java类文件和用 ...
- MySQL5.7.12新密码登录方式及密码策略
在Centos6.6上安装MySQL5.7.12时,遇到了一个问题 安装后在/root目录下没有发现有.mysql_secret这个文件,所以没有没法按照官方文档上说的那样使用,这里记录下, 解决方式 ...
- 保留关键字 (Transact-SQL)
https://msdn.microsoft.com/zh-cn/library/ms189822(v=sql.120).aspx Microsoft SQL Server 将保留关键字用于定义.操作 ...