Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

571 views

Published on

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

Published in: Education
  • Be the first to comment

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

  1. 1. ‫عبدالعلی‬ ‫امیرعباس‬ PostCSS‫ی‬‫آینده‬ ،CSS‫از‬ ‫بعد‬LESS‫و‬Sass
  2. 2. ‫عبدالعلی‬ ‫امیرعباس‬ ‫کاربری‬ ‫واسط‬ ‫طراح‬ Twitter: @amir_abbas
  3. 3. ‫کنیم‬‫می‬ ‫ح‬‫مطر‬ ‫را‬ ‫مباحثی‬ ‫چه‬ •PostCSS‫چیست؟‬ •‫دارد؟‬ ‫اهمیت‬ ‫آن‬ ‫از‬ ‫استفاده‬ ‫چرا‬ •‫دارد‬ ‫وجود‬ ‫آن‬ ‫برای‬ ‫مفیدی‬ ‫های‬‫پالگین‬ ‫چه‬
  4. 4. PostCSS‫چیست؟‬
  5. 5. PostCSS‫ابزاری‬‫از‬ ‫استفاده‬ ‫با‬ ‫که‬ ‫است‬ ‫جاواسکریپت‬،‫فایل‬CSS‫را‬‫دهد‬‫می‬ ‫تغییر‬.
  6. 6. ‫از‬ ‫بیش‬۲‫ماه‬ ‫در‬ ‫دانلود‬ ‫میلیون‬
  7. 7. ‫درباره‬PostCSS‫دارد‬ ‫وجود‬ ‫غلطی‬ ‫تفکرات‬ ‫چه‬ •‫کنه‬‫می‬ ‫تر‬ ‫سخت‬ ‫رو‬ ‫کارمون‬ ‫کردن‬ ‫تر‬‫ساده‬ ‫جای‬ ‫به‬ ‫که‬ ‫جدیده‬ ‫دکوری‬ ‫ابزار‬ ‫یک‬ ‫هم‬ ‫این‬ •‫همون‬Sass/LESS‫کافیه‬!‫چیکار‬ ‫خوام‬ ‫می‬ ‫اینو‬ •‫باید‬ ‫کنیم‬ ‫استفاده‬ ‫این‬ ‫از‬ ‫بخوایم‬ ‫اگر‬Sass‫یا‬LESS‫بذاریم‬ ‫کنار‬ ‫رو‬.‫نداریم‬ ‫وقت‬
  8. 8. ‫شدم‬ ‫خسته‬(:‫بگیرم‬ ‫یاد‬ ‫چقدر‬!
  9. 9. ‫از‬ ‫باید‬ ‫چرا‬PostCSS‫کنیم؟‬ ‫استفاده‬
  10. 10. ‫مشکالت‬CSS •‫منسجم‬ ‫ساختار‬ ‫وجود‬ ‫عدم‬ •‫مانند‬ ‫هایی‬ ‫قابلیت‬ ‫وجود‬ ‫عدم‬variable, function‫و‬mixin •‫کد‬ ‫تکرار‬ ‫از‬ ‫جلوگیری‬ ‫برای‬ ‫مناسب‬ ‫راهکار‬ ‫عدم‬ •‫سخت‬ ‫نگهداری‬
  11. 11. ‫مشکالت‬preprocessor‫ها‬ •Preprocessor‫هستند‬ ‫کند‬ ‫گاها‬ ‫و‬ ‫بزرگ‬ ،‫حجیم‬ ‫ها‬ •‫همچون‬ ‫دیگری‬ ‫های‬‫زبان‬ ‫دانستن‬ ‫به‬ ‫نیاز‬ ‫آنها‬ ‫برای‬ ‫پالگین‬ ‫نوشتن‬ruby‫است‬ •‫همانند‬ ‫ها‬‫ویژگی‬ ‫برخی‬linting‫نیست‬ ‫دسترس‬ ‫در‬ ‫مناسبی‬ ‫شکل‬ ‫به‬ ‫آنها‬ ‫در‬
  12. 12. Preprocessor+ ‫سریعتر‬
  13. 13. Preprocessor+ ‫سریعتر‬ ‫ماژوالر‬ ‫قدرتمندتر‬
  14. 14. Postprocessor?
  15. 15. PostCSS‫کند‬‫می‬ ‫کار‬ ‫چطور‬ sass/less/stylus → preprocessors → CSS CSS → plugin + plugin + plugin → CSS
  16. 16. postcss( no plugins ) input == output
  17. 17. 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')); });
  18. 18. ‫برای‬ ‫مفیدی‬ ‫های‬‫پالگین‬ ‫چه‬PostCSS‫دارد‬ ‫وجود‬
  19. 19. 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
  20. 20. PreCSS Conditions Loops Mixins Extends Imports https://github.com/jonathantneal/precss
  21. 21. 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; }
  22. 22. ‫که‬ ‫رو‬ ‫اینا‬ ‫همه‬ ‫مارو؟‬ ‫گرفتی‬Sass‫داره‬!!
  23. 23. 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%}
  24. 24. autoprefixer a { display: flex; } a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } https://github.com/postcss/autoprefixer
  25. 25. 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
  26. 26. 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); }
  27. 27. ‫دیگر‬ ‫های‬ ‫پالگین‬ postcss-grid perfectionist doiuse stylelint
  28. 28. ‫کنیم؟‬ ‫پیدا‬ ‫پالگین‬ ‫کجا‬ ‫از‬ http://postcss.parts/
  29. 29. ‫با‬ ‫همزمان‬ ‫استفاده‬ ‫امکان‬LESS/Sass LESS/Sass → preprocessor → plugin + plugin + plugin → CSS

×