sass 收集

http://www.1024i.com/demo/less/document.html 可参考如上地址
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}
@arguments包含了所有传递进来的参数。 如果你不想单独处理每一个参数的话就可以像这样写：


.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
多个Guards可以通过逗号表示分隔，如果其中任意一个结果为 true，则匹配成功：
几个检查基本类型的函数：


iscolor
isnumber
isstring
iskeyword
isurl


$width:10px;
body{
  width:$width;
}




$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);


@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}


body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用




$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);


  &:hover{
    color:nth($linkColor,2);
  }
}
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。
关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，
具体可参考sass Functions（搜索List Functions即可）






$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
map数据以key和value成对出现，其中value又可以是list。
格式为：$map: (key1: value1, key2: value2, key3: value3);。
可通过map-get($map,$key)取值。


 border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。


.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}
@at-root用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。


h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器


%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}
如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，
然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。
占位选择器以%标识定义，通过@extend调用。


if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。


.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}


//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}


//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}


//跳出父级元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}


//跳出media嵌套，父级有效
@media print {
  .parent2{
    color:#f00;


    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}


//跳出media和父级
@media print {
  .parent3{
    color:#f00;


    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}


@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}


@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}


//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}


//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}


@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}


@include max-screen(480px) {
  body { color: red }
}


h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}


%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
$lte7:1;
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}


$baseFontSize:      10px ;
$gray:              #ccc ;        


// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
body{
  font-size:$baseFontSize;
 
}
.test{
  font-size:pxToRem(16px);
 
}
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}


$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}








