技术控

    今日:0| 主题:63445
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Sass Mixins For Your Next Project

[复制链接]
难瘦 发表于 2016-10-4 01:57:59
168 1

Sass Mixins For Your Next Project

Sass Mixins For Your Next Project
  Sass mixins make writing out those long winded tasks a breeze and are a must have for anyones project. We’ve put together some of our favourites that’ll make everything that much simpler.
  Clearfix

  You’ve added some floats and the whole layout of your site has messed up, you’re probably going to need a clearfix. This nice simple and to the point mixin comes in to save the day.
  1. // Clearfix - Usage: @include clearfix();
  2. @mixin clearfix() {
  3.     & {
  4.         *zoom: 1;
  5.     }
  6.     &:before, &:after {
  7.         content: "";
  8.         display: table;
  9.     }
  10.     &:after {
  11.         clear: both;
  12.     }
  13. }
复制代码
Pixels to REMs or EMs

   This mixin make it really easy to turn px unit into a rem unit. You can also with a little tweaking make it work of em unit too. Make sure to specify the `$base-font-size` for the mixin to work.
  1. // PX to REM - Usage: font-size: rem(37px);
  2. @function rem($px, $base: $base-font-size) {
  3.     @return ($px / $base) * 1rem;
  4. }
复制代码
Opacity

  This is a cross browser mixin for opacity going all the way back to IE8.
  1. // Opacity - Usage: @include opacity(0.8);
  2. @mixin opacity($opacity) {
  3.     opacity: $opacity;
  4.     $opacity-ie: $opacity * 100;
  5.     filter: alpha(opacity=$opacity-ie);
  6. }
复制代码
CSS Transitions

  Typing out all the vendor prefixes can be a nightmare and hurt readability of you code, this mixin makes that a thing of the past.
  1. // Transitions - Usage: @include transition(all .2s ease);
  2. @mixin transition($args...) {
  3.     -webkit-transition: $args;
  4.        -moz-transition: $args;
  5.         -ms-transition: $args;
  6.          -o-transition: $args;
  7.             transition: $args;
  8. }
复制代码
Retina Background Images

  You always want your site to look crisp so using retina images is a must. Using this mixin allows you to specify the file name and type and then  it will put in your non retina image and your retina image ending with @2x.
  1. // Retina Background Images - Usage: @include background-image-retina(logo, png);
  2. @mixin background-image-retina($file, $type) {
  3.     background-image: url($file + '.' + $type);
  4.     @media only screen and (-webkit-min-device-pixel-ratio: 2),
  5.         only screen and (-moz-min-device-pixel-ratio: 2),
  6.         only screen and (-o-min-device-pixel-ratio: 2/1),
  7.         only screen and (min-device-pixel-ratio: 2),
  8.         only screen and (min-resolution: 192dpi),
  9.         only screen and (min-resolution: 2dppx){
  10.         & {
  11.             background-image: url($file + '@2x.' + $type);
  12.         }
  13.     }
  14. }
复制代码
Input Placeholder

  Styling the input placeholder and be a pain but using this mixin you can style all the vendor prefixes at once creating a great experience for all users.
  1. // Input Placeholder
  2. // Usage:
  3. // @include input-placeholder {
  4. //     font-size: 18px;
  5. // }
  6. @mixin input-placeholder {
  7.     &.placeholder { @content; }
  8.     &:-moz-placeholder { @content; }
  9.     &::-moz-placeholder { @content; }
  10.     &:-ms-input-placeholder { @content; }
  11.     &::-webkit-input-placeholder { @content; }
  12. }
复制代码
We’d love to hear what mixins you use on your projects! Let us know in the comments below.
223262589659 发表于 2016-10-5 02:47:37
鼎力支持!!
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表