sass基礎語法

語法學習鏈接：sass語法 http://www.w3cplus.com/sassguide/syntax.html

文件後綴：.sass/.scss。

文件導入：sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合並進來只生成一個CSS文件。但是如果你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。

所有的sass導入文件都可以忽略後綴名.scss。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。

@import 'base';

註釋：同js。

變量：必須是$開頭，後面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值後面加上!default則表示默認值。

變量分類：普通變量、默認變量、特殊變量。

普通變量：以$開頭跟着變量名：變量值。

默認變量：與普通變量的區別在於在變量值後面加了！default。

特殊變量：當變量值爲‘字符串’的時候，也充當屬性名屬性值，例：

$borderDirection: border-top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
.#{$borderDirection}{
  #{$borderDirection}: 1px solid #ccc;
}
body{
  font: #{$baseFontSize}/#{$baseLineHeight};
}

多值變量：分爲list類型和map類型，簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。

list類型：list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關於list數據操作還有很多其他函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等。

sass

$linkColor: #08c #333 !default;
a{
  color:nth($linkColor,1);
  &:hover{
    color: nth($linkColor,2);
  }
}

css

a {
  color: #08c; }
  a:hover {
    color: #333; }

map數據：map數據以key和value成對出現，其中value又可以是list。格式爲：

$map:
(key1: value1, key2: value2, key3: value3);

。可通過map-get($map,$key)取值。關於map數據還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

sass

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

css

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.2em; }

@each 類似jq中的each遍歷函數，提出屬性值，後面的in類似。

補充：

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

上面的示例創建了一個名爲 $styling 的 map ，這個Map中對應的鍵值是用來定義不同的CSS屬性。

Sass中的Map有很多不同的函數功能，可以使用它們可以操作Map或提取值。比如這裏使用的 map-get 函數，它接受兩個參數，第一個是Map的名稱 $styling ，第二個是你想需要取的值的 key 值。

嵌套：sass的嵌套包括兩種，一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。

選擇器嵌套

所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。

在選擇器嵌套中，可以使用&表示父元素選擇器

sass

#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color: #333;
  li{
    float: lfet;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;
    &:hover{
      color: #ddd;
    }
  }
}

css

#top_nav {
  line-height: 40px;
  text-transform: capitalize;
  background-color: #333; }
  #top_nav li {
    float: lfet; }
  #top_nav a {
    display: block;
    padding: 0 10px;
    color: #fff; }
    #top_nav a:hover {
      color: #ddd; }

屬性嵌套

所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

sass

.fakeshadow{
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

css

.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

@at-root

sass3.3.0中新增的功能，用來跳出選擇器嵌套的。默認所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

普通跳出嵌套

沒跳出

sass

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

css

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

單個選擇器跳出

sass

.parent-2{
  color: #f00;
  @at-root .child {
    width: 100px;
  }
}

css

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

多個選擇器跳出

sass

.paren-3 {
  background: #f00;
  .child-1{
    width: 100px;
    @at-root {
      .child1 {
        width: 300px;
        height: 200px;
      }
      .child2 {
        width: 300px;
        height: 100px;
      }
    }
  }
}

css

.paren-3 {
  background: #f00; }
  .paren-3 .child-1 {
    width: 100px; }
    .child1 {
      width: 300px;
      height: 200px; }

    .child2 {
      width: 300px;
      height: 100px; }

@at-root (without: ...)和@at-root (with: ...)

默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因爲@support目前還無法廣泛使用，所以在此不表）。我們默認的@at-root其實就是@at-root (without:rule)。

跳出父級

sass

@media print {
  .parent1{
    color: #f00;
    @at-root .child1 {
      width: 200px;
    }
  }
}

css

@media print {
  .parent1 {
    color: #f00; }
    .child1 {
      width: 200px; } }

跳出media嵌套，父級有效

sass

@media print {
  .parent2{
    color: #f00;
    @at-root (without: media) {
      .child2 {
        width: 200px;
      }
    }
  }
}

css

@media print {
  .parent2 {
    color: #f00; } }
  .parent2 .child2 {
    width: 200px; }

完全跳出

將上述代碼中@at-root(without: media)改爲@at-root(without: all)就可以完全跳出。

可以將@at-root看成一個內置對象，without: media可看成觸發的某些方法。

@at-root與&配合使用

sass

.child {
  @at-root .parent & {
    color: #f00;
  }
}

css

.parent .child {
  color: #f00; }

應用於@keyframe，製作動畫時代碼不至於太過凌亂。

sass

.demo {
  animation: motion 3s infinite;
  @at-root {
    @keyframes motion {
      0%{
        width: 100px;
      }
      100%{
        width: 200px;
      }
    }
  }
}

css

.demo {
  animation: motion 3s infinite; }
@keyframes motion {
  0% {
    width: 100px; }
  100% {
    width: 200px; } }

混合（mixin）

sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置默認值。聲明的@mixin通過@include來調用。

無參數@mixin

sass

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

css

.demo {
  margin-left: auto;
  margin-right: auto; }

有參數@mixin。類似函數一樣@mixin相當於聲明，@include相當於調用，傳參相當於將參數屬性值修改。

sass

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

css

.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80); }

多個參數

sass

@mixin horizontal-line($border: 1px solid #ccc, $padding: 10px){
  border-bottom: $border;
  padding-top: $padding;
  padding-bottom: $padding;
}
.imgtext-h li{
  @include horizontal-line(1px solid #ccc,20px);
  ul li div{
    .child{
      @include horizontal-line;
    }
  }
}

css

.imgtext-h li {
  border-bottom: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 20px; }
  .imgtext-h li ul li div .child {
    border-bottom: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px; }

多組參數，

box-shadow($shadow...)

參數中三個點必須要有而且必須剛好是三個點。

sass

@mixin box-shadow($shadow...){
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  -webkit-box-show: $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))
}

css

.box {
  border: 1px solid #ccc;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-show: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3); }

@content

@content在sass3.2.0中引入，可以用來解決css3的@media等帶來的問題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開始。暫時無法完全轉譯成css？。

sass

@mixin max-screen($res){
  @meida only screen and ( max-width: $res){
    @content;
  }
}
@include max-screen(480px){
  body { color: red; }
}

css

@meida only screen and ( max-width: $res) {
  body {
    color: red; } }

繼承

sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟需要繼承的選擇器。

sass

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

css

h1, .speak {
  border: 4px solid #ff9aa9; }

.speak {
  border-width: 2px; }

佔位選擇器`% 不能用？？？、`

從sass 3.2.0以後就可以定義佔位選擇器%。這種選擇器的優勢在於：如果不調用則不會有任何多餘的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然後實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。佔位選擇器以%標識定義，通過@extend調用。

函數

sass定義了很多函數可供使用，當然你也可以自己定義函數，以@fuction開始。

實際項目中我們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深爲最，其調用方法爲lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

sass

$baseFontSize: 10px !default;
$gray: #ccc !default;
@function pxToRem($px) {
  @return $px / $baseFontSize * 2rem;
}
body {
  font-size: $baseFontSize;
  color: lighten($gray, 10%);
}
.test {
  font-size: pxToRem(16px);
  color: darken($gray, 10%);
}

css

body {
  font-size: 10px;
  color: #e6e6e6; }

.test {
  font-size: 3.2rem;
  color: #b3b3b3; }

運算

sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變量等)進行加減乘除四則運算。請注意運算符前後請留一個空格，不然會出錯。

sass

$baseFontSize: 14px !default;
$baseLineHeight: 2 !default;
$baseGap: $baseFontSize * $baseLineHeight;
$halfBaseGap: $baseGap / 2 !default;
body{
  font-size:$halfBaseGap;
}

css

body {
  font-size: 14px; }

條件判斷及循環

@if判斷

@if可一個條件單獨使用，也可以和@else結合多條件使用

sass

$lte7: true;
$type: ocean;
.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;
  }
}

css

.ib {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

p {
  color: blue; }

三目判斷

語法爲：

if($condition,
$if_true, $if_false)

。三個參數分別表示：條件，條件爲真的值，條件爲假的值。

sass

$lte7: false;
$type: ocean;
$px: if($lte7, 10px, 20px);
p {
  height: $px;
}

css

p {
  height: 20px; }

for循環

for循環有兩種形式，分別爲：

@for
$var from <start> through <end>

和

@for
$var from <start> to <end>

。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

sass

@for $i from 1 through 3 {
  .item-#{$i} {width: 2em * $i;}
}

css

.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }

@each循環

語法爲：

@each
$var in <list or map>

。其中$var表示變量，而list和map表示list類型數據和map類型數據。sass 3.3.0新加入了多字段循環和map數據循環。

單個字段list數據循環

sass

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url("/images/#{$animal}.png");
  }
}

css

.puma-icon {
  background-image: url("/images/puma.png"); }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png"); }

.egret-icon {
  background-image: url("/images/egret.png"); }

.salamander-icon {
  background-image: url("/images/salamander.png"); }

多個字段list數據循環

@each $animal, $color, $cursor in $animal-data {

@each 後面的變量與$animal-data數據結構內變量數量等同。在不等同的情況下，結果類似js函數傳參，不等的情況下一致。

sass

$animal-data: (puma, black, default), (sea,bule,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;
  }
}

css

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; }

.sea-icon {
  background-image: url("/images/sea.png");
  border: 2px solid bule;
  cursor: pointer; }

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

多個字段map數據循環

sass

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

css

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.2em; }

完。

選擇器嵌套

屬性嵌套

@content

佔位選擇器`% 不能用？？？、`

@if判斷

三目判斷

for循環

@each循環

雜談--理念

JavaScript作用域--總結

《高效PDCA工作術》讀書筆記1

《高效PDCA工作術》讀書筆記4

three.js學習筆記之三大核心

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

sass基礎語法

選擇器嵌套

屬性嵌套

@content

佔位選擇器% 不能用？？？、

@if判斷

三目判斷

for循環

@each循環

佔位選擇器`% 不能用？？？、`