-
在 Sass 中，使用“@mixin”來聲明一個混合宏。 @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復用的樣式代碼。 復雜的混合宏： 上面是一個簡單的定義混合宏的方法，當然， Sass 中的混合宏還提供更為復雜的，你可以在大括號里面寫上帶有邏輯關系，幫助更好的做你想做的事情,如： @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } } 這個 box-shadow 的混合宏，帶有多個參數(shù)，這個時候可以使用“ … ”來替代。簡單的解釋一下，當 $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時，表示有多個陰影值，反之調(diào)用默認的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”。查看全部
-
偽類嵌套和屬性嵌套非常類似，只不過他需要借助`&`符號一起配合使用。我們就拿經(jīng)典的“clearfix”為例吧： .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 編譯出來的 CSS： clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }查看全部
-
Sass 中還提供屬性嵌套，CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。 .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我們可以這樣寫： .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
選擇器嵌套為樣式表的作者提供了一個通過局部選擇器相互嵌套實現(xiàn)全局選擇的方法，Sass 的嵌套分為三種： 選擇器嵌套 屬性嵌套 偽類嵌套查看全部
-
全局變量就是定義在元素外面的變量 當在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個已經(jīng)存在于全局范圍內(nèi)的變量時，局部變量就成為了全局變量的影子?；旧?，局部變量只會在局部范圍內(nèi)覆蓋全局變量。 我的建議，創(chuàng)建變量只適用于感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標準時方可創(chuàng)建新變量： 該值至少重復出現(xiàn)了兩次； 該值至少可能會被更新一次； 該值所有的表現(xiàn)都與變量有關（非巧合）。 基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。查看全部
-
Sass 調(diào)試一直以來都是一件頭痛的事情，使用 Sass 的同學都希望能在瀏覽器中直接調(diào)試 Sass 文件，能找到對應的行數(shù)。值得慶幸的是，現(xiàn)在實現(xiàn)并不是一件難事，只要你的瀏覽器支持“sourcemap”功能即可。早一點的版本，需要在編譯的時候添加“--sourcemap” 參數(shù)： sass --watch --scss --sourcemap style.scss:style.css 在 Sass3.3 版本之上（我測試使用的版本是 3.4.7），不需要添加這個參數(shù)也可以： sass --watch style.scss:style.css查看全部
-
壓縮輸出方式 compressed 在編譯的時候帶上參數(shù)“ --style compressed”: sass --watch test.scss:test.css --style compressed查看全部
-
緊湊輸出方式 compact 在編譯的時候帶上參數(shù)“ --style compact”: sass --watch test.scss:test.css --style compact查看全部
-
在編譯的時候帶上參數(shù)“ --style expanded”: 展開輸出方式 expanded sass --watch test.scss:test.css --style expanded 這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行查看全部
-
嵌套輸出方式 nested 在編譯的時候帶上參數(shù)“ --style nested”: sass --watch test.scss:test.css --style nested查看全部
-
最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創(chuàng)建 Sass 文件時，就需要將文件編碼設置為“utf-8”。 另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至于人為失誤造成的編譯失敗，在編譯過程中都會有具體的說明，大家可以根據(jù)編譯器提供的錯誤信息進行對應的修改。查看全部
-
GUI 界面工具編譯 Koala (http://koala-app.com/) Compass.app（http://compass.kkbox.com/） Scout（http://mhs.github.io/scout-app/） CodeKit（https://incident57.com/codekit/index.html） Prepros（https://prepros.io/） 相比之下，我比較推薦使用以下兩個： Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)查看全部
-
編譯 Sass 時，開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監(jiān)測到代碼的變化，并且給你直接編譯出來： sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css查看全部
-
Sass 的編譯。因為 Sass 開發(fā)之后，要讓 Web 頁面能調(diào)用 Sass 寫好的東西，就得有這么一個過程，這個過程就稱之為 Sass 編譯過程。Sass 的編譯有多種方法： 命令編譯 GUI工具編譯 自動化編譯查看全部
-
首先保證已經(jīng)安裝ruby: http://rubyinstaller.org/downloads 淘寶鏡像： https://ruby.taobao.org/ 1. 如果提示網(wǎng)絡原因無法安裝sass，需要切換鏡像： 查看當前鏡像： gem resources -l gem resources --remove https://rubygems.org/ gem resources -a https://ruby.taobao.org/ 確保只有這一個鏡像：gem resources -l 安裝： gem install sass 安裝完成后，查看版本： sass -v 更新sass: gem update sass 卸載sass： gem uninstall sass查看全部
舉報
0/150
提交
取消