PostCSS، آینده CSS بعد از LESS و Sass

امیرعباس عبدالعلیPostCSS آینده ی ،CSS بعد از LESS و Sass

امیرعباس عبدالعلی

طراح واسط کاربری

Twitter: @amir_abbas

چه مباحثی را مطرح می کنیم

•PostCSSچیست؟ چرا استفاده از آن اهمیت دارد؟•چه پالگین های مفیدی برای آن وجود دارد•

PostCSSچیست؟

PostCSS ابزاری است که با استفاده از را تغییر می دهد.CSSجاواسکریپت، فایل

میلیون دانلود در ماه۲بیش از

چه تفکرات غلطی وجود داردPostCSSدرباره

این هم یک ابزار دکوری جدیده که به جای ساده تر کردن کارمون رو سخت تر می کنه• کافیه! اینو می خوام چیکارSass/LESSهمون • رو کنار بذاریم. وقت نداریمLESS یا Sassاگر بخوایم از این استفاده کنیم باید •

خسته شدم :) چقدر یاد بگیرم!

استفاده کنیم؟PostCSSچرا باید از

CSSمشکالت

عدم وجود ساختار منسجم•mixin و variable, functionعدم وجود قابلیت هایی مانند •عدم راهکار مناسب برای جلوگیری از تکرار کد•نگهداری سخت•

هاpreprocessorمشکالت

•Preprocessorها حجیم، بزرگ و گاها کند هستند استrubyنوشتن پالگین برای آنها نیاز به دانستن زبان های دیگری همچون • در آنها به شکل مناسبی در دسترس نیستlintingبرخی ویژگی ها همانند •

Preprocessor+سریعتر

Preprocessor+سریعتر

ماژوالر

قدرتمندتر

Postprocessor?

PostCSSچطور کار می کند

sass/less/stylus  → preprocessors → CSS

CSS → plugin  + plugin + plugin → CSS

postcss( no plugins )input == output

var gulp = require('gulp');var postcss = require('gulp-postcss');var cssnext = require('postcss-cssnext');var precss = require('precss');

gulp.task('css', function{ )( var processors[ =

cssnext, precss

;]

return gulp.src('./development/postcss/*.css'). pipe(postcss(processors))

. pipe(gulp.dest('./development/css'));;)}

وجود داردPostCSSچه پالگین های مفیدی برای

PreCSS$blue: #056ef0;$column: 200px;

.menu { width: calc(4 * $column);}

.menu_link { background: $blue; width: $column;}

.menu { width: calc(4 * 200px);}

.menu_link { background: #056ef0; width: 200px;}

https://github.com/jonathantneal/precss

PreCSS

ConditionsLoops

MixinsExtendsImports

https://github.com/jonathantneal/precss

Postcss-nested.phone{

_ &title{ width: 500px;

@media (max-width: 500px){ width: auto;

} body.is_dark{ &

color: white;} }

img{ display: block;

} }

https://github.com/postcss/postcss-nested

.phone_title { width: 500px;}@media (max-width: 500px) { .phone_title { width: auto; }}body.is_dark .phone_title { color: white;}.phone img { display: block;}

Sassگرفتی مارو؟ همه اینا رو که داره!!

cssnano */normalize selectors/*

h1::before, h1:before{ */ reduce shorthand even further/*

margin: 10px 20px 10px 20px; */ reduce color values/*

color: #ff0000; */ drop outdated vendor prefixes/*

- webkit-border-radius: 16px; border-radius: 16px;

*/ remove duplicated properties/* font-weight: normal; font-weight: normal;

*/ reduce position values/* background-position: bottom right;

} */correct invalid placement/*

@charset "utf-8;"

http://cssnano.co/

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:16px;font-weight:normal;background-position:100% 100%}

autoprefixer

a { display: flex;}

a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}

https://github.com/postcss/autoprefixer

rtlcss

div { margin: 20px 10px 5px 40px; float: right; padding-left: 30px;}

div { margin: 20px 40px 5px 10px; float: left; padding-right: 30px;}

https://github.com/MohammadYounes/rtlcss

cssgrace.foo::after { position: center; width: 210px; height: 80px; background: rgba(112, 26, 0, .3);}

.bar { display: inline-block; opacity: .5;}

.foo:after { position: absolute; left: 50%; top: 50%; margin-left: -105px; margin-top: -40px; width: 210px; height: 80px; background: rgba(112, 26, 0, .3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c701a00', endColorstr='#4c701a00');}

https://github.com/cssdream/cssgrace

:root .foo:after { filter: none\9;}

.bar { display: inline-block; *display: inline; *zoom: 1; opacity: .5; filter: alpha(opacity=50);}

پالگین های دیگر

postcss-gridperfectionist

doiusestylelint

از کجا پالگین پیدا کنیم؟

http://postcss.parts/

LESS/Sassامکان استفاده همزمان با

LESS/Sass → preprocessor → plugin + plugin + plugin → CSS