PostCSS Deep Dive: Pintasan (Shortcuts) dan Tulisan Cepat (Shorthand)

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Sejauh ini kami telah menggunakan PostCSS untuk melakukan hal-hal seperti mengoptimalkan stylesheet, menambahkan fungsionalitas untuk preprocessing, dan menghasilkan konvensi penamaan kelas tertentu, tetapi bagaimana itu dapat membantu hanya pada penulisan di CSS versi biasa lama?

Ada begitu banyak potongan kode yang rata-rata dimiliki oleh perancang web rata-rata ribuan kali sepanjang perjalanan karier mereka, dan jika anda bisa kembali memutar waktu pada masing-masing itu, mungkin akan banyak membantu pada akhirnya.

Dalam tutorial ini, kami akan menggunakan PostCSS untuk mengurangi waktu mengetik kode setiap hari melalui serangkaian pintas(shortcuts) dan penambahan singkatan(shorthand ). Mari Kita Mulai!

Siapkan Proyek Anda

Anda akan terbiasa dengan proses ini sekarang, tetapi hal pertama yang harus anda lakukan adalah menyiapkan proyek anda untuk menggunakan Gulp atau Grunt. Jika anda belum memiliki preferensi untuk satu atau yang lain, saya sarankan untuk menggunakan Gulp karena anda akan membutuhkan lebih sedikit kode untuk mencapai tujuan yang sama, jadi anda akan merasa lebih mudah untuk menggunakannya.

Anda dapat membaca tentang bagaimana untuk setup Glup atau Grunt proyek untuk PostCSS dalam tutorial sebelumnya

masing-masing.

Jika anda tidak ingin secara manual mengatur proyek anda dari awal, anda dapat mengunduh file sumber yang dilampirkan pada tutorial ini, dan ekstrak proyek starter Gulp atau Grunt yang tersedia ke dalam folder proyek kosong. Kemudian dengan terminal atau command prompt menunjuk folder menjalankan perintah npm install.

Menginstal plugin

Untuk tutorial ini, kami akan memasang beberapa plugin, masing-masing menangani jenis pintasan (shortcut) atau singkatan(shorthand) yang berbeda.

Apakah anda menggunakan Gulp atau Grunt, jalankan perintah berikut di dalam folder proyek untuk menginstal plugin kita akan menggunakan:

npm install postcss-alias postcss-crip postcss-font-magician postcss-triangle postcss-circle postcss-all-link-colors postcss-center postcss-clearfix postcss-position postcss-size postcss-verthorz postcss-color-short --save-dev

Sekarang kita siap untuk memuat plugin ke proyek Anda.

Memuat Plugins via Gulp

Jika Anda menggunakan Gulp, tambahkan variabel ini di bawah variabel yang sudah di dalam file:

var alias = require('postcss-alias');
var crip = require('postcss-crip');
var magician = require('postcss-font-magician');
var triangle = require('postcss-triangle');
var circle = require('postcss-circle');
var linkColors = require('postcss-all-link-colors');
var center = require('postcss-center');
var clearfix = require('postcss-clearfix');
var position = require('postcss-position');
var size = require('postcss-size');
var verthorz = require('postcss-verthorz');
var colorShort = require('postcss-color-short');

Sekarang tambahkan masing-masing nama variabel yang baru ke dalam array prosesor anda:

  var processors = [
      alias,
		crip,
		magician,
		triangle,
		circle,
		linkColors,
		center,
		clearfix,
		position,
		size,
		verthorz,
		colorShort
  ];

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah gulp css kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek anda di folder "dest" .

Memuat plugin via Grunt

Jika Anda menggunakan Grunt, memperbarui objek prosesor, yang bersarang di bawah options objek, sebagai berikut:

        processors: [
          require('postcss-alias')(),
          require('postcss-crip')(),
          require('postcss-font-magician')(),
          require('postcss-triangle')(),
          require('postcss-circle')(),
          require('postcss-all-link-colors')(),
          require('postcss-center')(),
          require('postcss-clearfix')(),
          require('postcss-position')(),
          require('postcss-size')(),
          require('postcss-verthorz')(),
          require('postcss-color-short')()
        ]

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah grunt postcss kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek Anda "dest" folder.

