Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用，可以帮助前端开发人员节省很多时间，而且能更好的利用。
Sass的Mixins可以让你声明任何可重用的CSS代码块。你甚至可以通过传值，使用你的Mixins更佳灵活。它让前端开发人员节省了大量的时间，确保前端人员写出来的代码不会冗余而且便于组织和管理代码。
我推荐使用Compass,因为他创建了很多有用的Mixins，简化了前端开发人员的很多工作。
1、浏览器前缀
来源于：Useful Sass (SCSS) mixin Snippets
SCSS:
@mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, ‘‘ { #{$prefix}#{$property}: $value;
}
}
使用：
.border_radius { @include css3(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、响应式断点
SCSS:
@mixin breakpoint($point) { @if $point == large { @media (min-width: 64.375em) { @content; }
} @else if $point == medium { @media (min-width: 50em) { @content; }
} @else if $point == small { @media (min-width: 37.5em) { @content; }
}
}
使用：
.page-wrap {
width: 75%;
@include breakpoint(large) {
width: 60%;
} @include breakpoint(medium) {
width: 80%;
} @include breakpoint(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
@mixin image-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) { /* on retina, use image that‘s scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
}
使用：
div.logo {
background: url("logo.png") no-repeat; @include image-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 { /* on retina, use image that‘s scaled by 2 */
background-image: url("logo2x.png");
background-size: 100px 25px;
}}
4、清除浮动
SCSS:
@mixin clearfix() {
&:before,
&:after { content: "";
display: table;
}
&:after { clear: both;
}}
使用：
.article { @include clearfix();
}
CSS:
.article:before,
.article:after { content: "";
display: table;}.article:after { clear: both;}
5、Black和White
SCSS:
@function black($opacity){
@return rgba(0,0,0,$opacity)
}
@function white($opacity){
@return rgba(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、内阴影和外阴影
SCSS:
@mixin box-emboss($opacity, $opacity2){
box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
使用:
.box{ @include box-emboss(0.8, 0.05);
}
CSS:
.box { box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}
7、透明度
SCSS:
@mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //IE8}
使用：
.article-heading { @include opacity(0.8);
}
CSS:
.article-heading { opacity: 0.8;
filter: alpha(opacity=80);}
8、绝对定位
SCSS:
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
使用：
.abs { @include abs-pos(10px, 10px, 5px, 15px);
}
CSS:
.abs { top: 10px;
right: 10px;
bottom: 5px;
left: 15px;
position: absolute;}
9、行高
SCSS:
@mixin line-height($heightValue: 12 ){
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.125 * $heightValue) + rem;
}
使用：
body { @include line-height (16);
}
CSS:
body { line-height: 16px;
line-height: 2rem;}
10、图片标题动画
SCSS:
@mixin animated-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-speed ease;
-moz-transition: bottom $transition-speed ease;
-o-transition: bottom $transition-speed ease;
-ms-transition: bottom $transition-speed ease;
transition: bottom $transition-speed ease;
& 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;
}
}
&:hover span.outer{
bottom:0px;
}
}
使用：
a{ @include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)}
CSS:
a { display: inline-block;
position: relative;
overflow: hidden;}a img { display: block;
width: 100%;
height: auto;}a span.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: bottom 0.5s ease;
-moz-transition: bottom 0.5s ease;
-o-transition: bottom 0.5s ease;
-ms-transition: bottom 0.5s ease;
transition: bottom 0.5s ease;}a span.outer span.inner { margin: 0px;
position: relative;}a span.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:hover span.outer { bottom: 0px;}
注：这个Mixins如果在实际项目中，可以配合其它的Mixins更简单些。
时间： 2024-11-16 08:38:50