sass學習筆記1

less在處理CSS動畫時，很是噁心，決定轉向sass了。sass誕生得比less早，只是由於它是ruby寫的，所以受衆面夠少。但咱們不須要本身下編譯器或使用命令行，咱們能夠koala這神器

首先幾個注意點，sass能夠用sass後綴名，也能夠用scss後綴名。前者比較噁心，像python同樣沒有花括號，也不讓寫分號，散架子同樣。所以推薦用scss，這個也是目前我遇到的大部分人的選擇。

關於中文編譯出錯的問題，須要指定字符集。

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$fontSize: 12px;
body{
    font-size:$fontSize;
}
/* 測試註釋 */
　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

註釋的問題，sass有兩種註釋方式，一種是標準的css註釋方式/* */，另外一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

導入的問題，它仍是用@import關鍵字，但作了一些處理，若是後綴名是css，那麼它不會對此導入文件進行編譯，若是是sass,scss或沒有寫，那麼就會編譯。

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

好了，咱們正式開始學習它的語法。sass既然是一門正統的編程語言，就有對應的變量，數據結構，函數等東西。

sass使用PHP風格的$開頭的變量命名風格，使用ruby風格#{ }佔位符

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$borderDirection:       top !default; 
$fontSize:              12px !default;
$baseLineHeight:        1.5 !default;

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$fontSize}/#{$baseLineHeight};
}
$base: ".module";
#{$base} {
    &#{$base}-something {
        background: red;
    }
}

//-------------------------------
.border-top {
  border-top: 1px solid #ccc; }

body {
  font: 12px/1.5; }

.module.module-something {
  background: red; }

變量與佔位符，可讓咱們構建複雜可重用的屬性值。

默認值，寫法有點相似!important，但優先級最低。

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//-------------------------------
body{
    line-height:2;
}

編譯後的line-height爲2，而不是咱們默認的1.5。默認變量的價值在進行組件化開發的時候會很是有用。

數據結構方面，它擁有相似數組的list類型，相似對象的map類型

sass的數組，是經過空格來劃分元素，若是是二維組數，則須要用到小括號與逗號。

//一維數組
$array: 5px 10px 20px 30px;

//二維數組
$array2: 5px 10px, 20px 30px;
$array3: (5px 10px) (20px 30px);

sass的數組有一個特色，沒有用[]包起來，也不能用[]來取其中的某一個元素，要用須要用到nth內置方法，而且nth與CSS3的nth-child同樣，是從1開始。

$linkColor: #08c #333 #ccc;
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

相關操做數組的方法

建立一個空數組
$list:();


join($list1, $list2, $separator:auto)
//合併兩個數組
join(10px 20px, 30px 40px) => 10px 20px 30px 40px
join((blue, red), (#abc, #def)) => blue, red, #abc, #def
join(10px, 20px) => 10px 20px
join(10px, 20px, comma) => 10px, 20px
join((blue, red), (#abc, #def), space) => blue red #abc #def


index($list, $value)
//取得目標在數組的位置，以1開始
index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

length($list)
//取得數組的長度
length(10px) => 1
length(10px 20px 30px) => 3
length((width: 10px, height: 20px)) => 2

list_separator($list)
//取得數組的分隔符
list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

nth($list, $n)
//取得數組在某一位置上的元素
nth(10px 20px 30px, 1) => 10px
nth((Helvetica, Arial, sans-serif), 3) => sans-serif
nth((width: 10px, length: 20px), 2) => length, 20px


zip(*$lists)
//將多個$list組合在一塊兒成爲一個多維列表。若是列表源長度並非全部都相同，結果列表長度將以最短的一個爲準

append($list, $val, $separator:auto)

append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green

sass的對象與JS的對象很類似，惟一不一樣的是，它是用小括號括起來，由於花括號用做各類嵌套邊界。同時，爲了操做sass對象，它提供了比JS豐富多的函數，它們基本是以map-開頭（所有小寫而且用「-」連起來是純正的ruby風格）。

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

下面是方法演示

map-get 
//取得對象的某一屬性的值  
map-get(("foo": 1, "bar": 2), "foo") => 1
map-get(("foo": 1, "bar": 2), "bar") => 2
map-get(("foo": 1, "bar": 2), "baz") => null


map-remove($map, $key)
//刪掉某一鍵值對
map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
map-remove(("foo": 1, "bar": 2), "baz") => ("foo": 1, "bar": 2)


map-keys($map)
//取得它的全部屬性名，以數組形式返回
map-keys(("foo": 1, "bar": 2)) => "foo", "bar"


map-values($map)
//取得它的全部屬性值，以數組形式返回
map-values(("foo": 1, "bar": 2)) => 1, 2
map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1


map-has-key($map, $key)
//斷定它是否擁有某一個屬性
map-has-key(("foo": 1, "bar": 2), "foo") => true
map-has-key(("foo": 1, "bar": 2), "baz") => false

map-merge($map1, $map2) 
//合併兩個對象
map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
map-merge(("foo": 1, "bar": 2), ("bar": 3)) => ("foo": 1, "bar": 3)

流程控制: @if，@else, @for，@each和@while

@if很是簡單，咱們直接看例子

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        display: block;
    } @else {
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}
//------------------------------
.some-selector {
  display: block; }

說到這個，sass有一個if內置方法，用於模擬三目運算符。

  @if $width != auto {
    $width: if(unitless($width), $width + px, $width);
  }

@for有兩種形式， @for xxx form yyy through zzz或@for xxx form yyy to zzz，須要用戶指定開始值與結束值，它們都應該是數字。

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$name: for !default;
//至關於JS的 for(var $i = 1; $i <= 4; $i++){}
@for $i from 1 through 4 {
    .#{$name}-#{$i}{
        width: 60px + $i;
    }
}

//------------------------------
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$name: for !default;
//至關於JS的 for(var $i = 1; $i < 4; $i++){}
@for $i from 1 to 4 {
    .#{$name}-#{$i}{
        width: 60px + $i;
    }
}

//------------------------------
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

@for循環指令除了能夠從小數值到大數值循環以外，還能夠從大數值循環到小數值。並且兩種形式都支持。

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$name: for !default;
//因爲開始值大於結束值,所以是遞減,至關於for(var $e = 5; $e >= 1; $e--){}
@for $e from 5 through 1 {
    .#{$name}-#{$e}{
        width: 60px + $e;
    }
}
//------------------------------
.for-5 {
  width: 65px; }

.for-4 {
  width: 64px; }

.for-3 {
  width: 63px; }

.for-2 {
  width: 62px; }

.for-1 {
  width: 61px; }

@each 是用於遍歷數組與對象的。

若是是遍歷數組， @each跟着的是元素的變量名，隨便起，接着是in，最後是數組名。

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}
//------------------------------
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
//================================

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
//循環二維數組
$animal-data: (puma, black, default),(sea-slug, blue, 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;
  }
}

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

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

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

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$icon-glass: "\f000";//批量生成ICON字體
$icon-music: "\f001";
$icon-search: "\f002";
$icon-envelope-o: "\f003";
$icon-heart: "\f004";
$icon-star: "\f005";
$icon_names: icon-glass icon-music icon-search icon-envelope-o icon-heart icon-star;
$icon_vars: $icon-glass $icon-music $icon-search $icon-envelope-o $icon-heart $icon-star;

