Mais conteúdo relacionado Semelhante a PostCSS، آینده CSS بعد از LESS و Sass (17) Mais de Web Standards School (20) PostCSS، آینده CSS بعد از LESS و Sass3. کنیممی حمطر را مباحثی چه
•PostCSSچیست؟
•دارد؟ اهمیت آن از استفاده چرا
•دارد وجود آن برای مفیدی هایپالگین چه
8. دربارهPostCSSدارد وجود غلطی تفکرات چه
•کنهمی تر سخت رو کارمون کردن ترساده جای به که جدیده دکوری ابزار یک هم این
•همونSass/LESSکافیه!چیکار خوام می اینو
•باید کنیم استفاده این از بخوایم اگرSassیاLESSبذاریم کنار رو.نداریم وقت
11. مشکالتCSS
•منسجم ساختار وجود عدم
•مانند هایی قابلیت وجود عدمvariable, functionوmixin
•کد تکرار از جلوگیری برای مناسب راهکار عدم
•سخت نگهداری
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'));
});
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
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;
}
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%}
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);
}