搜尋
首頁web前端js教程如何使用PostCSS構建自己的CSS預處理器

How to Build Your Own CSS Preprocessor With PostCSS

關鍵要點

  • PostCSS允許開發者構建自己的CSS預處理器,比Sass、LESS或Stylus等其他預處理器提供更大的靈活性和控制性。它使用JavaScript插件來操作樣式,並能夠添加類似預處理器的功能,例如變量、mixin和嵌套。
  • PostCSS的優勢包括模塊化、輕量級構建、新功能的即時實現以及強制執行開發策略的能力。它也比傳統的預處理器更快。但是,它也有一些缺點,例如構建過程的複雜性增加、不同的語法以及對有效CSS的要求。
  • 雖然PostCSS具有巨大的潛力,但它可能並不適合所有項目。對於小型、簡單的項目或單人團隊來說,它可能是一個有吸引力的選擇。但對於大型團隊或項目,由於Sass的廣泛理解和使用,現有的預處理器仍然可能是首選。

許多開發者已經採用了LESS、Stylus或當前最受歡迎的Sass。理想情況下,你還應該使用Autoprefixer對你的CSS進行後處理,以便在需要時添加供應商前綴,而無需使用mixin或Compass之類的框架。 Autoprefixer是PostCSS的插件;它是一個將CSS轉換為可用於操作樣式的對像模型的工具。還有許多其他可用的插件實現了類似預處理器的功能,例如變量、mixin和嵌套。 Ben Frain最近的文章《與Sass分手:不是你,是我》提出了一個有趣的命題。鑑於你可以使用PostCSS創建你想要的CSS預處理器,你真的需要Sass、LESS或Stylus嗎?一個基本的類似Sass的解析器可以在你的構建過程中創建。在這個例子中,我將使用一個Gulp.js任務文件,但同樣的概念也適用於Grunt或任何其他構建系統。首先,我們使用npm安裝PostCSS和所需的插件,例如:

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

然後在gulpfile.js中創建一個CSS處理函數數組,例如:

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

並編寫一個CSS處理任務,例如:

// 编译CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

你也可以使用PostCSS API創建你自己的處理函數。例如,我們可以為所有font-family聲明應用一個sans-serif後備:

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后备
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

如果文件/source/css/styles.css包含以下代碼:

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

運行gulp css將在/dest/css/styles.css中創建此CSS:

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

優勢

PostCSS使你擺脫了預處理器作者強加的限制和選擇。這種方法提供了幾個好處:

  • 模塊化 你只需要為你的項目添加所需的插件和函數。
  • 輕量級 預處理器正變得越來越龐大和復雜。你可能不會想要或使用每個功能,但它們仍然存在。 PostCSS減少了體積。
  • 即時實現 你是否曾經等待過某些功能在Sass、LibSass、LESS、Stylus或其他預處理器中可用?你現在可以使用……
  • JavaScript函數 你的CSS預處理器使用JavaScript——一種真正的編程語言(儘管有些人這麼說!)。大多數預處理器語言結構都是基本的。你經常會看到比它們創建的原始CSS更複雜、更難以理解的函數和mixin。使用PostCSS,可以輕鬆地打開文件、從數據庫讀取、發出HTTP請求或進行複雜的計算。
  • 強制執行開發策略 假設你想讓你的團隊避免使用@extend聲明。除非他們向構建過程添加一個extend插件,否則任何人都無法使用@extend。這將是立即顯而易見的。
  • 它很快——非常快 作者估計PostCSS比同等預處理器快4-40倍。如果只需要幾個插件,我認為收益會更高。整個解決方案都是用JavaScript構建的,不需要跳轉到另一個庫或語言解釋器。

缺點

那麼一切都好嗎?不幸的是,PostCSS並非完美的解決方案:

  • 複雜性增加 你的構建過程將變得更難以管理。添加Sass通常是一兩行代碼,但PostCSS需要更多規劃——尤其因為插件必須以特定的順序調用。例如,@import內聯應該在解析變量之前解析。但是,如果你的@import聲明中包含變量怎麼辦?在某些情況下,可能需要多次調用插件。
  • 不同的語法 我最初嘗試將一個小型的Sass項目轉換為PostCSS。 甚至不要嘗試! 雖然我最終成功了,但PostCSS插件經常使用略微不同的語法,例如@define-mixin而不是@mixin。這可能會導致混淆和大量的代碼更新。部分原因是……
  • PostCSS需要有效的CSS 大多數預處理器解析純文本文件,因此理論上任何語法都是可能的。 PostCSS創建了一個對像模型,因此它從一開始就需要語法正確的CSS。即使是//單行註釋也可能導致它失敗。你可以在傳遞給PostCSS之前預處理你的CSS文件,但那樣你又回到了使用預處理器!

