scss sass general mixins响应字体面占位符

Posted 2021-05-18

// styling a

$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
#{$a-tags} {
    color: inherit;
    text-decoration: none;
    @include transition(all 0.3s ease-in-out);
}

#{$a-tags-hover} {
    color: #fff;
}



//----------------
@mixin translating($tx, $ty) {
	-webkit-transform:translate($tx,$ty);
	-ms-transform:translate($tx,$ty);
	transform:translate($tx,$ty);
}
@include translating(50%,50%);
//----------------------------------------

$mobile-first: "screen and (max-width: 768px)";
	//#{} compile something within selector or property name!
	@media #{$mobile-first}{
		left: 0;
		width: 100%;
	}

//----------------------------------------

//--MIXINS---
$width-small: 500px;
$width-medium: 768px;
$width-large: 1200px;
@mixin responsive($width) {
  //wide-screens is the semantic name for use variable with
  @if $width==wide {
    @media only screen and (max-width: $width-large) {
      @content;
    } // de esta manera se puede pasar propiedades
  }
  @else if $width==medium {
    @media only screen and (max-width: $width-medium) {
      @content;
    }
  }
  @else if $width==small {
    @media only screen and (max-width: $width-small) {
      @content;
    }
  }
  @else if $width==retina{
    @media (-o-min-device-pixel-ratio: 5/4),(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi),(min-resolution: 1.25dppx){
      @content;
    }
  }
}
@mixin responsive_custom($width) {
 @media only screen and (unquote('max-width: ' + $width)) {
      @content;
    } 
}
@mixin imgsupport($img, $type){
    background-image: url(unquote($img + '@1.' + $type));
    @include responsive(retina){
      background-image: url(unquote($img + '@2.' + $type));
    }
    @include responsive(medium){
      background-image: url(unquote($img + '@0.' + $type));
    }
}
//----------------------------------------
// INCLUDE IN ROOT

@mixin clearing($elem){
  @at-root {
    #{$elem}::after,#{$elem}::before{
      content: "";
      display: table;
    }
    #{$elem}::after{
      clear: both;
    }
  }
}
@include clearing('.vvv');
@include clearing('.vvv');

//----------------------------------------
//RETINIZE IMGS

@mixin retinize($file, $type, $width, $height) {
  background-image: url('../images/' + $file + '.' + $type);
 
  @media (-webkit-min-device-pixel-ratio: 1.5),
         (min--moz-device-pixel-ratio: 1.5),
         (-o-min-device-pixel-ratio: 3/2),
         (min-device-pixel-ratio: 1.5),
         (min-resolution: 1.5dppx) {
    & {
      background-image: url('../images/' + $file + '-2x.' + $type);
      -webkit-background-size: $width $height;
         -moz-background-size: $width $height;
              background-size: $width $height;
    }
  }
}

.imag{
	@include retinize('icons', 'png', 24px, 24px);
}
//--------------------------------------
// BUCLESS!!!
$secs:300ms;
@for $i from 1 through 9 {

  .grafico  li:nth-child(#{$i}) .barra{
    @include transitioning(width, $secs * $i, cubic-bezier(0, 0, 0.79, 1), ( $secs * $i ) - $secs);
  }

}

//---each

$columns: (3,5,2);

$wcol:100% / 12;

@each $item in $columns {
    td:nth-child(#{ index($columns, $item) }){
      width: $wcol * $item;
    }
}

//----------------------------------------
//EXTEND CLASES

.alert{
	background:none;
}
.alert-positive {
  @extend .alert;
  background: #9c3;
}

//-----------------
// BOTONES IF
@mixin elboton($col, $pad, $mod) {
  $hpad: 8px;
  @if($mod==fill) {
    a {
      display: inline-block;
      padding: $hpad $pad;
      border: 1px solid $col;
      color: white;
      background-color: $col;
      border-radius: 5px;
      transition: all 300ms ease;
      text-decoration: none!important;
      &:hover {
        color: $col;
        background-color: white;
        text-decoration: none!important;
      }
    }
  }
  @else if($mod==border) {
    a {
      display: inline-block;
      padding: $hpad $pad;
      border: 1px solid $col;
      color: $col;
      background-color: white;
      border-radius: 5px;
      transition: all 300ms ease;
      &:hover {
        color: white;
        background-color: $col;
      }
    }
  }
}

////--------------CAMBIAR IMGS POR BACGROUND ICON
/*--change img for bcakground ---*/
@mixin imgxback($img, $size,$scr,$parent){
  #{$parent}{
    background: url(imgs/#{$img}) no-repeat center;
    background-size: $size;
    img[src*="#{$scr}"]{
      opacity: 0;
    }
  }
}

//-----------FONT FACE
$family2: 'clanpro-';
$family: 'roboto-';
@mixin fontfaceconfig($family, $type) {
  $url: 'fonts/';
  $eot: $url + $family + $type + '.eot';
  $woff2: $url + $family + $type + '.woff2';
  $woff: $url + $family + $type + '.woff';
  $ttf: $url + $family + $type + '.ttf';
  $svg: $url + $family + $type + '.svg#clanPro-'+ $type;
  @font-face {
    font-family: $family + $type;
    src: url($eot), url($woff) format('woff'), url($ttf) format('truetype'), url($svg) format('svg'), url($eot + '?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
  }
}

@include fontfaceconfig($family, 'black');
@include fontfaceconfig($family, 'bold');
@include fontfaceconfig($family, 'thin');
@include fontfaceconfig($family, 'light');
@include fontfaceconfig($family, 'regular');

//--------PLACEHOLDER

@mixin placeholder($col){
  &::-webkit-input-placeholder {
    color: $col;
    @content;
  }
  &:-moz-placeholder {
    /* Firefox 18- */
    color: $col;
    @content;
  }
  &::-moz-placeholder {
    /* Firefox 19+ */
    color: $col;
    @content;
  }
  &:-ms-input-placeholder {
    color: $col;
    @content;
  }
}

//------UNDERLINE
@mixin underline($col){
  color: $col;
  position: relative;
  &::after{
    content: "";
    height: 1px;
    width: 100%;
    background-color: $col;
    position: absolute;
    bottom: -3px;
    left: 0;
  }
}