Sass – mixin

parę przydatnych mixinów SASS:

sass:


/* CSS3 calc() function to perform calculations */
@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: -moz-calc(#{$expression});
  #{$property}: calc(#{$expression});
} 

sass:


@include calc( width, '100% - 96px')

css:


  width: -webkit-calc(100% - 96px);
  width: -moz-calc(100% - 96px);
  width: calc(100% - 96px);

 


sass:


@mixin transform( $t... ) {
    -webkit-transform: $t; /* Safari */
    -moz-transform: $t;
    -ms-transform: $t; /* IE 9 */
    -o-transform: $t;
    transform: $t;
}

@mixin transition( $t... ) {
	-webkit-transition: $t;
	-moz-transition: $t;
	-ms-transition: $t;
	transition: $t;
}

@mixin transition-delay( $t ) {
	-webkit-transition-delay: $t;
	-moz-transition-delay: $t;
	-ms-transition-delay: $t;
	transition-delay: $t;
}

sass:


@include transform(scale(0) rotate(-180deg));

@include transition( all 0.3s ease-in-out );

@include transition-delay(0.5s);

css:


  -webkit-transform: scale(0) rotate(-180deg);/* Safari */
  -moz-transform: scale(0) rotate(-180deg);
  -ms-transform: scale(0) rotate(-180deg);/* IE 9 */
  -o-transform: scale(0) rotate(-180deg);
  transform: scale(0) rotate(-180deg);


  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;


  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;

 

sass:


@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: perspective(1px) translateY(-50%);
  -ms-transform: perspective(1px) translateY(-50%);
  transform: perspective(1px) translateY(-50%);
}

sass:


@include vertical-align();

css:


  position: relative;
  top: 50%;
  -webkit-transform: perspective(1px) translateY(-50%);
  -ms-transform: perspective(1px) translateY(-50%);
  transform: perspective(1px) translateY(-50%);

 

#sass

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.