十个有用的Sass Mixins

2016-07-12 10:22:39来源:oschina作者:sunshinewyf人点击

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用,可以帮助前端开发人员节省很多时间,而且能更好的利用。


Sass的Mixins可以让你声明任何可重用的CSS代码块。你甚至可以通过传值,使用你的Mixins更佳灵活。它让前端开发人员节省了大量的时间,确保前端人员写出来的代码不会冗余而且便于组织和管理代码。


我推荐使用Compass,因为他创建了很多有用的Mixins,简化了前端开发人员的很多工作。


1、浏览器前缀

来源于:Useful Sass (SCSS) mixin Snippets


SCSS:
@mixincss3($property,$value){@each$prefixin-webkit-,-moz-,-ms-,-o-,''{#{$prefix}#{$property}:$value;
}
}
使用:
.border_radius{@includecss3(transition,0.5s);
}
CSS:
.border_radius{-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;}
2、响应式断点

来源于:Handy Sass Mixins


SCSS:
@mixinbreakpoint($point){@if$point==large{@media(min-width:64.375em){@content;}
}@elseif$point==medium{@media(min-width:50em){@content;}
}@elseif$point==small{@media(min-width:37.5em){@content;}
}
}
使用:
.page-wrap{
width:75%;
@includebreakpoint(large){
width:60%;
}@includebreakpoint(medium){
width:80%;
}@includebreakpoint(small){
width:95%;
}
}
CSS:
.page-wrap{width:75%;}@media(min-width:64.375em){.page-wrap{width:60%;
}}@media(min-width:50em){.page-wrap{width:80%;
}}@media(min-width:37.5em){.page-wrap{width:95%;
}}
3、Retina图片

来源于:Easy retina-ready images using SCSS


SCSS
@mixinimage-2x($image,$width,$height){@media(min--moz-device-pixel-ratio:1.3),
(-o-min-device-pixel-ratio:2.6/2),
(-webkit-min-device-pixel-ratio:1.3),
(min-device-pixel-ratio:1.3),
(min-resolution:1.3dppx){/*onretina,useimagethat'sscaledby2*/
background-image:url($image);
background-size:$width$height;
}
}
使用:
div.logo{
background:url("logo.png")no-repeat;@includeimage-2x("logo2x.png",100px,25px);
}
CSS:
div.logo{background:url("logo.png")no-repeat;}@media(min--moz-device-pixel-ratio:1.3),
(-o-min-device-pixel-ratio:2.6/2),
(-webkit-min-device-pixel-ratio:1.3),
(min-device-pixel-ratio:1.3),
(min-resolution:1.3dppx){div.logo{/*onretina,useimagethat'sscaledby2*/
background-image:url("logo2x.png");
background-size:100px25px;
}}
4、清除浮动

来源:A new micro clearfix hack


SCSS:
@mixinclearfix(){
&:before,
&:after{content:"";
display:table;
}
&:after{clear:both;
}}
使用:
.article{@includeclearfix();
}
CSS:
.article:before,
.article:after{content:"";
display:table;}.article:after{clear:both;}
5、Black和White

来源:Useful SASS Mixins


SCSS:
@functionblack($opacity){
@returnrgba(0,0,0,$opacity)
}
@functionwhite($opacity){
@returnrgba(255,255,255,$opacity)
}

特别声明,上面这个不属于Sass的Mixins范畴,是Sass的自定义函数功能。


使用:
.my-class{background:black(0.15);
color:white(0.9);}
CSS:
.my-class{background:rgba(0,0,0,0.15);
color:rgba(255,255,255,0.9);}
6、内阴影和外阴影

来源:Useful SASS Mixins


SCSS:
@mixinbox-emboss($opacity,$opacity2){
box-shadow:white($opacity)01px0,insetblack($opacity2)01px0;
}
使用:
.box{@includebox-emboss(0.8,0.05);
}
CSS:
.box{box-shadow:white(0.8)01px0,insetblack(0.05)01px0;}
7、透明度

来源:Handy Sass Mixins


SCSS:
@mixinopacity($opacity){opacity:$opacity;$opacity-ie:$opacity*100;filter:alpha(opacity=$opacity-ie);//IE8}
使用:
.article-heading{@includeopacity(0.8);
}
CSS:
.article-heading{opacity:0.8;
filter:alpha(opacity=80);}
8、绝对定位

来源:Handy Sass Mixins


SCSS:
@mixinabs-pos($top:auto,$right:auto,$bottom:auto,$left:auto){
top:$top;
right:$right;
bottom:$bottom;
left:$left;
position:absolute;
}
使用:
.abs{@includeabs-pos(10px,10px,5px,15px);
}
CSS:
.abs{top:10px;
right:10px;
bottom:5px;
left:15px;
position:absolute;}
9、行高

来源:Handy Sass Mixins


SCSS:
@mixinline-height($heightValue:12){
line-height:$heightValue+px;//fallbackforoldbrowsers
line-height:(0.125*$heightValue)+rem;
}
使用:
body{@includeline-height(16);
}
CSS:
body{line-height:16px;
line-height:2rem;}
10、图片标题动画

来源:4 useful SASS mixins


SCSS:
@mixinanimated-caption($font-color,$bg-color,$bg-opacity,$padding,$transition-speed){
display:inline-block;
position:relative;
overflow:hidden;
&img{
display:block;
width:100%;
height:auto;
}
&span.outer{
display:block;
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:$padding;
color:$font-color;
position:absolute;
bottom:-100px;
-webkit-transition:bottom$transition-speedease;
-moz-transition:bottom$transition-speedease;
-o-transition:bottom$transition-speedease;
-ms-transition:bottom$transition-speedease;
transition:bottom$transition-speedease;
&span.inner{
margin:0px;
position:relative;
}
&:before{
content:"";
display:block;
position:absolute;
z-index:0;
left:0px;
top:0px;
width:100%;
height:100%;
background:$bg-color;
filter:alpha(opactiy=($bg-opacity*100));
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity*100})";
-moz-opacity:$bg-opacity;
-khtml-opacity:$bg-opacity;
opacity:$bg-opacity;
}
}
&:hoverspan.outer{
bottom:0px;
}
}
使用:
a{@includeanimated-caption(#ffffff,#333333,0.75,10px,0.5s)}
CSS:
a{display:inline-block;
position:relative;
overflow:hidden;}aimg{display:block;
width:100%;
height:auto;}aspan.outer{display:block;
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:10px;
color:#ffffff;
position:absolute;
bottom:-100px;
-webkit-transition:bottom0.5sease;
-moz-transition:bottom0.5sease;
-o-transition:bottom0.5sease;
-ms-transition:bottom0.5sease;
transition:bottom0.5sease;}aspan.outerspan.inner{margin:0px;
position:relative;}aspan.outer:before{content:"";
display:block;
position:absolute;
z-index:0;
left:0px;
top:0px;
width:100%;
height:100%;
background:#333333;
filter:alpha(opactiy=75);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-moz-opacity:0.75;
-khtml-opacity:0.75;
opacity:0.75;}a:hoverspan.outer{bottom:0px;}

注:这个Mixins如果在实际项目中,可以配合其它的Mixins更简单些。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台