十个有用的Sass Mixins_html/css_WEB-ITnose

@mixin css3($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        #{$prefix}#{$property}: $value;    }}

.border_radius {  @include css3(transition, 0.5s);}

.border_radius {  -webkit-transition: 0.5s;  -moz-transition: 0.5s;  -ms-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

@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%;   }}

.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%;  }}

@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);}

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;        }}

@mixin clearfix() {  &:before,  &:after {    content: "";    display: table;  }  &:after {    clear: both;  }}

.article {  @include clearfix();}

.article:before, .article:after {  content: "";  display: table;}.article:after {  clear: both;}

@function black($opacity){  @return rgba(0,0,0,$opacity)}@function white($opacity){  @return rgba(255,255,255,$opacity)}

.my-class{  background:black(0.15);  color:white(0.9);}

.my-class {  background: rgba(0, 0, 0, 0.15);  color: rgba(255, 255, 255, 0.9);}

@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);}

.box {  box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}

@mixin opacity($opacity) {  opacity: $opacity;  $opacity-ie: $opacity * 100;  filter: alpha(opacity=$opacity-ie); //IE8}

.article-heading {  @include opacity(0.8);}

.article-heading {  opacity: 0.8;  filter: alpha(opacity=80);}

@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);}

.abs {  top: 10px;  right: 10px;  bottom: 5px;  left: 15px;  position: absolute;}

@mixin line-height($heightValue: 12 ){  line-height: $heightValue + px; //fallback for old browsers  line-height: (0.125 * $heightValue) + rem;}

body {  @include line-height (16);}

body {  line-height: 16px;  line-height: 2rem;}

@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)}

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;}