Baiklah, sekarang plugin Anda adalah semua diinstal Mari kita belajar bagaimana menggunakannya untuk CSS pintas dan singkatan.

Gunakan Shorthand(tulisan cepat) untuk properti

Ada banyak properti yang harus kita ketikkan berulang-ulang dalam CSS. Tentu, waktu yang diperlukan untuk mengetik beberapa karakter sekali sangat kecil, tetapi selama bertahun-tahun pembangunan itu semua bertambah. Kami akan melihat di sini pada dua plugin yang memungkinkan Anda memangkas properti tersebut ke versi singkat(shorthand ) untuk Anda bisa mendapatkan aliran yang cepat dan lancar saat Anda menuntaskan CSS Anda.

Tentukan Shorthand(Singkatan) Anda Sendiri

Postcss-alias plugin oleh Sean King memungkinkan Anda untuk menentukan shorthand (singkatan) Anda sendiri, atau "alias", untuk setiap properti yang ingin di singkat. Ini memberi Anda cara untuk memastikan bahwa shorthand (singkatan) yang Anda gunakan sesuai dengan pola pikir Anda dalam bekerja dan karenanya mudah bagi Anda untuk mengingatnya.

Untuk menentukan beberapa alias menambahkan at-rule di bagian atas stylesheet Anda dengan sintaks @alias {...}. Kemudian di dalam at-rule setup alias Anda dengan menambahkan alias-name: property-name;

Tambahkan contoh berikut ke Anda “src/style.css” file, yang akan mengatur alias untuk border-size, border-style, dan properti border-color:

@alias {
    bsz: border-size;
	bst: border-style;
	bcl: border-color;
}

Kemudian tambahkan kode ini untuk menguji menggunakan alias baru:

.set_border {
    bsz: 1px;
	bst: solid;
	bcl: #ccc;
}

Kompilasi(Compile) file Anda, dan di file Anda “dest/style.css” file yang sekarang harus Anda lihat:

.set_border {
    border-size: 1px;
	border-style: solid;
	border-color: #ccc;
}

Baca lebih lanjut tentang postcss-alias di: https://github.com/seaneking/postcss-alias

Plug 'n' mainkan Shorthand (singkatan)

Jika Anda ingin menggunakan banyak shorthands properti, tetapi Anda tidak ingin melalui langkah-langkah mendefinisikan masing-masing sendiri, Anda dapat memeriksa plugin postcss-crip oleh Johnie Hjelm yang memiliki ratusan singkatan properti siap untuk plugin dan bermain digunakan.

Misalnya, tambahkan kode berikut ke “src / style.css” Anda file, yang berisi shorthand (singkatan) untuk properti margin-top, margin-right, margin-bottom, dan margin-left:

.crip_shorthand {
    mt: 1rem;
	mr: 2rem;
	mb: 3rem;
	ml: 4rem;
}

Kompilasi kode Anda dan Anda akan melihat properti yang diperluas muncul di 'dest / style.css' Anda file:

.crip_shorthand {
    margin-top: 1rem;
	margin-right: 2rem;
	margin-bottom: 3rem;
	margin-left: 4rem;
}

Baca lebih lanjut tentang postcss-crip di: https://github.com/johnie/postcss-crip

Dan melihat daftar lengkap singkatan properti di: https://github.com/johnie/crip-css-properties

Output @font-face dalam satu baris

Plugin posts-font-magician oleh Jonathan Neal sangat sesuai dengan namanya. Ini memungkinkan Anda untuk menggunakan font kustom melalui aturan font-family yang sederhana seolah-olah Anda menggunakan font standar, dan font akan bekerja secara ajaib.

Tambahkan kode berikut ke "src/style.css" Anda file:

1	body {
2	font-family: "Indie Flower";
3	}

Itu dia. Hanya itu yang dibutuhkan untuk memanfaatkan post-font-magician. Tidak ada sintaks khusus, cukup gunakan nama font seperti yang Anda lakukan lainnya.

Dalam hal ini, font Indie Flower adalah font yang saya pilih dari pustaka Google Fonts. Saya belum menambahkan file font kustom apa pun ke proyek saya, sehingga plugin akan melihat itu dan sebagai gantinya pergi periksa untuk melihat apakah font yang saya tentukan tersedia dari Google Fonts. Ketika menemukan bahwa itu tersedia, itu akan membuat kode @font-face yang tepat sepenuhnya otomatis.

