CSS - Practice

10 BEST SASS MIXINS

/* css prefix */
/*
div {
   @include css3-prefix(transform, scale3d(2.5, 2, 1.5));
}
*/
@mixin css3-prefix($prop, $value) {
   -webkit-#{$prop}: #{$value};
   -moz-#{$prop}: #{$value};
   -ms-#{$prop}: #{$value};
   -o-#{$prop}: #{$value};
   #{$prop}: #{$value};
}


/* VERTICAL CENTERING */
/*
div {
   @include vertical-center();
}
*/
@mixin vertical-center {
   position: relative;
   top: 50%;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}


/* FONT-FACE RULE */
/*
@include font-face("My Font", my-font);
*/
@mixin font-face($name, $file) {
   @font-face {
   font-family: "#{$name}";
   src: url("../fonts/#{$file}.eot");
   src: url("../fonts/#{$file}.eot?#iefix") format("embedded-opentype"),
   url("../fonts/#{$file}.woff") format("woff"),
   url("../fonts/#{$file}.ttf") format("truetype"),
   url("../fonts/#{$file}.svg?#webfont") format("svg");
 }
}


/* KEYFRAME ANIMATIONS */
/*
@include keyframes(background) {
   0% {
     background: white;
   }
   50% {
     background: lightblue;
   }
   100% {
     background: royalblue;
   } 
}
*/
@mixin keyframes($name) {
   @-webkit-keyframes #{$name} {
     @content;
   }
   @-moz-keyframes #{$name} {
     @content;
   }
   @keyframes #{$name} {
     @content;
   }
}


/* RETINA-READY IMAGES */
/*
.image {
    background: url("my-image.png") no-repeat;
    @include retina-image("my-image2x.png", 1000px, 500px);
}
*/
@mixin retina-image($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) {
       background-image: url($image);
       background-size: $width $height;
   }
}

/* ABSOLUTE POSITIONING */
/*
div {
   @include abs-position(100px, 100px, auto, auto);
}
*/
@mixin abs-position ($top, $right, $bottom, $left) {
   position: absolute; 
   top: $top;
   right: $right;
   bottom: $bottom;
   left: $left;
}



/* ARROW WITH FOUR OPTIONAL DIRECTIONS */
/*
// without arguments (default)
div { 
   @include arrow(); 
}

// with custom arguments
div {
   @include arrow(up, 10px, #efefef);
}
*/
@mixin arrow($direction: down, $size: 5px, $color: #555) {
   width: 0;
   height: 0;
   @if ($direction == left) {
      border-top: $size solid transparent;
      border-bottom: $size solid transparent; 
      border-right: $size solid $color;
   }
   @else if ($direction == right) {
      border-top: $size solid transparent;
      border-bottom: $size solid transparent; 
      border-left: $size solid $color;
   }
   @else if ($direction == down) {
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-top: $size solid $color;
   }
   @else {
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-bottom: $size solid $color;
   }
}




/* MEDIA QUERIES FOR MOBILE-FIRST DESIGN */
/*
@include breakpoint(large) {
   div {
      font-size: 2rem;
      line-height: 1.4;
   }
}
*/
@mixin breakpoint($point) {
   @if $point == large {
      @media only screen and (min-width: 1366px) {
         @content;
      }
   } 
   @else if $point == desktop {
      @media only screen and (min-width: 1024px) {
         @content;
      }
   } 
   @else if $point == tablet {
      @media only screen and (min-width: 600px) {
         @content;
      }
   }
}


/* FIXED ASPECT RATIO */
/*
<div class="outer-box">
   <div class="inner-box"></div>
</div>

.outer-box {
   @include aspect-ratio(4, 3);
}
*/
@mixin aspect-ratio($width, $height) {
   position: relative;
   &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
   }
   > .inner-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }
}



/* TEXT SHORTENING */
/*
div {
   @include text-shorten();
}
*/
@mixin text-shorten {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

style.css

/* 超出显示省略号 */
.text-overflow {
    display:block;				/*内联对象需加*/
    width:31em;
    word-break:keep-all;		/* 不换行 */
    white-space:nowrap;			/* 不换行 */
    overflow:hidden;			/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;		/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

/* 多行超出省略号 */
h6 {
  display: block;
  display: -webkit-box;
  width:100%;
  height:3rem;
  font-size:1.3rem;
  line-height: 1.5rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow : hidden;
  text-overflow: ellipsis;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

/* 去掉表单组件默认显示样式 */
input {
	-webkit-appearance: none; appearance: none;
}

/* chrome浏览器CSS字体大小小于12px不起作用解决方法 */
.text {
	-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block
}


/* 强制不换行 */
div {
  white-space:nowrap;
}

/* 自动换行 */
div { 
  word-wrap: break-word; 
  word-break: normal; 
}

/* 强制英文单词断行 */
div {
  word-break:break-all;
}

/*设置宽高相等*/
/*
<div class="circle-title"></div>
*/
.equal-width {
  width: 100px;
}
.equal-width::before {
  content: "";
  padding-top: 100%;
  display: block;
}


/* 
	点击元素产生背景或边框问题
	-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符 
*/
a,button,input,textarea { 
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	-webkit-user-modify:read-write-plaintext-only; 
}
/* 点击元素产生背景或边框问题或使用 */
body {
  	margin: 0;
  	-webkit-tap-highlight-color: transparent;
}

/*
	禁止长按链接与图片弹出菜单
*/ 
a,img { 
  -webkit-touch-callout: none 
} 


/* 推荐字体设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}


/*
	禁止ios和android用户选中文字
*/ 
html,body {
  -webkit-user-select:none; user-select: none;
} 

/*
	android上去掉语音输入按钮
*/ 
input::-webkit-input-speech-button {display: none}

/*
	禁用input在ios下，输入英文首字母的默认大写
	<input autocapitalize="off" autocorrect="off" />
*/ 


/*
	改变输入框placeholder的颜色值
*/ 
::-webkit-input-placeholder { color: #999; } 
:-moz-placeholder { color: #999; } 
::-moz-placeholder { color: #999; } 
:-ms-input-placeholder { color: #999; } 
input:focus::-webkit-input-placeholder{ color:#999; }


/*
	中英字体名对照表 

    宋体 SimSun 
    黑体 SimHei 
    微软雅黑 Microsoft Yahei 
    微软正黑体 Microsoft JhengHei 
    新宋体 NSimSun 
	新细明体 MingLiU 
    细明体 MingLiU 
    标楷体 DFKai-SB 
    仿宋 FangSong 
    楷体 KaiTi 
    仿宋_GB2312 
    FangSong_GB2312 
    楷体_GB2312 KaiTi_GB2312 
*/
  

/*
	移动端字体设置
	中文字体多数使用宋雅黑，英文用Helvetica 
*/
body { font-family: Microsoft Yahei,SimSun,Helvetica; }


/*
	REM字体单位设置
*/
html { font-size: 625%; } 
body { font-size:14px; font-size: .16rem; } 



@media screen and (max-width: 320px) {
  html {
    font-size: 560%;
  }
}


/* 
	消除transition闪屏
*/
.css { 
  -webkit-transform-style: preserve-3d; 
  -webkit-backface-visibility: hidden; 
  -webkit-perspective: 1000; 
}



/*
	竖屏时样式
*/
@media all and (orientation:portrait){ } 


/*
	横屏时样式
*/ 
@media all and (orientation:landscape){ }









/*
无限循环旋转
*/

@keyframes rotate{
  0%{
    transform: rotate(0);
  }
  50%{
    transform:rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.rotate{
  transition: 0.5s;
  animation: rotate 1s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
}