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

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

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

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

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

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

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

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

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

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

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

Preprocessor+
‫سریعتر‬

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

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
Conditions
Loops
Mixins
Extends
Imports
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 {
float: right;
padding-left: 30px;
}
div {
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.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);
}

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

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

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

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

More Related Content

Viewers also liked

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

More from Web Standards School

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