技术控

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

[其他] Sass Mixins For Your Next Project

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

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

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

x

Sass Mixins For Your Next Project-1 (everything,function,together,content,display)
  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.
  [code]// Clearfix - Usage: @include clearfix();
@mixin clearfix() {
    & {
        *zoom: 1;
    }

    &:before, &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}[/code]  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.
  [code]// PX to REM - Usage: font-size: rem(37px);
@function rem($px, $base: $base-font-size) {
    @return ($px / $base) * 1rem;
}[/code]  Opacity

  This is a cross browser mixin for opacity going all the way back to IE8.
  [code]// Opacity - Usage: @include opacity(0.8);
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie);
}[/code]  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.
  [code]// Transitions - Usage: @include transition(all .2s ease);
@mixin transition($args...) {
    -webkit-transition: $args;
       -moz-transition: $args;
        -ms-transition: $args;
         -o-transition: $args;
            transition: $args;
}[/code]  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.
  [code]// Retina Background Images - Usage: @include background-image-retina(logo, png);
@mixin background-image-retina($file, $type) {
    background-image: url($file + '.' + $type);
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (-moz-min-device-pixel-ratio: 2),
        only screen and (-o-min-device-pixel-ratio: 2/1),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 192dpi),
        only screen and (min-resolution: 2dppx){
        & {
            background-image: url($file + [email protected]' + $type);
        }
    }
}[/code]  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.
  [code]// Input Placeholder
// Usage:
// @include input-placeholder {
//     font-size: 18px;
// }
@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}[/code]  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-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表