$color-stack:
    (group: orange, id: normal, color: #e67835),
    (group: orange, id: pale, color: #f8a878),
    (group: orange, id: dark, color: #ad490c),
    (group: blue, id: normal, color: #426682);


// Color  Function
@function color($group, $shade:normal, $transparency:1){
  @each $color in $color-stack{
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);
    @if($group == map-get($color, group) and $shade == map-get($color, id)){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}
解释一下是怎么回事，定义了一个名为$color-stack的Sass Map。唯一要做的就是在这个Map中新增或删除一个颜色。这个Map包括了三个值：group、id和color。


group:组名，可以取你想要的名，比如说：orange、blue。这个字段不是独特的颜色
id:这是颜色唯一标识符。淡一点颜色叫pale，深一点的颜色叫dark，默认的normal。所以默认id的标识符定义为normal。这个域是独一无二的。不要重复在同一组中使用。
color:定义颜色值，采用的是十六进制
接下来定义了一个名为color的函数
body{
  color: color(blue, normal,.8);
}
p{
  color: color(orange);
}
blockquote{
  color: color(blue);
  background: color(orange, pale,.4);
  border-color: color(orange, dark);
}


$font-stack:
  (group: brandon, id: light, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: normal),
  (group: brandon, id: light-italic, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: italic),
  (group: brandon, id: regular, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: normal),
  (group: brandon, id: regular-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: brandon, id: bold, font: ('Brandon Grot W01 Black', san-serif), weight: 700, style: normal),
  (group: brandon, id: bold-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: clarendon, id: regular, font: ('Clarendon LT W01', serif), weight: 200, style: normal),
  (group: code, id: regular, font: (monospace), weight: 400, style: normal);


// Breakpoint Mixin
@mixin font($group, $id:regular){
  @each $font in $font-stack{
    @if($group == map-get($font, group) and $id == map-get($font, id)){
      font-family: map-get($font, font);
      font-weight: map-get($font, weight);
      font-style: map-get($font, style);
    }
  }
}
你会注意到，和上例中的$color-stack类似，定义了一个Sass Map。这段代码和上例中的颜色功能非常类似，但有一些关键之处不同，下面简单介绍一下。


首先要处理的是$font-stack这个Map。在这个Map中包括了五个字段：


group:这是一组字体名。这是字体值，例如brandon、clarendon或者serif
id:字体唯一标识符。例如bold、light-italic、regular。其中regular是默认值。
font:这才是你想要的字体，他可以是一个map也可以是变量
weight:CSS中的font-weight，设置字体的粗细
style:CSS中的font-style，设置字体的样式
一旦你定义或调用mixin，这个mixin就会去遍历$font-stack，寻找匹配的group和id。一旦发现，将值返回给font-family、font-weight、font-style。


h1{
  @include font(brandon, light-italic);
}
p{
  @include font(brandon);
}
p i{
  @include font(brandon, regular-italic);
}
p b{
  @include font(brandon, bold);
}
blockquote{
  @include font(clarendon);
}
code{
  @include font(code);
}


$media-stack:
  (group: tablet, id: general, rule: "only screen and (min-device-width: 700px)"),
  (group: small, id: general, rule: "only screen and(min-device-width: 1100px)"),
  (group: small, id: inbetween, rule: "only screen and(min-device-width: 1100px) and (max-device-width: 1400px)"),
  (group: large, id: general, rule: "only screen and(min-device-width: 1400px)"),
  (group: print, id: general, rule: "only print");


@mixin media($group, $id: general){
  @each $media in $media-stack{
    @if($group == map-get($media, group) and $id == map-get($media, id)){
      $rule: map-get($media, rule);
      @media #{$rule} {@content}
    }
  }
}
不用多说，你都注意到了$media-stack。就像这篇文章中其他几个：


group:这是媒体查询的组，这有很多个值可以使用，比如tablet、small和1400
id:媒体查询唯一标识符。这也是唯一的。如general、inbetween和exclude。默认的组一般为general
rule:这是你想要的媒体查询的实际规则。其值要用双引号括起来，否则Sass会报错
使用这个混合宏有两种方式。一个是自己调用，另一个是在嵌套中调用。我通常在嵌套中选择调用这个混合宏，这样会生成一个更小的CSS文件。


h1{
  color: #333;
  @include media(tablet){
    font-size: 1rem;
  };
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };
}


h1{
  color: #333;
  @include media(tablet){
    font-size: 1rem;
  };
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };
  @include media(custom, screen, " (max-device-width: 360px)"){
    color: blue;
  };
}


h1{
  color: #333;
  @include media(tablet, general, " and (min-device-pixel-ratio: 2)"){
    font-size: 1rem;
  };
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };
  @include media(custom, screen, "(max-device-width: 360px)"){
    color: blue;
  };
}
居中
@mixin center($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;


    @if not $width and not $height {
        transform: translate(-50%, -50%);
    } @else if $width and $height {
        width: $width;
        height: $height;
        margin: -($width / 2) #{0 0} -($height / 2);
    } @else if not $height {
        width: $width;
        margin-left: -($width / 2);
        transform: translateY(-50%);
    } @else {
        height: $height;
        margin-top: -($height / 2);
        transform: translateX(-50%);
    }
}
@include center;没有向 Sass mixin 传递参数，使用 CSS transform 属性实现居中效果
@include center(400px);向 Sass mixin 传递了宽度，所以就使用负向 margin 处理水平位置
@include center($height: 400px);向 Sass mixin 传递了高度，所以就使用负向 margin 处理垂直位置
@include center(400px, 400px);向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置


$media-stack:
  (group: tablet, id: general, rule: "only screen and (min-device-width: 700px)"),
  (group: small, id: general, rule: "only screen and(min-device-width: 1100px)"),
  (group: small, id: inbetween, rule: "only screen and(min-device-width: 1100px) and (max-device-width: 1400px)"),
  (group: large, id: general, rule: "only screen and(min-device-width: 1400px)"),
  (group: print, id: general, rule: "only print");


@mixin media($group, $id: general){
  @each $media in $media-stack{
    @if($group == map-get($media, group) and $id == map-get($media, id)){
      $rule: map-get($media, rule);
      @media #{$rule} {@content}
    }
  }




 @include media(tablet){
    font-size: 1rem;
  };
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };