SASS使用总结 - Lz_Tiramisu

<span style="color: #800000;">//sass style
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body </span>{<span style="color: #ff0000;">
     font-family</span>:<span style="color: #0000ff;"> $fontStack</span>;<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> $primaryColor</span>;
}<span style="color: #800000;">
//css style
 body </span>{<span style="color: #ff0000;">
     font-family</span>:<span style="color: #0000ff;"> Helvetica,
     sans-serif</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #333</span>;
}　

<span style="color: #800000;">//sass style
nav </span>{<span style="color: #ff0000;">
  ul {
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
  }<span style="color: #800000;">
 
  li </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;">
 
  a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
  }<span style="color: #800000;">
}
//css style
nav ul </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  list-style</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
 
nav li </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;
}<span style="color: #800000;">
 
nav a </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}

<span style="color: #800000;">//sass style
//-----------------------------------
@mixin box-sizing ($sizing) </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;">$sizing</span>;<span style="color: #ff0000;">     
       -moz-box-sizing</span>:<span style="color: #0000ff;">$sizing</span>;<span style="color: #ff0000;">
            box-sizing</span>:<span style="color: #0000ff;">$sizing</span>;
}<span style="color: #800000;">
.box-border</span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;">
    @include box-sizing(border-box);
</span>}<span style="color: #800000;">
//css style
//-----------------------------------
.box-border </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}

<span style="color: #800000;">//sass style
.message </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #333</span>;
}<span style="color: #800000;">
.success </span>{<span style="color: #ff0000;">
  @extend .message;
  border-color</span>:<span style="color: #0000ff;"> green</span>;
}<span style="color: #800000;">
.error </span>{<span style="color: #ff0000;">
  @extend .message;
  border-color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
 
.warning </span>{<span style="color: #ff0000;">
  @extend .message;
  border-color</span>:<span style="color: #0000ff;"> yellow</span>;
}<span style="color: #800000;">
//css style
.message, .success, .error, .warning </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #cccccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #333</span>;
}<span style="color: #800000;">
.success </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> green</span>;
}<span style="color: #800000;">
.error </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.warning </span>{<span style="color: #ff0000;">
  border-color</span>:<span style="color: #0000ff;"> yellow</span>;
}<span style="color: #800000;">
<br /></span>

<span style="color: #800000;">//sass style
$linkColor: #08c;
a </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">$linkColor</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
      color:darken($linkColor,10%)</span>;
    }<span style="color: #800000;">
}
//css style
a </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #0088cc</span>;
}<span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #006699</span>;
}

<span style="color: #800000;">//sass style
.container </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">
 
article[role="main"] </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 600px / 960px * 100%</span>;
}<span style="color: #800000;">
 
aside[role="complimentary"] </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 300px / 960px * 100%</span>;
}<span style="color: #800000;">
//css style
.container </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
 
article[role="main"] </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 62.5%</span>;
}<span style="color: #800000;">
 
aside[role="complimentary"] </span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 31.25%</span>;
}

<span style="color: #800000;">//sass style
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> $baseLineHeight</span>;
}<span style="color: #800000;">
//css style
body</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">2</span>;
}

<span style="color: #800000;">//sass style
$borderDirection:       top !default;
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#</span>{<span style="color: #ff0000;">$borderDirection</span>}{<span style="color: #ff0000;">
  border-#{$borderDirection</span>}<span style="color: #800000;">:1px solid #ccc;
}
//应用于复杂的属性值
body</span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;">#{$baseFontSize</span>}<span style="color: #800000;">/#</span>{<span style="color: #ff0000;">$baseLineHeight</span>}<span style="color: #800000;">;
}
//css style
.border-top</span>{<span style="color: #ff0000;">
  border-top</span>:<span style="color: #0000ff;">1px solid #ccc</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> 12px/1.5</span>;
}

<span style="color: #800000;">//list定义
//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
//使用
//sass style
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;">nth($linkColor,1)</span>;<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">hover{
    color:nth($linkColor,2)</span>;
  }<span style="color: #800000;">
}
//css style
a</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;">#08c</span>;
}<span style="color: #800000;">
a:hover</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;">#333</span>;
}

<span style="color: #800000;">//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings </span>{<span style="color: #ff0000;">
  #{$header</span>} {<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> $size</span>;
  }<span style="color: #800000;">
}
//css style
h1 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 2em</span>;
}<span style="color: #800000;">
h2 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 1.5em</span>;
}<span style="color: #800000;">
h3 </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 1.2em</span>;
}

<span style="color: #800000;">//sass style
$fontSize:      12px;
body</span>{<span style="color: #ff0000;">
    $fontSize</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">        
    font-size</span>:<span style="color: #0000ff;">$fontSize</span>;
}<span style="color: #800000;">
p</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">$fontSize</span>;
}<span style="color: #800000;">
//css style
body</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">14px</span>;
}<span style="color: #800000;">
p</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">14px</span>;
}

<span style="color: #800000;">//sass style
#top_nav</span>{<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
  text-transform</span>:<span style="color: #0000ff;"> capitalize</span>;<span style="color: #ff0000;">
 
  li{
    float</span>:<span style="color: #0000ff;">left</span>;
  }<span style="color: #800000;">
  a</span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
 
    &</span>:<span style="color: #0000ff;">hover{
      color:#ddd</span>;
    }<span style="color: #800000;">
  }
}
//css style
#top_nav</span>{<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
  text-transform</span>:<span style="color: #0000ff;"> capitalize</span>;
 
}<span style="color: #800000;"> 
#top_nav li</span>{<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
#top_nav a</span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;
}<span style="color: #800000;">
#top_nav a:hover</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;">#ddd</span>;
}

<span style="color: #800000;">//sass style
.fakeshadow </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> {
    style: solid</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> {
      width: 4px</span>;<span style="color: #ff0000;">
      color</span>:<span style="color: #0000ff;"> #888</span>;
    }<span style="color: #800000;">
    right: </span>{<span style="color: #ff0000;">
      width</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
      color</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
  }
}
//css style
.fakeshadow </span>{<span style="color: #ff0000;">
  border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
  border-left-width</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  border-left-color</span>:<span style="color: #0000ff;"> #888</span>;<span style="color: #ff0000;">
  border-right-width</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
  border-right-color</span>:<span style="color: #0000ff;"> #ccc</span>;
}

<span style="color: #800000;">//sass style
%ir</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
 
  border</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
%clearfix</span>{<span style="color: #ff0000;">
  @if $lte7 {
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;
  }<span style="color: #800000;">
  &:before,
  &:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 0/0 a</span>;
  }<span style="color: #800000;">
  &:after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
  }<span style="color: #800000;">
}
#header</span>{<span style="color: #ff0000;">
  h1{
    @extend %ir;
    width</span>:<span style="color: #0000ff;">300px</span>;
  }<span style="color: #800000;">
}
.ir</span>{<span style="color: #ff0000;">
  @extend %ir;
</span>}<span style="color: #800000;">
//css style
#header h1,
.ir</span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
  text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
 
  border</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
#header h1</span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;">300px</span>;
}