Kompile file Anda kemudian lihat “dest/style.css” Anda file, di mana Anda akan melihat kode ini telah ditambahkan di:

@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");
}

Anda dapat memeriksa apakah font dimuat dengan benar dengan membuat file baru di folder “dest” Anda bernama “index.html” dan menambahkan kode ini ke dalamnya:

<!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>

Agar font dimuat, Anda harus melihat file ini melalui alamat https: //, bukan file: // address, jadi unggah file ke host web atau gunakan aplikasi seperti Prepros untuk membuat pratinjau langsung .

Anda harus melihat font Indie Flower yang diterapkan ke semua teks Anda, seperti:

Baca lebih lanjut tentang postcss-font-penyihir di sini: https://github.com/jonathantneal/postcss-font-magician

Buat Bentuk CSS

Jika Anda pernah menggunakan CSS murni untuk membuat bentuk, Anda akan tahu itu dapat menjadi cara yang bagus untuk memasukkan hal-hal seperti lingkaran dan segitiga ke dalam desain Anda, tetapi itu juga bisa sangat rumit. Khususnya dalam kasus segitiga, mencari tahu apa kode yang Anda butuhkan untuk mendapatkan bentuk yang berorientasi pada arah yang benar pada ukuran yang tepat dapat terasa agak kontra intuitif.

Di situlah plugin postcss-circle dan postcss-triangle oleh Jed Mao datang untuk menyelamatkan. Kedua plugin membuat sintaks yang disederhanakan, dan cara intuitif untuk membuat lingkaran dan segitiga dengan CSS murni.

Tambahkan Lingkaran

Untuk membuat lingkaran, gunakan lingkaran sintaks circle: size color;. Tambahkan kode berikut ke "src/style.css" Anda file:

1	.circle {
2	circle: 8rem #c00;
3	}

Kompilasi dan Anda akan melihat kode berikut yang ditambahkan ke "dest/style.css" Anda file:

.circle {
    border-radius: 50%;
	width: 8rem;
	height: 8rem;
	background-color: #c00;
}

Sekarang menambahkan HTML ini untuk "dest/index.html" file yang Anda buat di bagian terakhir:

1	<div class="circle"></div>

Lihatlah tampilan baru di file Anda di browser dan Anda seharusnya sekarang melihat lingkaran merah:

Baca lebih lanjut tentang postcss-lingkaran di: https://github.com/jedmao/postcss-circle

Menambahkan sebuah segitiga

Ada tiga jenis segitiga yang dapat Anda tambahkan menggunakan plugin ini; sama kaki, kanan-sama kaki dan sama sisi. Masing-masing memiliki sintaks yang sedikit berbeda, yang dapat Anda baca sepenuhnya di repositori Github plugin.

Kita akan membahas penambahan segitiga sama kaki, sintaksnya adalah:

1	triangle: pointing-<up\|down\|left\|right>;
2	width: <length>;
3	height: <length>;
4	background-color: <color>;

Mari tambahkan contoh ini sama kaki segitiga ke “src/style.css” kita file:

.isosceles-triangle {
    triangle: pointing-right;
	width: 7rem;
	height: 8rem;
	background-color: #c00;
}

Kompile file dan Anda sekarang harus melihat CSS segitiga lengkap di “dest/style.css” Anda file:

.isosceles-triangle {
    width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 4rem 0 4rem 7rem;
	border-left-color: #c00;
}

Untuk melihat segitiga di “dest/index.html” Anda file tambahkan html ini:

1	<div class="isosceles-triangle"></div>

Pada menyegarkan file ini di browser Anda, Anda sekarang harus melihat segitiga merah sama kaki menunjuk ke kanan:

Baca lebih lanjut tentang postcss-segitiga di: https://github.com/jedmao/postcss-triangle

Gunakan Pintasan untuk Tugas Umum

Setel Styling Tautan

Mengatur warna untuk tautan adalah pekerjaan yang harus dilakukan di setiap proyek, dan membutuhkan pengaturan gaya untuk tautan default serta empat status tautan yang berbeda. Plugin posts-all-link-colors oleh Jed Mao memungkinkan Anda memintas proses itu, menghasilkan warna untuk semua tautan Anda sekaligus.

