-
sass -v查看版本 gem update sass 更新查看全部
-
在 Windows 平臺(tái)下安裝 Ruby 需要先有 Ruby 安裝包，大家可以到 Ruby 的官網(wǎng)（http://rubyinstaller.org/downloads 在安裝過程中，個(gè)人建議將其安裝在 C 盤下，在安裝過程中選擇第二個(gè)選項(xiàng)（不選中，就會(huì)出現(xiàn)編譯時(shí)找不到Ruby環(huán)境的情況）Add Ruby executables to ypur PATH 淘寶 RubyGems 鏡像安裝 Sass 第一步：移動(dòng)默認(rèn)的源 gem sources --remove https://rubygems.org/ 第二步：指定淘寶的源 gem sources -a https://ruby.taobao.org/ 第三步：查看指定的源是不是淘寶源 gem sources -l 返回結(jié)果如下： *** CURRENT SOURCES *** https://ruby.taobao.org 請(qǐng)確保只有 ruby.taobao.org。如果無誤之后，執(zhí)行下面的命令： gem install sass查看全部
-
Sass 和 SCSS 其實(shí)是同一種東西，我們平時(shí)都稱之為 Sass，兩者之間不同之處有以下兩點(diǎn)： 文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名 語(yǔ)法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似。查看全部
-
在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個(gè)默認(rèn)值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 這種帶值得參數(shù)比較更好。可以直接調(diào)用：.btn { @include border-radius; } 如果需要?jiǎng)e的值的時(shí)候，也可以直接覆蓋： .btn { @include border-radius(8px); }查看全部
-
$list: twitter,facebook,github,weibo; @for $i from 1 through length($list){ .icon-#{nth($list,$i)}{ background-postion: 0 -20px * $i; } }查看全部
-
注釋對(duì)于一名程序員來說，是極其重要，良好的注釋能幫助自己或者別人閱讀源碼。在 Sass 中注釋有兩種方式，我暫且將其命名為： 1、類似 CSS 的注釋方式，使用 ”/* ”開頭，結(jié)屬使用 ”*/ ” 2、類似 JavaScript 的注釋方式，使用“//” 第一種方式會(huì)在編譯后的css文件中顯示出來。查看全部
-
插值#{} 使用 CSS 預(yù)處理器語(yǔ)言的一個(gè)主要原因是想使用 Sass 獲得一個(gè)更好的結(jié)構(gòu)體系。比如說你想寫更干凈的、高效的和面向?qū)ο蟮?CSS。Sass 中的插值(Interpolation)就是重要的一部分。查看全部
-
混合宏 VS 繼承 VS 占位符 初學(xué)者都常常糾結(jié)于這個(gè)問題“什么時(shí)候用混合宏，什么時(shí)候用繼承，什么時(shí)候使用占位符？”其實(shí)他們各有各的優(yōu)點(diǎn)與缺點(diǎn)，先來看看他們使用效果： a) Sass 中的混合宏使用 舉例代碼見右側(cè) 2-24 行 編譯出來的 CSS 見右側(cè)結(jié)果窗口。 總結(jié)：編譯出來的 CSS 清晰告訴了大家，他不會(huì)自動(dòng)合并相同的樣式代碼，如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼，造成代碼的冗余，這也是 CSSer 無法忍受的一件事情。不過他并不是一無事處，他可以傳參數(shù)。 個(gè)人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。 b) Sass 中繼承 同樣的，將上面代碼中的混合宏，使用類名來表示，然后通過繼承來調(diào)用： 代碼見右側(cè) 26-48 行 總結(jié)：使用繼承后，編譯出來的 CSS 會(huì)將使用繼承的代碼塊合并到一起，通過組合選擇器的方式向大家展現(xiàn)，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對(duì)于混合宏來說要干凈的多，也是 CSSer 期望看到。但是他不能傳變量參數(shù)。 個(gè)人建議：如果你的代碼塊不需要專任何變量參數(shù)，而且有一個(gè)基類已在文件中存在，那么建議使用 Sass 的繼承。 c) 占位符 最后來看占位符，將上面代碼中的基類 .mt 換成 Sass 的占位符格式： 代碼見右側(cè) 50-72 行 總結(jié)：編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會(huì)在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區(qū)別的，“占位符是獨(dú)立定義，不調(diào)用的時(shí)候是不會(huì)在 CSS 中產(chǎn)生任何代碼；繼承是首先有一個(gè)基類存在，不管調(diào)用與不調(diào)用，基類的樣式都將會(huì)出現(xiàn)在編譯出來的 CSS 代碼中?！?查看全部
-
Sass 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼。 通過 @extend 調(diào)用的占位符，編譯出來的代碼會(huì)將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。查看全部
-
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。 實(shí)現(xiàn)代碼的重用。查看全部
-
Sass 在調(diào)用相同的混合宏時(shí)，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。查看全部
-
混合宏的參數(shù)--傳多個(gè)參數(shù) Sass 混合宏除了能傳一個(gè)參數(shù)之外，還可以傳多個(gè)參數(shù)，如： @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } 在混合宏“center”就傳了多個(gè)參數(shù)。在實(shí)際調(diào)用和其調(diào)用其他混合宏是一樣的： .box-center { @include center(500px,300px); } 有一個(gè)特別的參數(shù)“…”。當(dāng)混合宏傳的參數(shù)過多之時(shí)，可以使用參數(shù)來替代，如： @mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } } 在實(shí)際調(diào)用中： .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); } 編譯出來的CSS: .box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }查看全部
-
混合宏的參數(shù)--傳一個(gè)帶值的參數(shù) 在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個(gè)默認(rèn)值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”傳了一個(gè)參數(shù)“$radius”，而且給這個(gè)參數(shù)賦予了一個(gè)默認(rèn)值“3px”。 在調(diào)用類似這樣的混合宏時(shí)，會(huì)多有一個(gè)機(jī)會(huì)，假設(shè)你的頁(yè)面中的圓角很多地方都是“3px”的圓角，那么這個(gè)時(shí)候只需要調(diào)用默認(rèn)的混合宏“border-radius”: .btn { @include border-radius; } 但有的時(shí)候，頁(yè)面中有些元素的圓角值不一樣，那么可以隨機(jī)給混合宏傳值查看全部
-
混合宏的參數(shù)--傳一個(gè)不帶值的參數(shù) Sass 的混合宏有一個(gè)強(qiáng)大的功能，可以傳參，那么在 Sass 中傳參主要有以下幾種情形： A) 傳一個(gè)不帶值的參數(shù) 在混合宏中，可以傳一個(gè)不帶任何值的參數(shù)，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定義了一個(gè)不帶任何值的參數(shù)“$radius”。 在調(diào)用的時(shí)候可以給這個(gè)混合宏傳一個(gè)參數(shù)值： .box { @include border-radius(3px); } 這里表示給混合宏傳遞了一個(gè)“border-radius”的值為“3px”。查看全部
-
在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個(gè)混合宏，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個(gè)圓角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一個(gè)按鈕中要調(diào)用定義好的混合宏“border-radius”，可以這樣使用： button { @include border-radius; }查看全部
舉報(bào)
0/150
提交
取消