屬性速寫
有很多的屬性，我們要在 CSS 中一遍又一遍輸入诫欠。 當(dāng)然握爷，每次輸入字符的時(shí)間是很小的温数，但是經(jīng)過幾年的開發(fā)加起來也會(huì)很多真朗。 我們要看這里的兩個(gè)插件，它們可以讓你整理一些屬性成為速寫版本厅须，為了你能夠得到一個(gè)快速并且流暢的體驗(yàn)來編寫你的 CSS椿猎。
定義你自己的速寫
由 @Sean King 編寫的 postcss-alias
插件允許你定義自己的速寫或"別名"。這可以確保你使用的速寫標(biāo)記符合你的思想方式并且對(duì)于你的記憶也很容易示损。
若要定義一些別名需要在樣式的頂部加上一個(gè)語法是 @alias {...}
渗磅。 然后在 @
規(guī)則內(nèi)通過添加 alias-name: property-name;
設(shè)置你的別名
向你的 src/style.css
里添加下面的示例代碼，為 border-size
屎媳， border-style
夺溢， border-color
三個(gè)屬性設(shè)置別名:
@alias { bsz: border-size; bst: border-style; bcl: border-color;}
然后添加以下代碼來測(cè)試使用的新別名：
.set_border { bsz: 1px; bst: solid; bcl: #ccc;}
編譯您的文件，并在您的 dest/style.css
文件中烛谊，您現(xiàn)在可以看到下面這樣的代碼:
.set_border { border-size: 1px; border-style: solid; border-color: #ccc;}
有關(guān)于 postcss-alias
更多信息风响，可以點(diǎn)擊 這里 查閱。
定義速記方式
如果您想要使用大量的屬性速記丹禀，但你不想通過自己去定義每一步驟状勤，你可以查閱由 @Johnie Hjelm 編寫的有數(shù)百個(gè)屬性縮寫的插件 postcss-crip
來插入和發(fā)揮使用。
例如双泪，將以下代碼添加到您的 src/style.css
文件持搜，其中包含的 margin-top
、 margin-right
焙矛、 margin-bottom
和 margin-left
屬性的簡(jiǎn)寫:
.crip_shorthand { mt: 1rem; mr: 2rem; mb: 3rem; ml: 4rem;}
編譯您的代碼葫盼，您應(yīng)該看到你的 dest/style.css
代碼是擴(kuò)展后的:
.crip_shorthand { margin-top: 1rem; margin-right: 2rem; margin-bottom: 3rem; margin-left: 4rem;}
有關(guān)于 postcss-crip
更多的信息，可以點(diǎn)擊 這里 了解村斟。另外更完整的屬性縮寫列表可以 點(diǎn)擊這里查閱 贫导。
一行輸出 @font-face
由 @Jonathan Neal 編寫 postcss-font-magician
插件非常貼切其名稱抛猫。 它允許您使用簡(jiǎn)單的 font-family
規(guī)則來調(diào)用自定義字體，就好像你正在使用標(biāo)準(zhǔn)字體,而字體將會(huì)像施了魔術(shù)般地工作孩灯。
將以下代碼添加到您的 src/style.css
文件:
body { font-family: "Indie Flower";}
就是這樣闺金。這是使用 postcss-font-magician
所有的需要。 沒有特殊的語法峰档，只是使用的字體名稱就好像你已經(jīng)做了其它的工作败匹。
在這個(gè)例子中， Indie Flower 是我選擇的一個(gè)谷歌字體讥巡。 我還沒在項(xiàng)目中添加任何自定義字體文件掀亩，所以該插件會(huì)查看指定的字體是否從谷歌的字體可用。 當(dāng)它發(fā)現(xiàn)它是可用時(shí)尚卫，它將完全自動(dòng)地創(chuàng)建適當(dāng)?shù)?@font-face
代碼归榕。
編譯你的文件，然后再看看你的 dest/style.css
文件吱涉，它們已經(jīng)把編譯好的代碼加入其中:
@font-face { font-family: "Indie Flower"; font-style: normal; font-weight: 400; src: local("Indie Flower"),local(IndieFlower), url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"), url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format("woff");}
您可以通過在 dest/
文件夾中創(chuàng)建一個(gè)名為 index.html
的新文件 并將此代碼添加到它里邊刹泄，就可以檢查該字體是否正確加載:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"></head><body><h1>Test Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo at semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.</p></body></html>
對(duì)于字體是否加載，您需要通過 http://
地址查看此文件怎爵，而不是一個(gè) file://
地址特石，所以將該文件上傳到 Web 主機(jī)或使用像 Prepros 的應(yīng)用程序來創(chuàng)建實(shí)時(shí)預(yù)覽。
您應(yīng)該看到 Indie Flower 字體應(yīng)用到你所有的文本鳖链，如下所示:
有關(guān)于 postcss-font-magician
更多信息姆蘸，可以 點(diǎn)擊查閱 。
創(chuàng)建 CSS 圖形
如果你使用過純CSS來創(chuàng)建形狀芙委，你就會(huì)知道這是一個(gè)相當(dāng)棒的方法逞敷，包括像圓形和三角形的東西都可以實(shí)現(xiàn)，但是它是用起來也非常棘手灌侣。 尤其是三角形推捐，要搞清楚需要哪些代碼能得到一個(gè)正確方向，大小合適的形狀侧啼，這些都可能有點(diǎn)不是很直觀牛柒。
這個(gè)問題可以通過使用由 @Jed Mao 編寫的 postcss-circle
和 postcss-triangle
得到緩解。 這兩個(gè)插件給使用純 CSS 創(chuàng)建圓形和三角形創(chuàng)建一個(gè)簡(jiǎn)化的語法和直觀的方式痊乾。
創(chuàng)建圓
若要?jiǎng)?chuàng)建一個(gè)圓皮壁，使用的語法 circle: size color;
。 將以下代碼添加到您的 src/style.css
文件:
.circle { circle: 8rem #c00;}
編譯它哪审，你就會(huì)看到下面的代碼添加到您的 dest/style.css
文件中:
.circle { border-radius: 50%; width: 8rem; height: 8rem; background-color: #c00;}
現(xiàn)在將此 HTML 添加到在上一部分創(chuàng)建的 dest/index.html
文件中:
<div class="circle"></div>
刷新一下在瀏覽器中打開的文件蛾魄，現(xiàn)在您應(yīng)該看到一個(gè)紅色的圓圈:
有關(guān)于 postcss-circle
更詳細(xì)的信息，可以點(diǎn)擊 這里閱讀 。
創(chuàng)建三角形
你可以使用此插件添加三種類型的三角形：等腰三角形滴须、 直角腰三角形和等邊三角形缴川。 每個(gè)在語法的設(shè)置上都稍微有點(diǎn)不同，你可以在插件的 Github 倉(cāng)庫(kù) 主頁上查看完整信息描馅。
我們會(huì)添加一個(gè)等腰三角形，它的語法是:
triangle: pointing-<up|down|left|right>;width: <length>;height: <length>;background-color: <color>;
讓我們將這個(gè)等腰三角形示例添加到 src/style.css
文件:
.isosceles-triangle { triangle: pointing-right; width: 7rem; height: 8rem; background-color: #c00;}
編譯的文件而线，現(xiàn)在您應(yīng)該看到三角形的CSS代碼在 dest/style.css
文件:
.isosceles-triangle { width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 4rem 0 4rem 7rem; border-left-color: #c00;}
在 dest/index.html
中添加這個(gè)三角形的HTML代碼:
<div class="isosceles-triangle"></div>
瀏覽器刷新這個(gè)文件铭污，現(xiàn)在應(yīng)該可以看到一指向右邊紅色等腰三角形:
有關(guān)于 postcss-triangle
更多的信息，可以點(diǎn)擊 這里查閱 膀篮。
對(duì)常見任務(wù)使用簡(jiǎn)寫
設(shè)置鏈接樣式
設(shè)置鏈接的顏色是在每個(gè)項(xiàng)目中都要做的工作嘹狞，需要為鏈接設(shè)置默認(rèn)樣式和四種狀態(tài)設(shè)置樣式。 @Jed Mao 編寫的 postcss-all-link-colors
插件可以讓你快捷處理誓竿，一次輸出鏈接所有狀態(tài)的顏色磅网。
將下面的代碼添加到 src/style.css
中:
a { @link-colors all #4D9ACC;}
然后編譯您的文件，你會(huì)看到鏈接所有所需的狀態(tài)都已設(shè)置:
a { color: #4D9ACC;}a:visited { color: #4D9ACC;}a:focus { color: #4D9ACC;}a:hover { color: #4D9ACC;}a:active { color: #4D9ACC;}
也可以選擇為特定狀態(tài)生成不同的顏色筷屡。 只是在規(guī)則末尾添加一些花括號(hào)涧偷，并且使用 state: color;
的語法插入其中。
更新的代碼毙死，你只需要添加以下代碼到您的 src/style.css
文件:
a { @link-colors all #4D9ACC { hover: #5BB8F4; }}
現(xiàn)在當(dāng)你編譯的時(shí)候你會(huì)看到懸停狀態(tài)相比其余的樣式有不同的顏色:
a { color: #4D9ACC}a:visited { color: #4D9ACC;}a:focus { color: #4D9ACC;}a:hover { color: #5BB8F4;}a:active { color: #4D9ACC;}
有關(guān)于 postcss-all-link-colors
更詳細(xì)的信息燎潮，可以點(diǎn)擊 這里查閱 。
垂直或水平居中
垂直居中 或水平居中扼倘，這些永遠(yuǎn)是CSS開發(fā)人員的惡夢(mèng)之一确封。 @Jed Mao 的 postcss-center
插件使這項(xiàng)任務(wù)變得簡(jiǎn)單得多，使用 top: center;
來達(dá)到垂直居中再菊， left: center;
達(dá)到水平居中爪喘。
將此代碼添加到 src/style.css
文件:
.centered { top: center; left: center;}
然后編譯它，你會(huì)看到下面的代碼:
.centered { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);}
注:這個(gè)居中使用了絕對(duì)定位纠拔，所以包裹它的父元素將需要使用相對(duì)定位秉剑，絕對(duì)定位或固定定位。 因?yàn)榻o定的絕對(duì)定位元素不會(huì)對(duì)他們父元素的高度或?qū)挾犬a(chǎn)生影響绿语，所以你需要自己設(shè)定父元素的高度或?qū)挾冗M(jìn)行適應(yīng)秃症。
例如，添加 left: center;
到之前寫的 .circle
類中吕粹，這樣他就會(huì)水平居中:
.circle { circle: 8rem #c00; left: center;}
然后增加第二個(gè)類作為圓的容器种柑，它可以為圓提供一個(gè)相對(duì)的定位和高度：
.circle_wrap { position: relative; height: 8rem;}
現(xiàn)在增加一個(gè)元素作為HTML中已經(jīng)存在的圓的容器：
<div class="circle_wrap"> <div class="circle"></div></div>
當(dāng)你刷新頁面時(shí)，應(yīng)該看到圓已經(jīng)水平居中:
有關(guān)于 postcss-center
更多的信息匹耕，可以點(diǎn)擊 這里查閱 聚请。
一行輸出清除浮動(dòng)
在任何設(shè)計(jì)里使用浮動(dòng)，清除浮動(dòng)的固定類變得尤為方便且重要。 @Sean King 的 postcss-clearfix
插件可以通過一行創(chuàng)建清除浮動(dòng)的樣式驶赏，只需為 clear
屬性使用 fix
值炸卑。
清除浮動(dòng)將兼容到 IE8 及以上，添加以下代碼到 src/style.css
文件:
.clearfixed { clear: fix;}
通過編譯煤傍，您將看到它生成了清除浮動(dòng)的代碼:
.clearfixed:after { content: ''; display: table; clear: both;}
如果需要兼容到 IE6 以上盖文，要使用值不是 fix
而是 fix-legacy
，比如這樣：
.clearfixed_legacy { clear: fix-legacy;}
當(dāng)代碼被編譯后蚯姆，你會(huì)看到它包括一點(diǎn)額外的內(nèi)容五续，這使它對(duì)舊版瀏覽器變的友好:
.clearfixed_legacy:before,.clearfixed_legacy:after { content: ''; display: table;}.clearfixed_legacy:after { clear: both;}.clearfixed_legacy { zoom: 1;}
有關(guān)于 postcss-clearfix
更詳細(xì)的信息，可以點(diǎn)擊 這里查閱 龄恋。
一行設(shè)置定位
當(dāng)你不想使用默認(rèn)定位時(shí)疙驾，比如 absolute
， fixed
和 relative
郭毕。直到你安裝@Sean King 編寫的 postcss-position
插件前它碎，你不得不手動(dòng)寫出元素的 top
， right
显押， bottom
扳肛， left
定位。它沒有像設(shè)置 margin
或 padding
那樣在一行內(nèi)設(shè)置的簡(jiǎn)寫方法乘碑。
有了這個(gè)插件敞峭，當(dāng)使用 position
屬性時(shí)，設(shè)置值為 absolute / fixed / relative
后蝉仇，您可以在同一行聲明 top
, right
, bottom
和 left
的值旋讹。
將下面的示例代碼添加到 src/style.css
文件:
.absolute { position: absolute 1rem 1rem 0 0;}
編譯之后, 你會(huì)看到簡(jiǎn)寫的樣式已經(jīng)變成了需要你手寫的多行代碼：
.absolute { position: absolute; top: 1rem; right: 1rem; bottom: 0; left: 0;}
這些值的聲明方式與 margin
和 padding
具有相同的模式，比如轿衔，第一個(gè)值表示設(shè)置頂部和底部沉迹，第二個(gè)值設(shè)置左邊和右邊，或者你可以用一個(gè)值設(shè)置四邊害驹。
試試下面的代碼:
.fixed_two_values { position: fixed 2rem 1rem;}.relative_one_value { position: relative 3rem;}
編譯出來的代碼：
.fixed_two_values { position: fixed; top: 2rem; right: 1rem; bottom: 2rem; left: 1rem;}.relative_one_value { position: relative; top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;}
有關(guān)于 postcss-position
更詳細(xì)的信息鞭呕，可以點(diǎn)擊 這里查閱 。
同時(shí)設(shè)置寬度和高度
@Andrey Sitnik 編寫的 postcss-size
插件允許您縮減最常用的 width
和 height
屬性宛官，只需要寫一個(gè) size
屬性葫松。 你可以通過兩種方式使用: 傳兩個(gè)值，第一個(gè)為寬度的值底洗，第二個(gè)是長(zhǎng)度的腋么，或者傳一個(gè)值，它將同時(shí)為寬高設(shè)置亥揖。
添加下面的 CSS 到 src/style.css
文件中來測(cè)試一下：
.size_a { size: 1rem 2rem;}.size_b { size: 1rem;}
編譯之后珊擂，在 dest/style.css
文件中可以看到下面的代碼：
.size_a { width: 1rem; height: 2rem;}.size_b { width: 1rem; height: 1rem;}
有關(guān)于 postcss-size
更詳細(xì)的信息圣勒，可以點(diǎn)擊 這里查閱 。
設(shè)置水平和垂直間距
作為崇尚編碼效率愛好者摧扇，在編寫外邊距和內(nèi)邊距時(shí)圣贸，往往兩側(cè)是相等的。我希望有一個(gè)快捷方式一次可以聲明水平方向和垂直方向間距扛稽。 我甚至寫了幾個(gè) mixin 來做這件事情吁峻。 @David Hemphill 編寫的 postcss-verthorz
插件，我再也不需要那些 mixin 了在张。
用這個(gè)插件可以使用 padding-vert
或者 margin-vert
設(shè)置垂直間距锡搜，使用 padding-horz
或者 margin-horz
設(shè)置水平間距。 將下面的代碼示例添加到 src/style.css
文件中瞧掺，看看它是如何工作的:
.spacing { padding-vert: 1rem; margin-horz: 2rem;}
編譯后，您將看到這些規(guī)則已經(jīng)被擴(kuò)展成內(nèi)間距和外邊距的聲明方式了凡傅。
.spacing { padding-top: 1rem; padding-bottom: 1rem; margin-left: 2rem; margin-right: 2rem;}
你還可以進(jìn)一步簡(jiǎn)寫這些屬性到兩個(gè)字符辟狈。 上面我們使用的示例代碼可以縮寫為以下形式，它們的輸出將會(huì)完全一樣:
.spacing_short { pv: 1rem; mh: 2rem;}
有關(guān)于 postcss-verthorz
更詳細(xì)的信息夏跷，可以點(diǎn)擊 這里查閱 哼转。
輸出顏色代碼
我最喜歡的默認(rèn)文本顏色是 #232323
，我不知道是不是只有我這樣槽华，但我厭倦了反復(fù)推敲這些相同的兩位數(shù)壹蔓。 我經(jīng)常希望有一個(gè)簡(jiǎn)寫方式，像 #ffffff
可以縮減成 #fff
的方式一樣猫态。 @Andrey Polischuk 編寫 postcss-color-short
插件就可以做到這一點(diǎn)佣蓉。
當(dāng)使用這個(gè)插件，你設(shè)置兩位數(shù)顏色代碼數(shù)字會(huì)重復(fù)進(jìn)行亲雪，直到創(chuàng)建一個(gè)六位數(shù)的值勇凭，例如 #23
將成為 #232323
。 如果您設(shè)置一個(gè)數(shù)字顏色代碼义辕，它將重復(fù)進(jìn)行虾标，直到有三個(gè)數(shù)字，例如 #f
將成為 #fff
灌砖。 您甚至可以使用它來設(shè)置 rgba()
顏色璧函，您傳遞的第一個(gè)數(shù)字會(huì)重復(fù)三次，第二個(gè)用來作為 alpha
值基显，如 rgba (0蘸吓，0.5)
將成為 rgba (0，0撩幽，0美澳，0.5)
。
添加下面的到 src/style.css
文件來試一下上面所說的：
.short_colors { color: #23; background: #f; border-color: rgba(0, 0.5);}
編譯之后，你看到的所有顏色值都按其完整形式輸出：
.short_colors { color: #232323; background: #fff; border-color: rgba(0, 0, 0, 0.5);}
有關(guān)于 postcss-color-short
更詳細(xì)的信息制跟，可以點(diǎn)擊 這里查閱 舅桩。
總結(jié)一下
讓我們快速回顧一下在本教程中已經(jīng)談過的一切:
每天的編寫的小代碼看似獨(dú)立，但是把它們加起來也會(huì)變的非常龐大雨膨，所以把它們進(jìn)行簡(jiǎn)化編寫是非常有意義的擂涛。
postcss-alias
插件可以創(chuàng)建自定義的簡(jiǎn)寫屬性
postcss-crip
插件有數(shù)百個(gè)預(yù)定義的屬性簡(jiǎn)寫
postcss-font-magician
可以像使用默認(rèn)字體來使用自定義字體，自動(dòng)生成 @font-face
代碼
postcss-circle
和 postcss-triangle
插件可以直接地直觀地創(chuàng)建圓和三角形
postcss-all-link-colors
插件可以一次輸出所有鏈接狀態(tài)的顏色
postcss-center
插件提供了使用 top: center;
和 left: center;
實(shí)現(xiàn)垂直和水平居中
postcss-clearfix
插件使用 clear: fix;
輸出代碼清除浮動(dòng)樣式
postcss-position
插件允許你同一行添加 top
, right
, bottom
和 left
作為 position
屬性的值
postcss-size
插件允許你一次性設(shè)置寬度和高度
postcss-verthorz
插件允許你使用使用單一規(guī)則輸出水平間距和垂直間距聊记。
postcss-color-short
插件使您能夠使用一至兩位數(shù)實(shí)現(xiàn)十六進(jìn)制編碼和其他顏色寫法的簡(jiǎn)寫撒妈。
