CSS ساختار بسیار ساده‌ای دارد و همین سادگی باعث شده است که تعریف ساختار منطقی و منظم برای آن سخت باشد. در پروژه های بزرگ اغلب طراحان واسط کاربری برای یک دست کردن کد خود و همکاری تیمی با مشکل مواجه می‌شدند. در همین زمان افرادی سعی کردند با تعریف کردن ساختاری برای CSS شرایط را برای تعریف ساختار در آن تعریف کنند ولی این کافی نبود. سپس برنامه نویسان توانستند با ارائه بسته‌های نرم افزاری همچون LESS و Sass برخی از کاستی‌های CSS را برطرف کنند. اکنون PostCSS به عنوان ابزاری جدید بعد از LESS و Sass آمده است که امکانات بسیار بیشتری را در اختیار طراحان اینترفیس قرار دهد تا آنها بتوانند ساختار منظم تری برای پروژه‌های کوچک و بزرگ خود تعریف کنند.

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

2. ‫عبدالعلی‬ ‫امیرعباس‬
‫کاربری‬ ‫واسط‬ ‫طراح‬
Twitter: @amir_abbas

3. ‫کنیم‬‫می‬ ‫ح‬‫مطر‬ ‫را‬ ‫مباحثی‬ ‫چه‬
•PostCSS‫چیست؟‬
•‫دارد؟‬ ‫اهمیت‬ ‫آن‬ ‫از‬ ‫استفاده‬ ‫چرا‬
•‫دارد‬ ‫وجود‬ ‫آن‬ ‫برای‬ ‫مفیدی‬ ‫های‬‫پالگین‬ ‫چه‬

4. PostCSS‫چیست؟‬

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

6. ‫از‬ ‫بیش‬۲‫ماه‬ ‫در‬ ‫دانلود‬ ‫میلیون‬

8. ‫درباره‬PostCSS‫دارد‬ ‫وجود‬ ‫غلطی‬ ‫تفکرات‬ ‫چه‬
•‫کنه‬‫می‬ ‫تر‬ ‫سخت‬ ‫رو‬ ‫کارمون‬ ‫کردن‬ ‫تر‬‫ساده‬ ‫جای‬ ‫به‬ ‫که‬ ‫جدیده‬ ‫دکوری‬ ‫ابزار‬ ‫یک‬ ‫هم‬ ‫این‬
•‫همون‬Sass/LESS‫کافیه‬!‫چیکار‬ ‫خوام‬ ‫می‬ ‫اینو‬
•‫باید‬ ‫کنیم‬ ‫استفاده‬ ‫این‬ ‫از‬ ‫بخوایم‬ ‫اگر‬Sass‫یا‬LESS‫بذاریم‬ ‫کنار‬ ‫رو‬.‫نداریم‬ ‫وقت‬

9. ‫شدم‬ ‫خسته‬(:‫بگیرم‬ ‫یاد‬ ‫چقدر‬!

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

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

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

13. Preprocessor+
‫سریعتر‬

15. Preprocessor+
‫سریعتر‬
‫ماژوالر‬
‫قدرتمندتر‬

16. Postprocessor?

17. PostCSS‫کند‬‫می‬ ‫کار‬ ‫چطور‬
sass/less/stylus → preprocessors → CSS
CSS → plugin + plugin + plugin → CSS

19. postcss( no plugins )
input == output

20. 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'));
});

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

22. 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

23. PreCSS
Conditions
Loops
Mixins
Extends
Imports
https://github.com/jonathantneal/precss

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

25. ‫که‬ ‫رو‬ ‫اینا‬ ‫همه‬ ‫مارو؟‬ ‫گرفتی‬Sass‫داره‬!!

26. 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%}

27. autoprefixer
a {
display: flex;
}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
https://github.com/postcss/autoprefixer

28. 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

29. 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.Mic
rosoft.gradient(startColorstr='
#4c701a00',
endColorstr='#4c701a00');
}
https://github.com/cssdream/cssgrace
:root .foo:after {
filter: none9;
}
.bar {
display: inline-block;
*display: inline;
*zoom: 1;
opacity: .5;
filter:
alpha(opacity=50);
}

30. ‫دیگر‬ ‫های‬ ‫پالگین‬
postcss-grid
perfectionist
doiuse
stylelint

31. ‫کنیم؟‬ ‫پیدا‬ ‫پالگین‬ ‫کجا‬ ‫از‬
http://postcss.parts/

32. ‫با‬ ‫همزمان‬ ‫استفاده‬ ‫امکان‬LESS/Sass
LESS/Sass → preprocessor → plugin + plugin + plugin → CSS