Hola chicos, a continuación les dejo una lista de mixins hechos en sass que te pueden servir a la hora de estar maquetando tu proyecto e implementando el scss.

 

// Boder radius Use:  @include border-radius(10px);
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
// Border Use: color @include border(yellow);
@mixin border($color: red, $size: 1px, $type: solid) {
  border: $size $type $color;
}
 
// Opacity use: @include background(#8408a2, 0.5);
@mixin background($color, $opacity) {
  background-color: $color;
  opacity: $opacity;
}
 
// Background gradient Use: @include bgGradient(#ff3860, #16d05b);
@mixin bgGradient($startColor, $endColor) {
  background: -moz-linear-gradient(top, $startColor 5%, $endColor 100%);
  background: -ms-linear-gradient(top, $startColor 5%, $endColor 100%);
  background: -o-linear-gradient(top, $startColor 5%, $endColor 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, $startColor), color-stop(1, $endColor));
  background: -webkit-linear-gradient(top, $startColor 5%, $endColor 100%);
  background: linear-gradient(to bottom, $startColor 5%, $endColor 100%);
}
 
// Box shadow Use: boxShadow(4px, 5px, 10px, .5);
@mixin boxShadow($h: 2px, $v: 2px, $blur: 2px, $opacity: 0.3, $boolean: false) {
  $boolean: false !default
  @if $boolean {
    box-shadow: ($h $v $blur rgba(0, 0, 0, $opacity));
  } @else {
    box-shadow: (inset $h $v $blur rgba(0, 0, 0, $opacity));
  }
}
 
// Center elements Use: absoluteCenter(both);
@mixin absoluteCenter($axis: "both"){
  position:absolute;
  @if $axis == "y"{
    top: 50%;
    transform: translateY(-50%);
  }
  @if $axis == "x"{
    left: 50%;
    transform: translateX(-50%);
  }
  @if $axis == "both"{
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}
 
// Center elements @include center(400px);
@mixin center($margin: 0, $width: false, $display: false) {
  margin: $margin auto;
 
  @if $display != false {
    display: $display;
  }
 
  @if $width != false {
    width: $width;
  }
}
 
// Font Awesome Icon Use: @include font-awesome('f0fe', blue, 17px);
@mixin font-awesome($content, $color, $fontSize){
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  &:after{content: '#{$content}';}
  color: $color;
  font-size: $fontSize;
}
 
// Prefix Use: @include prefix(transform, rotate(45deg), webkit ms);
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  #{$property}: $value;
}
 
// No display elements Use: @include noDisplay();
@mixin noDisplay() {
  display: none;
}
 

Tambien te dejo unas extensiones de clases que puedes utilizar a la hora de hacer validaciones:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success {
  @extend .message;
  border-color: green;
}
 
.error {
  @extend .message;
  border-color: red;
}
 
.warning {
  @extend .message;
  border-color: yellow;
}
 

@telecristy

¿Te gustó esta publicación? Márcala como favorita