CSS工程化

CSS編譯器
　　CSS編譯器，也叫做CSS預編譯器，是指開發者使用某種類似CSS（但實際不是）的語言編寫代 碼，然后通過編譯器，將其編譯成瀏覽器真正能執行的CSS代碼。
　　目前常見的CSS編譯器有：SASS和LESS。本文已常用的SASS為例，來講解如何用SASS來實現 優雅簡潔的CSS代碼。
SASS示例

$darkcolor : #2E2E2E; //定義一個顏色變量，值為#2E2E2E $lightcolor : #c1c1c1; //定義一個顏色變量，值為#c1c1c1 .site-footer { background: $darkcolor; //使用變量$darkcolor的值作為背景色 color: $lightcolor; //使用變量$lightcolor的值作為前景色 padding: 50px 0; } .site-header { background: $darkcolor; //使用變量$darkcolor的值作為背景色 color: $lightcolor; //使用變量$lightcolor的值作為前景色 position: fixed; left: 0; top: 0; }

SASS的安裝
　　Koala是一個預編譯工具集，它內置了SASS、LESS等多種前端的預編譯器，并且提供圖形化的操 作界面，無論對于新手和老手，都是非常不錯的選擇。
　　　　1、新建一個文件夾，并用你熟悉的文本編輯器打開（例如VSCode），然后在文件夾中新建css文件 夾，用于存放SASS文件以及CSS文件，再在根目錄中新建一個index.html文件。
　　　　2、在css文件中新建一個 index.scss 文件，注意后綴名為 .scss ，表示這是一個使用Sass CSS語言 編寫的文件。
　　　　3、打開安裝好的Koala，將你的工程文件夾拖動Koala的主界面中。VSCODE中，已經生成了對應的CSS文件和一個Map文件.

　　編譯選項
　　　　1. Autoprefix自動前綴
　　　　　　選中該選項，在編譯時，會自動對瀏覽器有兼容問題的屬性加上廠商前綴。
　　　　2. compressed壓縮模式
　　　　　　選中該選項，在編譯時，會對生成的代碼進行壓縮，以達到小文件體積。

變量

sass使用 $ 符號來標識變量。

1、變量聲明
　　　　sass變量的聲明和css屬性的聲明很像： $highlight-color: #F90; 這意味著變量$highlight color 現在的值是#F90。任何可以用作css屬性值的賦值都可以用作sass的變量值，甚至是以空格分割的 多個　屬性值，如 $basic-border: 1px solid black; ，或以逗號分割的多個屬性值，

2、變量引用

　　凡是css屬性的標準值（比如說1px或者bold）可存在的地方，變量就可以使用。css生成時，變量 會被它們的值所替代。之后，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此 變量的地方生成的值都會隨之改變。

嵌套CSS 規則

嵌套選擇器

示例：

.site-footer .footer-container .footer-menu { display: flex; width: 773px; justify-content: space-between; line-height: 3;li{ font-size: 14px; a:hover { color: #fff; } &:first-child{ font-size: 16px; color: #eee; }} }

?

嵌套屬性
　　在sass中，除了CSS選擇器，屬性也可以進行嵌套。盡管編寫屬性涉及的重復不像編寫選擇器那么 糟糕，但是要反復寫 border-style 、 border-width 、 border-color 以及 border-* 等也是非 常煩人的。在sass中，你只需敲寫一遍border：
SASS中的注釋

　　SASS中提供了兩種注釋方式，分別是：
　　　　1. CSS標準注釋 /* 注釋內容 */ ,該注釋會出現在編譯結果中
　　　　2. 靜默注釋 // 注釋內容 該注釋僅會出現在SASS代碼中

混合器
　　如果你的整個網站中有幾處小小的樣式類似（例如一致的顏色和字體），那么使用變量來統一處理 這種情況是非常不錯的選擇。但是當你的樣式變得越來越復雜，你需要大段大段的重用樣式的代 碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。

簡單混合器
@mixin定義一個混合器， @include 來引用混合器名稱
示例：

//使用@mixin定義一個混合器，混合器的書寫跟CSS代碼塊一樣，可以定義多個規則 @mixin flex-container{ display:flex; flex-wrap: wrap; justify-content: space-between; } //其他的代碼塊中均可以使用該混合器 .main{ font-size:1.1em; color:inherit; @include flex-container;//使用混合器 } .container{ background: lightblue; @include flex-container;//使用混合器 }

?

混合器傳參
　　混合器并不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定制混合器 生成的精確樣式。當@include混合器時，參數其實就是可以賦值給css屬性值的變量。如果你接觸 過函數，這種方式跟函數非常相似：
　　當混合器被@include時，你可以把它當作一個css函數來傳參。
混合器參數的默認值
　　為了在@include混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。參數默認值使 用 $name: default-value 的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數的 引用，

解決瀏覽器兼容性問題

瀏覽器內核

瀏覽器類型 內核 JS引擎 IE Trident JScript Firefox Gecko TraceMonkey Chrome WebKit,Blink V8 Safari WebKit SquirrelFish Extreme Opera Presto Carakan

使用CSS Hack解決兼容性問題

瀏覽器在讀取CSS代碼的時候可能會遇到一些無法識別的代碼，造成這種現象的原因通常有兩種：
　　1. 代碼本身有問題，如： bg:red ，bg并不是一個有效的css屬性
　　2. 代碼沒問題，但瀏覽器的內核不能識別，如： box-sizing:border-box ，這句代碼本身沒 有問題，但由于使用的是CSS3的屬性 box-sizing ，會造成在一些低版本內核的瀏覽器中無 法識別。

一些瀏覽器的這兩點特性：
　　1.不同內核的瀏覽器可以識別自己特有的CSS屬性
　　2.瀏覽器遇到無法識別的CSS屬性，會直接跳過
正是由于瀏覽器的這種特點，給我們解決兼容瀏覽器兼容性問題打開了一條通道。而CSS Hack技 術，就是通過書寫一些讓特定瀏覽器識別的代碼來解決兼容性問題的。

漸近增強和優雅降級
　　網頁在新版本的瀏覽器中要應用新的效果；網頁在舊版本的瀏覽器中可以沒有 新的效果，但不要布局錯亂。

　　針對不同的側重點，于是出現了兩種靜態頁面的開發思路，它們分別是漸近增強（progressive enhancement）和優雅降級（graceful degradation）。

　　　　漸進增強是指：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行 效果、交互等改進和追加功能達到更好的用戶體驗。

　　　　優雅降級是指：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

它們的區別在于：

　　1、優雅降級以新版本瀏覽器為目標，從現狀開始，并面向低版本瀏覽器，逐漸減少用戶體驗的 供給。
　　2、漸進增強以舊版本瀏覽器為目標，從一個非常基礎的，能夠起作用的版本開始，并不斷擴 充，以適應新版本瀏覽器的需要。
　　3、 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地 帶。

優雅降級會優先書寫新標準中的屬性，以適應新版本瀏覽器，然后再補充舊版本瀏 覽器中的書寫方式，
漸近增強會優先書寫瀏覽器特有的屬性，以適應舊版本瀏覽器，然后再補充新標準中的屬性

轉載于:https://www.cnblogs.com/lyl-0667/p/11050919.html

總結

以上是生活随笔為你收集整理的css工程化和浏览器兼容性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。