@each $name in $icon_names {
    $i: index($icon_names, $name);
    .#{$name} {
        content: nth($icon_vars, $i);
    }
}
//------------------------------
.icon-glass {
  content: "\f000"; }

.icon-music {
  content: "\f001"; }

.icon-search {
  content: "\f002"; }

.icon-envelope-o {
  content: "\f003"; }

.icon-heart {
  content: "\f004"; }

.icon-star {
  content: "\f005"; }

上面的優化版

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$icons:
    glass "\f000",
    music "\f001",
    search "\f002",
    envelope-o "\f003",
    heart "\f004",
    star "\f005"
    ;//定義一個2維數組

@function get-icon($icon-name){//要什麼生產什麼,不須要一會兒所有生成出來
    @each $icon in $icons {
        @if nth($icon, 1) == $icon-name {
            @return nth($icon,2);
        }
    }
}

.icon-glass {
    content: get-icon(glass);
}
//------------------------------
.icon-glass {
  content: "\f000"; }

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$icons: (
    glass :"\f000",
    music: "\f001",
    search: "\f002",
    envelope-o: "\f003",
    heart: "\f004",
    star: "\f005"
);
@function get-icon($icon-name){//要什麼生產什麼,不須要一會兒所有生成出來
   @return map-get($icons, $icon-name);
}

.icon-glass {
    content: get-icon(glass);
}
//------------------------------
.icon-glass {
  content: "\f000"; }

若是是遍歷對象，後面跟着兩個變量，分別是鍵名與鍵值，逗號隔開，接着是in，最後是對象名。

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
@each $key, $val in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$key} {
    font-size: $val;
  }
}
//------------------------------
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.2em; }

@while與JS的while很是類似

@charset "utf-8";//必須設置了這個才能編譯有中文的註釋
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
//------------------------------
.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

今天就到這裏吧，你們看了，不要期望能夠用它來寫CSS，由於還有一些重要的概念沒介紹。但光憑咱們如今瞭解的東西，對於那些學過less的人來講，真是打擊極大。顯然，從易用性，功能等方面，已遠勝less了。

to be continue...