postcss، آینده css بعد از less و sass
TRANSCRIPT
![Page 1: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/1.jpg)
امیرعباس عبدالعلیPostCSS آینده ی ،CSS بعد از LESS و Sass
![Page 2: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/2.jpg)
امیرعباس عبدالعلی
طراح واسط کاربری
Twitter: @amir_abbas
![Page 3: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/3.jpg)
چه مباحثی را مطرح می کنیم
•PostCSSچیست؟ چرا استفاده از آن اهمیت دارد؟•چه پالگین های مفیدی برای آن وجود دارد•
![Page 4: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/4.jpg)
PostCSSچیست؟
![Page 5: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/5.jpg)
PostCSS ابزاری است که با استفاده از را تغییر می دهد.CSSجاواسکریپت، فایل
![Page 6: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/6.jpg)
میلیون دانلود در ماه۲بیش از
![Page 7: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/7.jpg)
![Page 8: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/8.jpg)
چه تفکرات غلطی وجود داردPostCSSدرباره
این هم یک ابزار دکوری جدیده که به جای ساده تر کردن کارمون رو سخت تر می کنه• کافیه! اینو می خوام چیکارSass/LESSهمون • رو کنار بذاریم. وقت نداریمLESS یا Sassاگر بخوایم از این استفاده کنیم باید •
![Page 9: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/9.jpg)
خسته شدم :) چقدر یاد بگیرم!
![Page 10: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/10.jpg)
استفاده کنیم؟PostCSSچرا باید از
![Page 11: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/11.jpg)
CSSمشکالت
عدم وجود ساختار منسجم•mixin و variable, functionعدم وجود قابلیت هایی مانند •عدم راهکار مناسب برای جلوگیری از تکرار کد•نگهداری سخت•
![Page 12: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/12.jpg)
هاpreprocessorمشکالت
•Preprocessorها حجیم، بزرگ و گاها کند هستند استrubyنوشتن پالگین برای آنها نیاز به دانستن زبان های دیگری همچون • در آنها به شکل مناسبی در دسترس نیستlintingبرخی ویژگی ها همانند •
![Page 13: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/13.jpg)
Preprocessor+سریعتر
![Page 14: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/14.jpg)
![Page 15: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/15.jpg)
Preprocessor+سریعتر
ماژوالر
قدرتمندتر
![Page 16: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/16.jpg)
Postprocessor?
![Page 17: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/17.jpg)
PostCSSچطور کار می کند
sass/less/stylus → preprocessors → CSS
CSS → plugin + plugin + plugin → CSS
![Page 18: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/18.jpg)
![Page 19: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/19.jpg)
postcss( no plugins )input == output
![Page 20: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/20.jpg)
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'));;)}
![Page 21: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/21.jpg)
وجود داردPostCSSچه پالگین های مفیدی برای
![Page 22: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/22.jpg)
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
![Page 23: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/23.jpg)
PreCSS
ConditionsLoops
MixinsExtendsImports
https://github.com/jonathantneal/precss
![Page 24: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/24.jpg)
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;}
![Page 25: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/25.jpg)
Sassگرفتی مارو؟ همه اینا رو که داره!!
![Page 26: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/26.jpg)
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%}
![Page 27: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/27.jpg)
autoprefixer
a { display: flex;}
a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}
https://github.com/postcss/autoprefixer
![Page 28: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/28.jpg)
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
![Page 29: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/29.jpg)
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);}
![Page 30: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/30.jpg)
پالگین های دیگر
postcss-gridperfectionist
doiusestylelint
![Page 31: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/31.jpg)
از کجا پالگین پیدا کنیم؟
http://postcss.parts/
![Page 32: PostCSS، آینده CSS بعد از LESS و Sass](https://reader034.vdocuments.net/reader034/viewer/2022042706/5885d31a1a28ab42028b6de7/html5/thumbnails/32.jpg)
LESS/Sassامکان استفاده همزمان با
LESS/Sass → preprocessor → plugin + plugin + plugin → CSS