你必须使用的8个Sass mixins

piaoling  2015-05-13 12:33:34

Sass mixins是一种一次定义到处使用的代码块,你可以将它想象为编程语言中的函数。一个mixin可以有多个参数,并且可以将这些代码内容输出为CSS代码。它非常适合于编写干净整洁的自定义CSS代码。

你必须使用的8个Sass mixins

Sass mixins是一种一次定义到处使用的代码块,你可以将它想象为编程语言中的函数。一个mixin可以有多个参数,并且可以将这些代码内容输出为CSS代码。它非常适合于编写干净整洁的自定义CSS代码。

在网上已经有一些可以使用的mixin库,如Compass库。这篇文章中介绍的是开发者必须理解和掌握的非常有用的8个mixins代码块。

1、使用rem设置字体尺寸并使用像素进行回退

rem和em类似,都是一种CSS测量单位,但是它不是相对于父元素的尺寸,而是相对于HTML文档的根元素设置元素的尺寸大小。

由于rem在设置元素尺寸的时候是相对于HTML根元素的尺寸,而不是他的父元素的设置,因此在使用上不会发生混乱的情况。但是由于在IE8及以下版本的IE浏览器中不支持rem属性,因此我们必须在这些浏览器中使用像素为单位来创建回退代码。

@function calculateRem($size) {
  $remSize: $size /16px;
  @return $remSize *1rem;
}
 
@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}                             

使用方法

p {
  @include font-size(14px)
}                             

输出结果

p {
  font-size:14px; //如果浏览器不支持rem将使用这个规则进行覆盖
  font-size:0.8rem;
}                             
2、Breakpoints

Sass 3.2开始允许开发者在使用媒体查询(media queries)时使用定义的名称,这使得代码看起来清晰得多。作为@media (min-width: 600px)等代码的替代,它使用了更有语义的名称形式,如“breakpoint-large”或“breakpoint-a-really-large-computer-machine”。

@mixin bp-large{
  @media onlyscreenand (max-width:60em) {
    @content;
  }
}
 
@mixin bp-medium{
  @media onlyscreenand (max-width:40em) {
    @content;
  }
}
 
@mixin bp-small{
  @media onlyscreenand (max-width:30em) {
    @content;
  }
}                             

使用方法

.sidebar {
  width:60%;
  float:left;
  margin:02;
  @include bp-small{
    width:100%;
    float:none;
    margin:0;
  }
}                             

输出结果

.sidebar {
  width:60%;
  float:left;
  margin:02;
  @media onlyscreenand (max-width:30){
    .sidebar{width:100%;float:none;margin:0;}
  }
}                             
3、SVG背景图片及PNG和retina回退

这个mixin依赖于Modernizr,在你在页面上创建图片的时候添加一些额外的代码。

你需要一个.svg文件作为默认的背景图片。此外还需要一个.png格式的图片作为在不支持SVG格式的浏览器上的回退。另外,你还需要一个2倍尺寸大小的.png格式的图片作为retina设备上的回退。

你所需要的图片一共有:

  • pattern.svg
  • pattern.png
  • pattern@2x.png
$image-path:'../img'!default;
$fallback-extension:'png'!default;
$retina-suffix:'@2x';
@mixin background-image($name, $size:false){
    background-image:url(#{$image-path}/#{$name}.svg);
    @if($size){
        background-size: $size;
    }
    .no-svg &{
        background-image:url(#{$image-path}/#{$name}.#{$fallback-extension});
 
        @media onlyscreenand (-moz-min-device-pixel-ratio:1.5), onlyscreenand (-o-min-device-pixel-ratio:3/2), onlyscreenand (-webkit-min-device-pixel-ratio:1.5), onlyscreenand (min-device-pixel-ratio:1.5) {
          background-image:url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
        }
    }
}                             

使用方法

body {
  @include background-image('pattern');
}                             
4、Animations 和 keyframes

在插件CSS3 Animations动画的时候需要添加各种浏览器厂商前缀的代码。通过这个mixin你可以只使用几行代码就完成这些工作。

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  } 
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  } 
  @keyframes $animation-name {
    @content;
  }
}
 
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};     
}                             

使用方法

@include keyframes(slide-down) {
  0%{opacity:1; }
  90%{opacity:0; }
}
 
.element {
  width:100px;
  height:100px;
  background:black;
  @include animation('slide-down 5s 3');
}                             
5、Transitions

和animations一样,CSS transitions在使用的时候也要添加很多浏览器厂商的前缀,同样可以通过一个mixin来简化这些操作。

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}                             

使用方法

a {
  color:gray;
  @include transition(color .3s ease);
  &:hover {
    color:black;
  }
}                             
6、跨浏览器的透明度设置

这个mixin可以可以制作出兼容 Internet Explorer 5 的跨浏览器透明度效果。

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity *100;
  filter: alpha(opacity=$opacity-ie); //IE8
}                             

使用方法

.faded-text {
  @include opacity(0.8);
}                             
7、清除浮动(Clearfix)

在网上有各种不同的clearfix hacks方法。这里使用的方法是由Nicolas Gallagher设计的,这种清除浮动的方法能兼容IE6+的浏览器。

%clearfix {
  *zoom:1;
  &:before, &:after {
    content:" ";
    display: table;
  }
  &:after {
    clear:both;
  }
}                             

使用方法

.container-with-floated-children {
  @extend %clearfix;
}                             
8、隐藏元素

当你使用display: none来隐藏一个元素的时候,屏幕阅读设备还是会将这个元素读出来。有时候这不是我们想要的结果。我们需要另一种方法来隐藏元素。

在这里我们将使用Sass placeholder selector,使用继承的方法来使用代码,这样不会产生大量的重复代码。

%visuallyhidden {
  margin:-1px;
  padding:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip: rect(0000);
  clip: rect(0,0,0,0);
  position:absolute;
}                             

使用方法

<buttonclass="mobile-navigation-trigger">
  <bclass="visually-hidden">Open the navigation</b>
  <imgsrc="http://doingthing.com/img/mobile-navigation-icon.svg">
</button>                             
.visually-hidden{
  @extend %visuallyhidden;
}                             

小结

本文中介绍了8种非常有用的Sass mixin。通过这些mixin可以大大的简化你的开发工作,你可以将这些mixin作为工具保存起来,以备不时之需。如果你有更好的mixin代码,可以跟帖展示出来,与大家分享。



http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201505111815.html

类别 :  CSS(6)  |  浏览(2996)  |  评论(0)
发表评论(评论将通过邮件发给作者):

Email: