_mixins.scss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. @charset "UTF-8";
  2. $vari : 750 / 640;
  3. @function px2rem($size){
  4. @return $size / 20 / 2 / $vari + rem;
  5. }
  6. @function -px2rem($size){
  7. @return - $size / 20 / 2 / $vari + rem;
  8. }
  9. @mixin reset{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. @mixin inline-block{
  14. display: inline-block;
  15. *display: inline;
  16. *zoom: 1;
  17. }
  18. @mixin clearfix{
  19. *zoom: 1;
  20. &:before,
  21. &:after{
  22. content: "";
  23. display: table;
  24. line-height: 0;
  25. }
  26. &:after{
  27. clear: both;
  28. }
  29. }
  30. /* 弹性盒子webkit-box */
  31. @mixin webkitbox( $type : 1 ){
  32. display: -webkit-box;
  33. @if $type == 1{ -webkit-box-orient: horizontal; }//水平
  34. @if $type == 2{ -webkit-box-orient: vertical; }//垂直
  35. }
  36. @mixin flex($flex){//设置盒子大小
  37. -webkit-box-flex: $flex;
  38. }
  39. @mixin size($value) {
  40. width: $value;
  41. height: $value;
  42. }
  43. @mixin size($width, $height) {
  44. width: $width;
  45. height: $height;
  46. }
  47. @mixin hide-text{
  48. text-indent: 100%;
  49. white-space: nowrap;
  50. overflow: hidden;
  51. }
  52. @mixin break {
  53. -ms-word-break: break-all;
  54. word-break: break-all;
  55. word-break: break-word;
  56. }
  57. /* 文字溢出 */
  58. @mixin ellipsis {
  59. white-space: nowrap;
  60. overflow: hidden;
  61. -ms-text-overflow: ellipsis;
  62. -o-text-overflow: ellipsis;
  63. text-overflow: ellipsis;
  64. }
  65. @mixin pre {
  66. white-space: pre-wrap;
  67. white-space: -moz-pre-wrap;
  68. white-space: -pre-wrap;
  69. white-space: -o-pre-wrap;
  70. word-wrap: break-word;
  71. }
  72. @mixin wrap {
  73. text-wrap: wrap;
  74. white-space: pre-wrap;
  75. white-space: -moz-pre-wrap;
  76. word-wrap: break-word;
  77. }
  78. // http://www.hicss.net/solve-change-line-in-css/
  79. @mixin nowrap {
  80. white-space: nowrap;
  81. word-break: keep-all;
  82. }
  83. @mixin opacity($opacity) {
  84. opacity: $opacity;
  85. filter: alpha(opacity=#{$opacity * 100});
  86. }
  87. @mixin min-height($height) {
  88. min-height: $height;
  89. height: auto !important;
  90. _height: $height;
  91. }
  92. /* 旋转 */
  93. @mixin rotate($value:180deg){
  94. -webkit-transform: rotate($value);
  95. -moz-transform: rotate($value);
  96. -ms-transform: rotate($value);
  97. transform: rotate($value);
  98. }
  99. /* css角标 */
  100. @mixin u-arrow-left($value:6px,$bordercolor:#fff){
  101. border-width: $value;
  102. border-color: transparent $bordercolor transparent transparent;
  103. border-style: solid;
  104. }
  105. // Gradients 添加渐变过渡函数,20140110 add by petsa
  106. @mixin gradient($color-form, $color-to) {
  107. background: $color-form; // Old browsers
  108. background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%); // FF3.6+
  109. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome,Safari4+
  110. background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%); // Chrome10+,Safari5.1+
  111. background: -o-linear-gradient(top, $color-form 0%, $color-to 100%); // Opera 11.10+
  112. background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%); // IE10+
  113. background: linear-gradient(to bottom, $color-form 0%, $color-to 100%); // W3C
  114. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); // IE6-9
  115. }
  116. //三角朝上
  117. @mixin triangle-up($width,$color){
  118. width: 0;
  119. height: 0;
  120. border: $width solid $color;
  121. border-color: transparent transparent $color;
  122. }
  123. //三角朝下
  124. @mixin triangle-down($width,$color){
  125. width: 0;
  126. height: 0;
  127. border: $width solid $color;
  128. border-color: $color transparent transparent;
  129. }
  130. //三角朝左
  131. @mixin triangle-left($width,$color){
  132. width: 0;
  133. height: 0;
  134. border: $width solid $color;
  135. border-color: transparent $color transparent transparent;
  136. }
  137. //三角朝右
  138. @mixin triangle-right($width,$color){
  139. width: 0;
  140. height: 0;
  141. border: $width solid $color;
  142. border-color: transparent transparent transparent $color;
  143. }
  144. //左上三角形
  145. @mixin triangle-topleft($width,$color){
  146. width: 0;
  147. height: 0;
  148. border: $width solid $color;
  149. border-color: $color transparent transparent $color;
  150. }
  151. //右上三角形
  152. @mixin triangle-topright($width,$color){
  153. width: 0;
  154. height: 0;
  155. border: $width solid $color;
  156. border-color: $color $color transparent transparent;
  157. }
  158. //左下三角形
  159. @mixin triangle-bottomleft($width,$color){
  160. width: 0;
  161. height: 0;
  162. border: $width solid $color;
  163. border-color: transparent transparent $color $color;
  164. }
  165. //右下三角形
  166. @mixin triangle-bottomright($width,$color){
  167. width: 0;
  168. height: 0;
  169. border: $width solid $color;
  170. border-color: transparent $color $color transparent;
  171. }