摘要:它們有個統一的名字預處理器。面對以上問題,預處理器給出了非??尚械慕鉀Q方案變量就像其他編程語言一樣,免于多處修改?;氐皆掝}中,之所以會出現向預處理器這樣子的解決方案,歸根結底還是標準發展的滯后性導致的。
前言
現在的前端,javascript的發展有目共睹,框架林立。同時,html也是齊頭并進,推出了HTML5標準,并且得到了普及。這樣的發展卻唯獨少了一個角色?
CSS,就是這個看似不起眼的家伙,卻在開發中發揮著和js一樣重要的作用。css,是一種樣式腳本,好像和編程語言有著一定的距離,我們可以將之理解為一種描述方法。這似乎導致css被輕視了。不過,css近幾年來正在經歷著一次巨變——CSS Module。我記得js的井噴期應該可以說是node帶來的,它帶來了Module的概念,使得JS可以被工程化開發項目。那么,今天的css,也將越來越美好。如果你喜歡我的文章,歡迎評論,歡迎Star~。歡迎關注我的github博客
正文我想和你們說再見既然作為一篇推廣PostCSS的文章,我們就應該先來了解一下這是什么,和我們之前講的CSS Module有啥關系?此處讓我為你們娓娓道來。
目前,在工程化開發中,使用最多的應該就是Less、Sass和Stylus。首先,還是介紹一下它們吧。它們有個統一的名字——css預處理器。何為CSS預處理器?應該就是一種可以將你根據它的規則寫出來的格式轉成css的東西(還是講的通俗一點)。它們的出現可以說是恰逢其時,解決了css的一些缺憾:
語法不夠強大,不能夠嵌套書寫,不利于模塊化開發
沒有變量和邏輯上的復用機制,導致在css的屬性值中只能使用字面量形式,以及不斷重復書寫重復的樣式,導致難以維護。
面對以上問題,css預處理器給出了非??尚械慕鉀Q方案:
變量:就像其他編程語言一樣,免于多處修改。
Sass:使用「$」對變量進行聲明,變量名和變量值使用冒號進行分割
Less:使用「@」對變量進行聲明
Stylus:中聲明變量沒有任何限定,結尾的分號可有可無,但變量名和變量值之間必須要有『等號』。但需要注意的是,如果用“@”符號來聲明變量,Stylus會進行編譯,但不會賦值給變量。就是說,Stylus 不要使用『@』聲明變量。Stylus 調用變量的方法和Less、Sass完全相同。
作用域:有了變量,就必須得有作用域進行管理。就想js一樣,它會從局部作用域開始往上查找變量。
Sass:它的方式是三者中最差的,不存在全局變量的概念
Less:它的方式和js比較相似,逐級往上查找變量
Stylus:它的方式和Less比較相似,但是它和Sass一樣更傾向于指令式查找
嵌套:對于css來說,有嵌套的寫法無疑是完美的,更像是父子層級之間明確關系
三者在這處的處理都是一樣的,使用「&」表示父元素
有了這些方案,會使得我們可以在保證DPY、可維護性、靈活性的前提下,編寫css樣式。
回到話題中,之所以會出現向預處理器這樣子的解決方案,歸根結底還是css標準發展的滯后性導致的。同時,我們也應該考慮一下,真的只要預處理器就夠了嗎?往往在項目過大時,由于缺乏模塊的概念,全局變量的問題會持續困擾著你。每次定義選擇器時,總是要顧及到其他文件中是否也使用了同樣的命名。畢竟項目是團隊的,而不是個人的。哪是否有方式可以解決這些問題呢?
前人的方法對于css命名沖突的問題,由來已久,可以說我們前端開發人員,天天在苦思冥想,如何去優雅的解決這些問題。css并未像js一樣出現了AMD、CMD和ES6 Module的模塊化方案。
那么,回到問題,如何去解決呢?我們的前人也有提出過不同的方案:
Object-Oriented CSS
BEM
SMACSS
方案可以說是層出不窮,不乏有團隊內部的解決方案。但是大多數都是一個共同點——為選擇器增加前綴。
這可是一個體力活,你可能需要手動的去編寫長長的選擇器,或許你可以使用預編譯的css語言。但是,它們似乎并為解決本質的問題——為何會造成這種缺憾。我們不妨來看看,使用BEM規范寫出來的例子:
每次這樣子寫,估計是個程序員,都得加班吧,哈哈!
一種希望現在的網頁開發,講究的是組件化的思想,因此,急需要可行的css Module方式來完成網頁組件的開發。自從2015年開始,國外就流行了CSS-in-JS(典型的代表,react的styled-components),還有一種就是CSS Module。
本篇談及后者,需要對前者進行了解的話,自行Google即可
對于css,大家都知道,它是一門描述類語言,并不存在動態性。那么,要如何去形成module呢。我們可以先來看一個react使用postcss的例子:
//example.css .article { font-size: 14px; } .title { font-size: 20px; }
之后,將這些命名打亂:
.zxcvb{ font-size: 14px; } .zxcva{ font-size: 20px; }
將之命名對應的內容,放入到JSON文件中去:
{ "article": "zxcvb", "title": "zxcva" }
之后,在js文件中運用:
import style from "style.json"; class Example extends Component{ render() { return () } }
這樣子,就描繪出了一副css module的原型。當然,我們不可能每次都需要手動去寫這些東西。我們需要自動化的插件幫助我們完成這一個過程。之后,我們應該先來了解一下postCSS。
我需要認識你PostCSS是什么?或許,你會認為它是預處理器、或者后處理器等等。其實,它什么都不是。它可以理解為一種插件系統。使用它GitHub主頁上的介紹:
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
你可以在使用預處理器的情況下使用它,也可以在原生的css中使用它。它都是支持的,并且它具備著一個龐大的生態系統,例如你可能常用的Autoprefixer,就是PostCSS的一個非常受歡迎的插件,被Google, Shopify, Twitter, Bootstrap和CodePen等公司廣泛使用。
當然,我們也可以在CodePen中使用它:
這里推薦大家看一下PostCSS的深入系列
接下來,我們來看一下PostCSS的配置:
這里我們使用webpack+postcss+postcss-loader+cssnext+postcss-import的組合。
首先,我們可以通過yarn來安裝這些包:
yarn add --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext postcss-import
然后,我們配置一下webpack.config.js:
const webpack = require("webpack"); const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { context: path.resolve(__dirname, "src"), entry: { app: "./app.js"; }, module: { loaders: [ { test: /.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: "css-loader", options: { importLoaders: 1 }, }, "postcss-loader", ], }), }, ], }, output: { path: path.resolve(__dirname, "dist/assets"), }, plugins: [ new ExtractTextPlugin("[name].bundle.css"), ], };
然后在根目錄下配置postcss.config.js
module.exports = { plugins: { "postcss-import": {}, "postcss-cssnext": { browsers: ["last 2 versions", "> 5%"], }, }, };
之后,就可以在開發中使用cssnext的特性了
/* Shared */ @import "shared/colors.css"; @import "shared/typography.css"; /* Components */ @import "components/Article.css";
/* shared/colors.css */ :root { --color-black: rgb(0,0,0); --color-blue: #32c7ff; } /* shared/typography.css */ :root { --font-text: "FF DIN", sans-serif; --font-weight: 300; --line-height: 1.5; } /* components/Article.css */ .article { font-size: 14px; & a { color: var(--color-blue); } & p { color: var(--color-black); font-family: var(--font-text); font-weight: var(--font-weight); line-height: var(--line-height); } @media (width > 600px) { max-width: 30em; } }
最后使用webpack進行編譯就可以了。
總結PostCSS,國內還沒有太流行起來,不過相信不久的將來也會逐漸的熱門,并且國內的資源較少,不過最近新出了一本大漠老師們一起翻譯的書——《深入PostCSS Web設計》。有興趣的人也可以去看一下,學習一些前言的東西。本篇也只是大概的寫了一下PostCSS的東西,鑒于國內資源較少,所以參考了一下國外的博文教材,下面會有鏈接。
參考鏈接如果你對我寫的有疑問,可以評論,如我寫的有錯誤,歡迎指正。你喜歡我的博客,請給我關注Star~呦。大家一起總結一起進步。歡迎關注我的github博客
PostCSS-modules: make CSS great again!
PostCSS Deep Dive: What You Need to Know
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89114.html
摘要:前端日報精選無頭瀏覽器初探鼠標無限移動簡介譯深入分析變更檢測發布前必須排查的安全如何開發中文第期關鍵和減少阻塞渲染的的自動化解決方案譯網頁設計掘金年最受歡迎的個編程挑戰網站簡書系列和深入理解掘金發布后臺管理系統,沒錯,它就是你想 2017-10-18 前端日報 精選 無頭瀏覽器 Puppeteer 初探鼠標無限移動 JS API Pointer Lock簡介[譯] 深入分析 Angul...
摘要:不信你命令行里敲個試試敲敲敲當然了想直接運行命令,你需要將添加到系統變量啊。全局安裝相同的,運行命令耐心等待安裝完成后,你的系統變量里就存在命令了,你可以運行下試試。上訴如果有不懂的,歡迎留言。 再一次見面! Light 還是太太太懶了,距離上一篇沒啥營養的文章已經過去好多天。今天為大家介紹介紹 webpack 最基本的概念,以及簡單的配置,讓你能快速得搭建一個可用的 webpack ...
摘要:一偽類偽類包含兩種狀態偽類偽類和結構性偽類。狀態偽類是基于元素當前狀態進行選擇的。二偽元素偽元素是對元素中的特定內容進行操作,而不是描述狀態。 一、偽類 偽類包含兩種:狀態偽類(UI 偽類)和結構性偽類。 (1)狀態偽類是基于元素當前狀態進行選擇的。 在與用戶的交互過程中元素的狀態是動態變化的,因此該元素會根據其狀態呈現不同的樣式。當元素處于某狀態時會呈現該樣式,而進入另一狀態后,該樣...
閱讀 2943·2023-04-25 19:20
閱讀 786·2021-11-24 09:38
閱讀 2040·2021-09-26 09:55
閱讀 2430·2021-09-02 15:11
閱讀 2015·2019-08-30 15:55
閱讀 3610·2019-08-30 15:54
閱讀 3148·2019-08-30 14:03
閱讀 2962·2019-08-29 17:11