你應該放棄你的預處理器嗎?

如果你在一個單人團隊中開始一個小型、相對簡單的獨立項目,自定義PostCSS處理器可能是一個有吸引力的選擇。我還推薦PostCSS用於任何真正的後處理任務,例如供應商前綴、將媒體查詢打包到單個聲明中、減少calc()方程、為舊瀏覽器應用後備、支持CSS4選擇器、縮小等。自己做這些工作沒有什麼好處。然而,Sass已經達到了臨界質量。沒有哪個預處理器的語法是完美的,但它會被你團隊中的大多數開發者理解。任何細微的不同都不太可能為每個人提供顯著的好處或吸引力。也就是說,PostCSS和類似的Rework框架具有巨大的潛力。如果一個模塊化的CSS插件系統能夠複製——甚至混合——我們想要的Sass、LESS和Stylus的語法和功能,我們將擁有一個能夠擊敗所有其他預處理器的預處理器。你可以打賭,現在有人正在開發這個項目……

你是否成功地將PostCSS用作項目的預處理器?它是否吸引你遠離Sass?你是否會從LESS遷移?你會放棄Stylus嗎?

關於PostCSS的常見問題解答

PostCSS與其他CSS預處理器的主要區別是什麼?

PostCSS是一個使用JavaScript插件轉換樣式的工具。這些插件可以執行各種任務,例如代碼整理、添加供應商前綴,甚至啟用未來的CSS功能。與Sass或Less等其他CSS預處理器不同,PostCSS沒有內置語法。相反,它使用插件來轉換CSS。這使得它更靈活和可定制,因為你可以只選擇項目所需的插件。

如何安裝和使用PostCSS?

要安裝PostCSS,你需要在你的計算機上安裝Node.js和npm。然後,你可以使用命令npm install -g postcss-cli全局安裝PostCSS。要使用PostCSS,你需要安裝你想要使用的插件,然後創建一個配置文件,在其中指定你想要使用的插件。然後,你可以使用命令postcss input.css -o output.css在你的CSS文件上運行PostCSS。

一些流行的PostCSS插件是什麼?

有許多可用的PostCSS插件,每個插件都有不同的用途。一些流行的插件包括Autoprefixer,它會自動向你的CSS添加供應商前綴;cssnext,它允許你今天就使用未來的CSS功能;以及cssnano,它會縮小你的CSS以用於生產環境。

我可以將PostCSS與其他CSS預處理器一起使用嗎?

是的,你可以將PostCSS與Sass或Less等其他CSS預處理器一起使用。這允許你利用這些預處理器的功能,同時也能從PostCSS的靈活性和強大功能中受益。

使用PostCSS的好處是什麼?

PostCSS提供了許多好處。它高度可定制,允許你只選擇所需的插件。這可以導致更小、更快的構建過程。 PostCSS還使你能夠今天就使用未來的CSS功能,並且它可以自動向你的CSS添加供應商前綴,從而節省你的時間並確保你的樣式在不同的瀏覽器中都能正常工作。

使用PostCSS有什麼缺點?

雖然PostCSS功能強大且靈活,但它的學習曲線可能比其他CSS預處理器更陡峭。因為它依賴於插件,你需要花時間研究和選擇適合你項目的插件。此外,因為它是一個較新的工具,所以它可能不像其他預處理器那樣得到廣泛的支持或採用。

PostCSS如何處理mixin?

PostCSS通過postcss-mixins插件處理mixin。這個插件允許你在CSS中定義和使用mixin,類似於你在Sass或Less中所做的那樣。你可以在PostCSS配置文件中定義一個mixin,然後使用@mixin關鍵字在你的CSS中使用它。

我可以在我的現有項目中使用PostCSS嗎?

是的,你可以將PostCSS集成到你的現有項目中。你只需要安裝PostCSS和想要使用的插件,然後設置一個PostCSS配置文件。然後,你可以在現有的CSS文件上運行PostCSS。

PostCSS與Autoprefixer或cssnext等其他工具相比如何?

Autoprefixer和cssnext實際上是PostCSS插件。這意味著它們是在PostCSS之上運行的工具,利用其插件架構。 Autoprefixer向你的CSS添加供應商前綴,而cssnext允許你今天就使用未來的CSS功能。

PostCSS適合大型項目嗎?

是的,PostCSS適合任何規模的項目。因為它具有可定制性,你可以只選擇所需的插件,從而實現更小、更快的構建過程。這使得它成為大型項目(其中性能是一個問題)的一個不錯的選擇。

以上是如何使用PostCSS構建自己的CSS預處理器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中