十个有用的Sass Mixins
本文由大漠根据Tomas Laurinavicius的《10 Useful Sass Mixins for Modern Developer》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息http://designwoop.com/2014/07/10-useful-sass-mixins-modern-developer/。
——作者:Tomas Laurinavicius
——译者:大漠
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更简单些。
扩展阅读
- 十个常见的Mixins
- Snippet Sunday – Sass Mixins
- 8 Sass mixins you must have in your toolbox
- Useful SASS Mixins
- Useful Sass (SCSS) mixin Snippets
- Handy Sass Mixins
- Compass mixins you should know about
- 10 SCSS utilities I can’t live without
- Useful Sass Mixins for Responsive Design, Font Sizing and More
结论
Sass中的Mixins在实际开发中能帮助我们做非常多的事情,可以说是一劳永逸。可以将所有的Mixins放置在_mixins.scss
文件中,需要的时候直接调用即可。大家可以将自己看到的,在使用的,觉得好的Mixins收集起来。慢慢的,你将会有很多优秀的Mixins,而这些Mixins就可以帮你做很多的事情,节省很多时间,让你做更多有意义的事情。
借着这篇译文,向各位在使用Sass的同行朋友征集Sass的Mixins和Functions代码集,大家行动起来吧,让更多的同学一起分享您的成果。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
英文原文:http://designwoop.com/2014/07/10-useful-sass-mixins-modern-developer
中文译文:https://www.fedev.cn/preprocessor/css-shapes-reference-boxes.html