sass基礎用法

標籤：order   好的   log   之間   ...   play   highlight   tar   定義   

嵌套：

　　1.選取器嵌套；

　　2.屬性嵌套;

　　.box {
  　　　　  border-top: 1px solid red;
  　　　　  border-bottom: 1px solid green;
　　}
　　.box {
 　　　　 border: {
   　　　　　　　　　　top: 1px solid red;
　　　　　　　　　　　bottom: 1px solid green;
 　　　　　　 }
　　　　}

　　3.偽類嵌套；

　　.box:before {
  　　　　　　　　content: "虛擬元素嵌套";
　　}
 
　　.box{
  　　　　&:before {
  　　　　  　　content:"虛擬元素嵌套";
  　　　　}
　　}

　　4.跳出嵌套；@at-root

　　跳出嵌套
　　body{
   　　　　@at-root .container{
       　　 　　width: 20px;
   　　　　 }
　　}

混合宏：

　在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏，那麼在實際調用中，其匹配了一個關鍵詞“@include”來調用聲明好的混合宏

@mixin border-rad($rad1...){-webkit-border-radius:$rad1;-moz-border-radius:$rad1;-o-border-radius:$rad1;-ms-border-radius:$rad1;border-radius:$rad1;}.box4{@include border-rad(36px 30px 10px red,2px 5px 6px red);}

 繼承：在 Sass 中也具有繼承一說，繼承類中的樣式代碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。

.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;} .btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;} .btn-second {  background-color: orange;  color: #fff;  @extend .btn;} 效果：.btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}

預留位置：Sass 中的預留位置 %placeholder 功能是一個很強大，很實用的一個功能。他可以取代以前 CSS 中的基類造成的代碼冗餘的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。

%mt5 {  margin-top: 5px;}%pt5{  padding-top: 5px;} .btn {  @extend %mt5;  @extend %pt5;} .block {  @extend %mt5;   span {    @extend %pt5;  }} 效果：.btn, .block {  margin-top: 5px;} .btn, .block span {  padding-top: 5px;} 

插值：

$properties: (margin, padding);@mixin set-value($side, $value) {    @each $prop in $properties {        #{$prop}-#{$side}: $value;    }}.login-box {    @include set-value(top, 14px);} //它可以讓變數和屬性工作的很完美，上面的代碼編譯成 CSS： .login-box {    margin-top: 14px;    padding-top: 14px;}


@mixin asd($wid,$hei,$classname,$bg,$name){
    #{$name}:$wid;
    height:$hei;
    .#{$classname}{
        #{$bg}:red;
    }

}

運算：

.box {  width: 20px + 30px;} 效果：.box {  width: 50px;}

.box {  width: 20px - 30px;} 效果：.box {  width: -10px;}

.box {  width: 20px * 30px;} 效果：.box {  width: 600px;}

注意運算子之間要用空格隔開；

函數：

　　顏色函數：

body{    color: rgb(255,0,200);} body{    $color: rgb(255,0,200);    color: $color;    background-color: rgba($color,0.5);}p{        color: darken($color, 2);        background-color: lighten($color,0.5);    }

 str-length(),str-index();

　　z-index:str-length("aaaaa");得到的結果是，Z-index：5；

　　z-index：str-index("abcdfedd",c);得到的結果是，Z-index：3；

自訂函數：

　　@function double($width){

　　　　@retrun $width * 2;

}

控制命令：

//@if@mixin blockOrHidden($boolean:true) {  @if $boolean {      @debug "$boolean is #{$boolean}";      display: block;    }  @else {      @debug "$boolean is #{$boolean}";      display: none;    }} .block {  @include blockOrHidden;} .hidden{  @include blockOrHidden(false);} 編譯出來的CSS: .block {  display: block;} .hidden {  display: none;} @debug報錯時調試//@for@for $i from <start> through <end>@for $i from <start> to <end>$i 表示變數start 表示起始值end 表示結束值 關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。 @for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}編譯出來的 CSS: .item-1 {  width: 2em;} .item-2 {  width: 4em;} .item-3 {  width: 6em;}//@while$types: 4;$type-width: 20px; @while $types > 0 {    .while-#{$types} {        width: $type-width + $types;    }    $types: $types - 1;} 編譯出來的 CSS .while-4 {  width: 24px;} .while-3 {  width: 23px;} .while-2 {  width: 22px;} .while-1 {  width: 21px;}//@each$k: 1;@each $c in blue, yellow, gray{  .div#{$k}{     color: $c;  }  $k: $k + 1;} @each $key,$value in (a: blue, b: yellow, c: gray){  .class#{$key}{     color: $value;  }}

 

sass基礎用法