-
檢測(cè)Sass是否安裝成功，輸入命令【sass -v】 更新Sass為最新版本，輸入命令【gem update sass】查看全部
-
Sass安裝（windows版） 下載Ruby，網(wǎng)站地址【http://rubyinstaller.org/downloads】 安裝過程，建議選擇【Add Ruby executables to your PATH】 安裝完成，電腦開始，運(yùn)行【Start Command Prompt with Ruby】 通過命令進(jìn)行安裝，輸入【gem install sass】查看全部
-
& 表示選擇器本身查看全部
-
怎么聲音和bootstrp的時(shí)候不一樣查看全部
-
命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡(jiǎn)單的一種方式。因?yàn)橹恍枰谀愕拿罱K端輸入： 單文件編譯： sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css 這是對(duì)一個(gè)單文件進(jìn)行編譯，如果想對(duì)整個(gè)項(xiàng)目所有 Sass 文件編譯成 CSS 文件，可以這樣操作： 多文件編譯： sass sass/:css/ 上面的命令表示將項(xiàng)目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些 CSS 文件都放在項(xiàng)目中“css”文件夾中。 缺點(diǎn)及解決方法： 在實(shí)際編譯過程中，你會(huì)發(fā)現(xiàn)上面的命令，只能一次性編譯。每次個(gè)性保存“.scss”文件之后，都得重新執(zhí)行一次這樣的命令。如此操作太麻煩，其實(shí)還有一種方法，就是在編譯 Sass 時(shí)，開啟“watch”功能，這樣只要你的代碼進(jìn)行任保修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化，并且給你直接編譯出來： sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css查看全部
-
Sass 和 SCSS 有什么區(qū)別？ 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ǔ)法書寫方式非常類似。查看全部
-
什么是 CSS 預(yù)處理器？ 定義： CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專門的編程語(yǔ)言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。 通俗的說，“CSS 預(yù)處理器用一種專門的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語(yǔ)言中的一些基本特性，可以讓你的 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。 其它 CSS 預(yù)處理器語(yǔ)言： CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的 CSS 預(yù)處理器語(yǔ)言，比如說： Sass（SCSS） LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS 如此之多的 CSS 預(yù)處理器，那么“我應(yīng)該選擇哪種 CSS 預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題，在 Linkedin、Twitter、CSS-Trick、知乎以及各大技術(shù)論壇上，很多人為此爭(zhēng)論不休。相比過去我們對(duì)是否應(yīng)該使用 CSS 預(yù)處理器的話題而言，這已經(jīng)是很大的進(jìn)步了。 到目前為止，在眾多優(yōu)秀的 CSS 預(yù)處理器語(yǔ)言中就屬 Sass、LESS 和 Stylus 最優(yōu)秀，討論的也多，對(duì)比的也多。本教程將著重向大家介紹 CSS 預(yù)處理器中的 Sass。相信前端開發(fā)工程師會(huì)喜歡的。查看全部
-
所謂值列表 (lists) 是指 Sass 如何處理 CSS 中： margin: 10px 15px 0 0 或者： font-face: Helvetica, Arial, sans-serif 像上面這樣通過空格或者逗號(hào)分隔的一系列的值。 事實(shí)上，獨(dú)立的值也被視為值列表——只包含一個(gè)值的值列表。 Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能（Sass進(jìn)級(jí)會(huì)有講解）： nth函數(shù)（nth function） 可以直接訪問值列表中的某一項(xiàng)； join函數(shù)（join function） 可以將多個(gè)值列表連結(jié)在一起； append函數(shù)（append function） 可以在值列表中添加值； @each規(guī)則（@each rule） 則能夠給值列表中的每個(gè)項(xiàng)目添加樣式。 值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個(gè)值列表的值列表。如果內(nèi)外兩層值列表使用相同的分隔方式，要用圓括號(hào)包裹內(nèi)層，所以也可以寫成 (1px 2px) (5px 6px)。當(dāng)值列表被編譯為 CSS 時(shí)，Sass 不會(huì)添加任何圓括號(hào)，因?yàn)?CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯后的 CSS 文件中是一樣的，但是它們?cè)?Sass 文件中卻有不同的意義，前者是包含兩個(gè)值列表的值列表，而后者是包含四個(gè)值的值列表。 可以用 () 表示空的列表，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時(shí)，Sass 將會(huì)報(bào)錯(cuò)。如果值列表中包含空的值列表或空值，編譯時(shí)將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。查看全部
-
SassScript 支持 CSS 的兩種字符串類型： 有引號(hào)字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'； 無引號(hào)字符串 (unquoted strings)，如 sans-serifbold。 在編譯 CSS 文件時(shí)不會(huì)改變其類型。只有一種情況例外，使用 #{ }插值語(yǔ)句 (interpolation) 時(shí)，有引號(hào)字符串將被編譯為無引號(hào)字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。 @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); 編譯為： body.firefox .header:before { content: "Hi, Firefox users!"; } 需要注意的是：當(dāng) deprecated = property syntax 時(shí) （暫時(shí)不理解是怎樣的情況），所有的字符串都將被編譯為無引號(hào)字符串，不論是否使用了引號(hào)。查看全部
-
Sass 和 JavaScript 語(yǔ)言類似，也具有自己的數(shù)據(jù)類型，在 Sass 中包含以下幾種數(shù)據(jù)類型： 數(shù)字: 如，1、 2、 13、 10px； 字符串：有引號(hào)字符串或無引號(hào)字符串，如，"foo"、 'bar'、 baz； 顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)； 布爾型：如，true、 false； 空值：如，null； 值列表：用空格或者逗號(hào)分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。 SassScript 也支持其他 CSS 屬性值（property value），比如 Unicode 范圍，或 !important 聲明。然而，Sass 不會(huì)特殊對(duì)待這些屬性值，一律視為無引號(hào)字符串 (unquoted strings)。查看全部
-
初學(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 代碼中?！?查看全部
-
繼承對(duì)于了解 CSS 的同學(xué)來說一點(diǎn)都不陌生，先來看一張圖： 圖中代碼顯示“.col-sub .block li,.col-extra .block li” 繼承了 “.item-list ul li”選擇器的 “padding : 0;” 和 “ul li” 選擇器中的 “l(fā)ist-style : none outside none;”以及 * 選擇器中的 “box-sizing:inherit;”。 在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。查看全部
-
1、聲明混合宏 不帶參數(shù)混合宏： 在 Sass 中，使用“@mixin”來聲明一個(gè)混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用來聲明混合宏的關(guān)鍵詞，有點(diǎn)類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號(hào)里面是復(fù)用的樣式代碼。 帶參數(shù)混合宏： 除了聲明一個(gè)不帶參數(shù)的混合宏之外，還可以在定義混合宏時(shí)帶有參數(shù)，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 復(fù)雜的混合宏： 上面是一個(gè)簡(jiǎn)單的定義混合宏的方法，當(dāng)然， Sass 中的混合宏還提供更為復(fù)雜的，你可以在大括號(hào)里面寫上帶有邏輯關(guān)系，幫助更好的做你想做的事情,如： @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); } } 這個(gè) box-shadow 的混合宏，帶有多個(gè)參數(shù)，這個(gè)時(shí)候可以使用“ … ”來替代。簡(jiǎn)單的解釋一下，當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時(shí)，表示有多個(gè)陰影值，反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”。查看全部
-
避免選擇器嵌套： 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果。 選擇器越具體則聲明語(yǔ)句越冗長(zhǎng)，而且對(duì)最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高，這非常不值得。查看全部
-
Sass 的嵌套分為三種： 選擇器嵌套 屬性嵌套 偽類嵌套查看全部
舉報(bào)
0/150
提交
取消