Tambahkan yang berikut ini ke “src / style.css” Anda:

1	a {
2	@link-colors all #4D9ACC;
3	}

Kemudian kompilasi file Anda dan Anda akan melihat semua status tautan yang diperlukan telah ditetapkan:

a {
    color: #4D9ACC;
}

a:visited {
	color: #4D9ACC;
}

a:focus {
	color: #4D9ACC;
}

a:hover {
	color: #4D9ACC;
}

a:active {
	color: #4D9ACC;
}

Anda juga memiliki opsi untuk menghasilkan warna yang berbeda untuk keadaan tertentu. Cukup tambahkan beberapa tanda kurung kurawal pada akhir aturan, dan di dalam yang menggunakan state: color;.

Perbarui kode yang baru saja Anda tambahkan ke “src / style.css” Anda file berikut:

a {
    @link-colors all #4D9ACC {
		hover: #5BB8F4;
	}
}

Sekarang ketika Anda menyusun, Anda akan melihat negara mengambang memiliki warna yang berbeda dengan gaya lainnya:

a {
    color: #4D9ACC
}

a:visited {
	color: #4D9ACC;
}

a:focus {
	color: #4D9ACC;
}

a:hover {
	color: #5BB8F4;
}

a:active {
	color: #4D9ACC;
}

Baca lebih lanjut tentang postcss-semua-link-warna di: https://github.com/jedmao/postcss-all-link-colors

Pusat secara vertikal maupun horizontal

Pemusatan, baik secara vertikal maupun horizontal, adalah salah satu tugas yang merupakan duri abadi di sisi pengembang CSS. Plugin postcss-center Jed Mao membuat tugas jauh lebih sederhana dengan memperkenalkan top: center; untuk pemusatan vertikal, dan left: center; untuk pemusatan horizontal.

Tambahkan kode ini ke “src/style.css” Anda file:

1	.centered {
2	top: center;
3	left: center;
4	}

Kemudian kompilasi dan Anda akan melihat kode berikut:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

Catatan: pemusatan menggunakan pemosisian mutlak, jadi Anda perlu membungkus elemen terpusat Anda dengan orang tua yang menggunakan posisi relatif, absolut, atau tetap. Dengan elemen yang benar-benar diposisikan tidak memengaruhi tinggi atau lebar orang tua mereka, Anda juga sebaiknya menetapkan tinggi dan lebar elemen induk yang sesuai.

Misalnya, tambahkan left: center; ke .circle kelas Anda buat sebelumnya sehingga ia akan berpusat pada horizontal :

1	.circle {
2	circle: 8rem #c00;
3	left: center;
4	}

Kemudian tambahkan kelas kedua ini untuk bertindak sebagai pembungkus di sekitar lingkaran, memberikannya posisi relatif dan ketinggian yang cocok dengan lingkaran:

1	.circle_wrap {
2	position: relative;
3	height: 8rem;
4	}

Sekarang tambahkan elemen yang mengandung kelas ini sebagai pembungkus di sekitar lingkaran html Anda yang ada:

1	<div class="circle_wrap">
2	<div class="circle"></div>
3	</div>

Ketika Anda kembali dan menyegarkan halaman Anda, Anda harus melihat lingkaran Anda telah terpusat secara horizontal:

Baca lebih lanjut tentang postcss-center di: https://github.com/jedmao/postcss-center

Keluaran Clearfix dalam Satu Baris

Dalam desain apa pun yang menyertakan pelampung, membuat kelas clearfix sangat berguna sehingga sangat penting. Plugin postccs-clearfix Sean King mengubah gaya styling clearfix menjadi pekerjaan satu baris, dengan menambahkan fix sebagai nilai yang mungkin yang dapat digunakan dengan properti clear.

Untuk clearfix yang akan bekerja pada IE8 tambahkan berikut ini ke “src/style.css” Anda file:

1	.clearfixed {
2	clear: fix;
3	}

Saat dikompilasi, Anda akan melihatnya telah menghasilkan kode clearfix berikut, siap digunakan:

.clearfixed:after {
    content: '';
	display: table;
	clear: both;
}

