初学Sass

/*设置全局变量兼容IE6-7*/
$ie67:true!default;
@mixin inline-block
{
display:inline-block;
@if $ie67
{
          //兼容IE67的代码
 *display:inline;
 *zoom:1;
}
}
/*含有一个参数的模块定义*/
@mixin float($float:left)
{
  float:$float;//也就是float是自己传递参数的值.默认是left
  @if $ie67//还是要兼容IE67
  {
display:inline;
  }
}
/*
content的用法。定义个无参数的模块。引用网上的一段话：按常规来说，我们所有的样式都是在mixin里面定义好的，
然后使用的时候include就拷贝了这段样式，但是content改变了这一惯例，它其实没有定义样式，它是定义好了选择器，
然后include的时候，就是选择器定了，你写的样式都放在这个选择器里面
*/
@mixin head
{
  #header/*ID为header.调用的时候是include head{//这个括号里面的内容就是content里面的内容}。但是content的真实用处在于：media-queries，animation的keyframes定义*/
  {
   @content;
  }
}
/*content用于media-queries*/
@mixin screen($min-width,$max-width)/*这样的定义必须传递参数，因为没有默认的值*/
{
  @media screen and (min-width:$min-width) and (max-width:$max-width)
  {
    @content;
  }
}
/*content用于animation的keyframes*/
@mixin keyframes($name)
{
   @keyframes #{name}
   {
@content;
   }
}

/*content用于为不兼容border—radius的浏览器做兼容*/
@mixin no-radius
{
  .no-radius
  {
@content;
  }
}

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


/*定义一个无参数的模块.无参数的可以没有括号*/
@mixin no-arguments
{
  color:blue;
  font-size:10px;
}


/*定义一个无参数的模块，无参数的也是可以用括号的*/
@mixin no-arguments_parenthesis()
{
  color:blue;
  font-size:100px;
}


/*最后include产生的样式是以复制拷贝的方式存在的，而extend产生的样式是以组合申明的方式存在的*/
//这里没有定义参数的一个模块，这个模块不会被编译到CSS文件中间
@mixin fakeshadow($opacity:50)
{
  border:{width:10px; color:red;style:solid;opacity:$opacity / 100}
}

//传递进来了三个参数，也就是当我不知道有几个参数的时候是这个传递进来的
//但是这时候调用必须传递参数，因为这个参数没有默认值。即使传递一个参数也行
//但是如果没有...那么就只能传递一个参数
@mixin box-shadow($shadow...)
{
    -webkit-box-shadow:$shadow;
    -moz-box-shadow:$shadow;
    box-shadow:$shadow; 
}
/*定义一个样式去被继承，但这是tagName的继承，他是用at符号继承的。但是这种方式和class一样，即使不被继承，也会出现在.css文件里面，类名就是span标签名称*/
span
{
color:red;
font-weight:bold;
font-style:italic;
}
/*定义个占位的，如果没有被继承，那么是不会出现在CSS里面的也就是.Css文件里面。被继承了就会出现在继承的类里面，但是CSS文件不会有forExtend这个类。只会有其中的属性*/
%forExtend
{
color:red;
background-color:blue;
}


/*定义一个class用于继承。因为这是class类型的，即使没有被继承，那么他也会出现在.css文件里面，而且会有.forExtend这个类，而不仅仅有其中属性*/
.forExtend
{
color:blue;
font-size:100px;
}

//特定的样式
.special
{
  @include fakeshadow;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3));
}
.normal
{
@include fakeshadow(80);
        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 2px 2px rgba(0,0,0,.3),0 2px 2px rgba(0,0,0,.3));
//继承的用法
}


/*这种继承不是继承class的，而是为了继承标签的h1,h2,span等tagName的。*/
.extend1
{
@extend span;
        outline:none;
}
/*这是为了继承%占位符的的*/
.extend2
{
    @extend %forExtend;
}
/*这是为了继承class的*/
.extend3
{
@extend .forExtend;
}


#header{
    width:1000px;
    @include center-block;
}
.gallery{
    width:600px;
    @include center-block;
}

//然后引入inline-block模块,但是如果在这个文件的最上面对$ie67这个变量重写了，那么就表示不需要兼容IE67了.那么css里面不会输出了
.inline-block
{
@include inline-block;
}

//引入那个模块，然后向右浮动
.float
{
      @include float(right);
}
//没有参数的调用
.no-arguments
{
  @include no-arguments;
}
//没有参数也可以有括号
.no-arguments2
{
 @include no-arguments_parenthesis;
}
//调用含有content
.content-invoke
{
  @include head
  {
width:100px;
height:100px;
.logo
{
font-size:100px;
}
  }
}
/*content用于media query*/
#media-query
{
  @include screen(780px,1000px)
  {
color:red;
  }
}
/*content用于keyframes*/
#keyframe
{
@include keyframes(show)
{
0%{opacity:0;}
100%{opacity:1;}
}
}
/*content用于浏览器做border-radius兼容*/
.radius
{
@include no-radius
{
.box{background:url(round-bg.gif) no-repeat;}
}
}