请选择 进入手机版 | 继续访问电脑版

技术控

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

[其他] Sass Mixins For Your Next Project

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

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

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 + [email protected]' + $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.



上一篇:Does Angular 2 live up to the hype?
下一篇:CareKit Tutorial for iOS: Part 1
223262589659 发表于 2016-10-5 02:47:37
鼎力支持!!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表