Jika Anda memerlukan clearfix yang akan bekerja pada IE6+, gunakan nilai fix-legacy alih-alih fix biasa, seperti:

1	.clearfixed_legacy {
2	clear: fix-legacy;
3	}

Saat kode ini dikompilasi, Anda akan melihatnya menyertakan sedikit konten tambahan yang membuatnya ramah untuk browser lawas:

.clearfixed_legacy:before,
.clearfixed_legacy:after {
    content: '';
	display: table;
}

.clearfixed_legacy:after {
	clear: both;
}

.clearfixed_legacy {
  zoom: 1;
}

Baca lebih lanjut tentang postcss-clearfix di: https://github.com/seaneking/postcss-clearfix

Atur Pemosisian dalam Satu Baris

Saat Anda ingin menggunakan bukan posisi default, yaitu absolute, fixed atau relative, Anda harus mengetikkan nilai untuk posisi top, right, bottom, dan left elemen secara manual. Tidak ada singkatan yang mungkin Anda gunakan saat mengatur margin atau padding dalam satu baris. Yaitu, sampai Anda menginstal plugin postcss-position Sean King.

Dengan plugin ini, ketika menggunakan properti position, setelah menetapkan nilai absolute / fixed / relative, Anda dapat mendeklarasikan nilai top, right, bottom dan left pada baris yang sama.

Tambahkan kode contoh berikut ke “src / style.css” Anda file:

1	.absolute {
2	position: absolute 1rem 1rem 0 0;
3	}

Setelah kompilasi, Anda akan melihat tulisan cepat telah dikompilasi ke dalam baris terpisah yang biasanya harus Anda ketik secara manual.

.absolute {
    position: absolute;
	top: 1rem;
	right: 1rem;
	bottom: 0;
	left: 0;
}

Cara nilai-nilai ini dideklarasikan adalah dengan pola yang sama seperti di margin atau padding shorthand, yaitu Anda juga dapat mengatur atas dan bawah di nilai pertama, kemudian ke kanan dan kiri di detik, atau Anda dapat menetapkan satu nilai untuk diterapkan ke keempat .

Misalnya, coba kode berikut:

.fixed_two_values {
    position: fixed 2rem 1rem;
}

.relative_one_value {
	position: relative 3rem;
}

Anda harus melihatnya mengkompilasi ke:

.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;
}

Baca lebih lanjut tentang postcss-posisi di: https://github.com/seaneking/postcss-position

Atur Lebar(Width) dan Tinggi(Height) Sekaligus

Plugin postcss-size oleh Andrey Sitnik memungkinkan Anda untuk mengecilkan properti width (lebar) dan height (tinggi) yang sering digunakan ke dalam satu size (ukuran) properti. Anda dapat menggunakannya dalam dua cara: memberikan dua nilai dengan evaluasi pertama untuk lebar dan yang kedua ke tinggi, atau meneruskan satu nilai yang akan digunakan untuk width (lebar) dan height (tinggi).

Uji ini dengan menambahkan CSS berikut ke “src/style.css” Anda file:

.size_a {
    size: 1rem 2rem;
}

.size_b {
    size: 1rem;
}

Pada kompilasi, Anda seharusnya melihat kode ini sekarang di “dest / style.css” Anda file:

.size_a {
    width: 1rem;
	height: 2rem;
}

.size_b {
    width: 1rem;
    height: 1rem;
}

Baca lebih lanjut tentang postcss-ukuran: https://github.com/postcss/postcss-size

Atur Jarak Vertikal dan Horisontal

Sebagai penggemar besar pengkodean yang efisien, ketika menulis margin dan padding, yang sering sama di dua sisi, saya sering menemukan diri saya berharap ada pintas untuk menyatakan jarak vertikal dan horizontal sekaligus. Saya bahkan menulis beberapa campuran preprocessor untuk melakukan hal itu. Tetapi saya tidak perlu lagi mixin tersebut berkat plugin postcss verthorz oleh David Hemphill.

Dengan plugin ini Anda dapat menggunakan padding-vert atau margin-vert untuk mengatur jarak vertikal, dan padding-horz atau margin-horz untuk mengatur jarak horizontal. Tambahkan kode contoh berikut ke “src / style.css” Anda file untuk melihat ini berfungsi:

