sass w3cplus.com/sassguide 的笔记 第二部分

/*www.w3cplus.com/sassguide/syntax.html*//*继承*/h1{  border:1px solid #ff9aa9;}.speaker{  @extend h1;  border-width:2px;}/*占位器？？？*//*函数*/$baseFontSize : 10px!default;$gray : #ccc!default;@function pxToRem($px){  @return $px / $baseFontSize * 1rem;}body{  font-size:$baseFontSize;  color:lighten($gray,10%);  }.test{  font-size:pxToRem(16px);  color:darken($gray,10%);}/*sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。*/$baseFontSize:          14px !default;$baseLineHeight:        1.5 !default;$baseGap:               $baseFontSize * $baseLineHeight !default;$halfBaseGap:           $baseGap / 2  !default;$samllFontSize:         $baseFontSize - 2px  !default;$_columns:                     12 !default;      // Total number of columns$_column-width:                60px !default;   // Width of a single column$_gutter:                      20px !default;     // Width of the gutter$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width/*if*/$lte7:true;$type:monster;.ib{  display:inline-block;  @if $lte7{    *display:inlilne;    *zoom:1;  }}p{  @if $type == ocean{    color:blue;  }@else if $type == matador{    color:red;  }@else if $type ==monster{    color:green;  }@else{    color:black;  }}/*三目运算符*/.pv{  font-size:if(true,1px , 2px);}@for $i from 1 through 3{  //---注意through拼写,用to代替也行;  .item-#{$i}{width:2em * $i;}}/*each*/$animal-list:puma,sea-slug,egret,salamander;@each $animal in $animal-list{  .#{$animal}-icon{    backgrount-image:url('/images/#{$animal}.png');  }}/*list循环,常用!!!!*/$animal-data:(puma,black,default),(sea-slug,blue,pointer),(egret,white,move);@each $animal , $color, $cursor in $animal-data{  .#{$animal}-icon{    background-image:url('/iamge/#{$animal}.png');    border:2px solid $color;    cursor:$cursor;  }}/*多字段map数据循环*/$headings:(h1:2em,h2:1.5em,h3:1.2em);@each $header , $size in $headings{  //***each前面是@，不是$  #{$header}{    font-size:$size;  }}/*说是list  map循环，都还是用each方法*/---------------------------------运行的结果-----------------------------------------------------------
@charset "UTF-8";/*www.w3cplus.com/sassguide/syntax.html*//*继承*/h1, .speaker {  border: 1px solid #ff9aa9;}.speaker {  border-width: 2px;}/*占位器？？？*//*函数*/body {  font-size: 10px;  color: #e6e6e6;}.test {  font-size: 1.6rem;  color: #b3b3b3;}/*sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。*//*if*/.ib {  display: inline-block;  *display: inlilne;  *zoom: 1;}p {  color: green;}/*三目运算符*/.pv {  font-size: 1px;}.item-1 {  width: 2em;}.item-2 {  width: 4em;}.item-3 {  width: 6em;}/*each*/.puma-icon {  backgrount-image: url("/images/puma.png");}.sea-slug-icon {  backgrount-image: url("/images/sea-slug.png");}.egret-icon {  backgrount-image: url("/images/egret.png");}.salamander-icon {  backgrount-image: url("/images/salamander.png");}/*list循环,常用!!!!*/.puma-icon {  background-image: url("/iamge/puma.png");  border: 2px solid black;  cursor: default;}.sea-slug-icon {  background-image: url("/iamge/sea-slug.png");  border: 2px solid blue;  cursor: pointer;}.egret-icon {  background-image: url("/iamge/egret.png");  border: 2px solid white;  cursor: move;}/*多字段map数据循环*/h1, .speaker {  font-size: 2em;}h2 {  font-size: 1.5em;}h3 {  font-size: 1.2em;}/*说是list  map循环，都还是用each方法*/