搜尋
首頁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
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

10個JQuery Fun and Games插件10個JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件,讓您的網站更具吸引力,提升用戶粘性!雖然Flash仍然是開發休閒網頁遊戲的最佳軟件,但jQuery也能創造出令人驚喜的效果,雖然無法與純動作Flash遊戲媲美,但在某些情況下,您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲 遊戲編程的“Hello world”,現在有了jQuery版本。 源碼 jQuery瘋狂填詞遊戲 這是一個填空遊戲,由於不知道單詞的上下文,可能會產生一些古怪的結果。 源碼 jQuery掃雷遊戲

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

jQuery視差教程 - 動畫標題背景jQuery視差教程 - 動畫標題背景Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。 我們將構建一個帶有分層圖像的標題橫幅,從而創造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及更高版本一起使用。 下載

使用jQuery和Ajax自動刷新DIV內容使用jQuery和Ajax自動刷新DIV內容Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。 該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。 加載圖像是選擇

Matter.js入門:簡介Matter.js入門:簡介Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能,例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力,例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外,它也適用於移動設備,因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎,因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中,我將介紹此庫的基礎知識,包括其安裝和用法,並提供一

如何在瀏覽器中優化JavaScript代碼以進行性能?如何在瀏覽器中優化JavaScript代碼以進行性能?Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
2 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

DVWA

DVWA

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

記事本++7.3.1

記事本++7.3.1

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

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器