1	.spacing {
2	padding-vert: 1rem;
3	margin-horz: 2rem;
4	}

Setelah kompilasi, Anda akan melihat aturan ini telah diperluas menjadi deklarasi penuh padding dan margin.

.spacing {
    padding-top: 1rem;
	padding-bottom: 1rem;
	margin-left: 2rem;
	margin-right: 2rem;
}

Anda juga dapat memintas properti ini lebih jauh dengan menyingkatnya menjadi dua huruf. Kode contoh yang digunakan di atas dapat disingkat berikut dan hasilnya akan sama persis:

1	.spacing_short {
2	pv: 1rem;
3	mh: 2rem;
4	}

Baca lebih lanjut tentang postcss-verthorz di: https://github.com/davidhemphill/postcss-verthorz

Output Kode Warna

Warna teks default favorit saya adalah #232323 dan saya tidak tahu apakah itu hanya saya, tapi saya bosan memalu dua digit yang sama berulang kali. Aku sering berharap ada jalan pintas, mirip dengan cara yang Anda dapat memangkas #ffffff ke #fff. Dengan plugin postcss-color-short oleh Andrey Polischuk, ada.

Saat menggunakan plugin ini, jika Anda menetapkan kode warna dua digit, digit tersebut akan diulang hingga kode enam digit dibuat, mis. #23 akan menjadi #232323. Jika Anda menetapkan kode warna satu digit, kode itu akan diulang hingga ada tiga digit, mis. #f akan menjadi #fff. Anda bahkan dapat menggunakannya untuk mengatur warna rgba(), mana digit pertama Anda melewati akan diulang tiga kali, dan yang kedua digunakan sebagai nilai alpha, misalnya rgba (0, 0,5) akan menjadi rgba (0 0 0, 0,5).

Tambahkan yang berikut ini ke 'src / style.css' Anda file untuk mencoba semua hal di atas:

.short_colors {
    color: #23;
	background: #f;
	border-color: rgba(0, 0.5);
}

Setelah kompilasi, Anda akan melihat semua warna telah output dalam bentuk penuh mereka:

.short_colors {
    color: #232323;
	background: #fff;
	border-color: rgba(0, 0, 0, 0.5);
}

Baca lebih lanjut tentang postcss-warna-pendek di: https://github.com/andrepolischuk/postcss-color-short

Menyimpulkan

Mari kita susun ulang semua yang telah kami bahas dalam tutorial ini:

Kecil setiap hari tugas pengkodean tidak tampak seperti individual, tetapi mereka menambahkan hingga sejumlah besar waktu secara keseluruhan, sehingga memintasnya dapat bermanfaat
Plugin postcss-alias memungkinkan Anda membuat singkatan untuk properti
Plugin postcss-crip memiliki ratusan shorthands properti standar
The postcss-font-magician memungkinkan Anda menggunakan font kustom seolah-olah mereka font default, auto generate @font-face code untuk Anda
Plugin postcross dan postcss-triangle membuat lingkaran CSS dan segitiga lurus ke depan dan intuitif
Plugin posts-all-link-colors memungkinkan Anda menampilkan warna untuk semua status tautan Anda sekaligus
Plugin postcss-center menyediakan pemusatan vertikal dan horizontal dengan top: center; dan left: center;
Plugin postfixs-clearfix memungkinkan Anda menampilkan kode clearfix dengan clear: fix;
Plugin postcss-position memungkinkan Anda untuk menambahkan pengaturan top, right, bottom, dan left sebagai bagian dari penggunaan properti position Anda
Plugin postcss-size memungkinkan Anda mengatur lebar dan tinggi sekaligus
Plugin Postcss-verthorz memungkinkan penentuan spasi horisontal dan vertikal penjarangan menjadi output dengan satu aturan.
Plugin postcss-color-short memberi Anda kemampuan untuk menggunakan satu dan dua digit hexcodes, dan shortcut warna lainnya.

Di Tutorial Berikutnya

Dalam tutorial berikutnya, kami akan beralih ke pengaya yang hebat, tetapi tidak termasuk dalam kategori tertentu. Saya akan segera melihat Anda di "Miscellaneous Goodies".