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