sass1:
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了。
轉載自：
Ruby's Louvre；
轉載于:https://www.cnblogs.com/beyrl-blog/p/6064048.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： rm 时argument list to
- 下一篇： ETL AUTOMATION介绍