Sass – mixin

mixins – re-używalny kawałek kodu, aby nie powtarzać kodu – w myśl zasady Dont Repeat Yourself

sass:

@mixin warning {
  background-color: orange;
  color: #fff;

  &:hover {
    background-color: lighten(orange, 10%);
  }
}

.warning-button {
  @include warning;
  padding: 8px 12px;
}

css:

.warning-button {
  background-color: orange;
  color: #fff;
  padding: 8px 12px;
}
.warning-button:hover {
  background-color:#ffb733;
}

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%);

 

variable argument – vararg – arglist – typ danych Sass oznaczany …

nie limitowana ilość argumentów

sass:

@mixin linear-gradient($direction, $gradients...)
  background-color: nth($gradients, 1)
  background-image: linear-gradient($direction, $gradients)

sass:

@include linear-gradient(to right, red, orange, yellow, green, blue, purple, magenta)

css:

.mainHeader {
  background-color:red;
  background-image:linear-gradient(to right, red,orange,yellow,green,blue,purple,magenta);
}

content directive – pozwala na wprowadzenie bloku kontentu

sass:

@mixin apply-to-ie-6
  * html
    @content 
</pre>
<pre>@include apply-to-ie-6
  body
    font-size: 125%

css:

* html body {
  font-size:125%
}

–

sass import is like normal css imprt

• @import url()
• @import "http://"
• @import "filename.css"
• @import "style-screen" screen;

sass only import – sass i scss file

• @import "partials/mixins" without _ before name and .sass
• @import "partials/variables", "partials/mixins"

 

// unquote the string, that we get to make sure it’s in the correct format to use in
// variable które jest wartością #{$font} interpolation syntax

@mixin google-font ($font)
  $font: unquote($font)
  @import url(https://fonts.googleapis.com/css?family=#{$font})

@include google-font("Alegreya+Sans")
@include google-font("Titllium+Web")

–