圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } 盒模型阴影box-shadow 下面是一个使用多参数的例子:用CSS3创建一个阴影的mixin,需要传递水平和垂的偏移量,模糊的范围,还有颜色,4个参数: @mixin shadow($x, $y, $blur, $color){     -w…

1. mixin 就是定义了一个函数,可以传参,并且设定默认值,css选择器可以通过@include来引用,mixin混入的代码,就是原样复制,不会合并,会造成冗余 例如: @mixin br6($br6: 6px){ /* 传一个带值的参数 */ border-radius: $br6; } div{ @include br6(); /* 如果不传值就是6px,传值会覆盖原始值 */ } 再如: @mixin icon { transition: background-color ease .…

字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 Sass 中的数字函数提要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比值: round($value):将数值四舍五入,转换成一个最接近的整数: ceil($value):将大于自己的小数转换成下一位整数: floor($value):将一个…

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会FQ,赶紧转行... 效果…

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值.声明的@mixin通过@include来调用 1.无参数mixin scss.style css.style 2.有参数mixin scss.style css.style 3.多个参数mixin 调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错.除此之外还可以选择性的传入参数,使用参数…

Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , &q…

初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出来的 CSS 见右侧结果窗口. 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情.不过他并不是一无事处,他可以传参数. 个人建议:如果你的代码块中涉及到变量,建议…

//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); } } .header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); } } 1.上面是sass混合宏方法编写的sass代码,下面是编译出来的css代码 .bloc…

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行.详情见,https://github.com/postcss/autoprefixer关于Autoprefixer当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异.这种方式,CSS是基于最新W3C规范产生: a { background : linear-gra…

原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background-color:#666; width:200px;height:100px; Firefox,Chrome Google,Safari等浏览器的显示效果如图0-0: 图0-0 但是IE这个异类不支持CSS3的这个属性,在IE…