-
CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發(fā)者就只要使用這種語言進行編碼工作。 通俗的說，“CSS 預(yù)處理器用一種專門的編程語言，進行 Web 頁面樣式設(shè)計，然后再編譯成正常的 CSS 文件，以供項目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應(yīng)性更強、可讀性更佳，更易于代碼的維護等諸多好處。 其它 CSS 預(yù)處理器語言： CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的 CSS 預(yù)處理器語言，比如說： Sass（SCSS） LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS查看全部
-
Sass 和 SCSS 有什么區(qū)別？ Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點： 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名 語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。 先來看一個示例： Sass 語法 $font-stack: Helvetica, sans-serif //定義變量 $primary-color: #333 //定義變量 body font: 100% $font-stack color: $primary-color SCSS 語法 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 編譯出來的 CSS body { font: 100% Helvetica, sans-serif; color: #333; }查看全部
-
有一個特別的參數(shù)“…”。當混合宏傳的參數(shù)過多之時，可以使用參數(shù)來替代查看全部
-
在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個默認值 @mixin border-radius($radius:3px)查看全部
-
在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏，那么在實際調(diào)用中，其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。查看全部
-
在 Sass 中，使用“@mixin”來聲明一個混合宏查看全部
-
.box { font-size: 12px; font-weight: bold; } Sass .box { font: { size: 12px; weight: bold; } }查看全部
-
Sass 的嵌套分為三種：選擇器嵌套、屬性嵌套、偽類嵌套查看全部
-
什么時候聲明變量？ 創(chuàng)建變量只適用于感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標準時方可創(chuàng)建新變量： 該值至少重復(fù)出現(xiàn)了兩次； 該值至少可能會被更新一次； 該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。 基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。 !global 和 !default查看全部
-
混合宏 ：@mixin 繼承： @extend 占位符：%placeholder查看全部
-
Sass 中的占位符 %placeholder 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼。 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 編譯出來的CSS //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }查看全部
-
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承。如下所示： //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 編譯出來之后： //CSS .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; } .btn-second { background-clor: orange; color: #fff; }查看全部
-
混合宏的參數(shù)--傳一個帶值的參數(shù) 在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個默認值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認值“3px”。 在調(diào)用類似這樣的混合宏時，會多有一個機會，假設(shè)你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調(diào)用默認的混合宏“border-radius”: .btn { @include border-radius; } 編譯出來的 CSS: .btn { -webkit-border-radius: 3px; border-radius: 3px; } 但有的時候，頁面中有些元素的圓角值不一樣，那么可以隨機給混合宏傳值，如： .box { @include border-radius(50%); } 編譯出來的 CSS: .box { -webkit-border-radius: 50%; border-radius: 50%; }查看全部
-
混合宏的參數(shù)--傳一個不帶值的參數(shù) Sass 的混合宏有一個強大的功能，可以傳參，那么在 Sass 中傳參主要有以下幾種情形： A) 傳一個不帶值的參數(shù) 在混合宏中，可以傳一個不帶任何值的參數(shù)，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定義了一個不帶任何值的參數(shù)“$radius”。 在調(diào)用的時候可以給這個混合宏傳一個參數(shù)值： .box { @include border-radius(3px); } 這里表示給混合宏傳遞了一個“border-radius”的值為“3px”。 編譯出來的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
混合宏-調(diào)用混合宏 在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏，那么在實際調(diào)用中，其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。查看全部
舉報
0/150
提交
取消