امیرعباس عبدالعلی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