�ݺ�ߣ

PostCSS
‫الیادرانی‬ ‫کدخدائی‬ ‫آرش‬
@slasharash kadkhodaei.ir
‫الرحیم‬ ‫الرحمن‬ ‫ا‬ ‫بسم‬
‫آپ‬‫اسکیل‬ ‫چهارم‬ ٔ‫ه‬‫جلس‬ ‫در‬ ‫ارائه‬

2
‫کاربری‬ ‫رابط‬ ‫شدن‬ ‫پیچیده‬
#main{
max-width: 1080px;
margin: 0px auto
}
.content{
background: #fff;
}
.block_content{
float: right;
}
.slider{
min-height: 430px;
border: 15px solid #eee;
}
::selection{
background-color:#494949;
color: #eee;
}
@keyframes toLeftFromRight{
49%{transform:translate(-45%)}
50{opacity:0;transform:translate(45%)}
51%{opacity:1}}
#club-section{
Width:100%;
margin:60px 0;
text-align:center;
border-style:solid;
color:#eee;
padding:40px 0;
background:url(/slideshow/introduction-to-postcss/images/club.png);
-webkit-animation:bgAnimate 25s infinite
linear;
-moz-animation:bgAnimate 25s infinite
linear;
-ms-animation:bgAnimate 25s infinite linear;
-o-animation:bgAnimate 25s infinite linear;
animation:bgAnimate 25s infinite linear
}
@media screen and (min-width:60em){
.ba-l {
border-style:solid;
border-width:1px
}
.bt-l{
border-top-style:solid;
border-top-width:1px
}
}

‫ابتدایی‬ ‫های‬‫روش‬ ‫با‬ ‫ها‬‫پیچیدگی‬ ‫مدیریت‬
Commenting: selectors, sections components
Naming Conventions: BEM, SUIT, ...

‫تازه‬ ‫های‬‫خلقایت‬ ‫برای‬ ‫تازه‬ ‫نیازهای‬
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
.link {
background-color: @nice-blue;
}
.cards {
width: percentage(@width);
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
VariablesImporting
Functions
Mixins
Scope
Nested Directives

‫ها�Ĭ�īپردازنده�Ĭ�īپیش�Ĭ

) ‫پردازنده‬‫پیش‬ ‫یک‬ ‫این‬SASS‫یا‬LESS.‫نیست‬ (
ٔ‫ه‬‫آیند‬ ‫سینکس‬ ‫این‬CSS.‫نیست‬
.‫نیست‬ ‫سازی‬‫فشرده‬ ‫و‬ ‫کد‬ ‫کردن‬ ‫تمیز‬ ‫برای‬ ‫ابزار‬ ‫یک‬ ‫این‬

‫سکوی‬PostCSS
‫افزونه‬‫افزونه‬‫افزونه‬‫افزونه‬

‫اس‬‫اس‬‫سی‬‫پست‬ ‫های‬‫افزونه‬ ‫کردن‬ ‫پیدا‬
PostCSS github repo
postcss.parts
PostCSS Twitter Account

‫اس‬‫اس‬‫سی‬‫پست‬ ‫مشهور‬ ‫های‬‫افزونه‬
PreCSS
@define-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-image:
url(/icons/$(name).png);
}
}
.search {
@mixin icon search;
}
.search {
padding-left: 16px;
}
.search::after {
content: "";
background-image:
url(/icons/search.png);
}

Autoprefixer
a {
display: flex;
}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

cssnano
h1::before, h1:before {
/* reduce shorthand even
further */
margin: 10px 20px 10px 20px;
/* reduce color values */
color: #ff0000;
/* remove duplicated properties
*/
font-weight: normal;
font-weight: normal;
h1:before{margin:10px
20px;color:red;border-
radius:16px;font-
weight:normal;background-
position:100% 100%}

RTLCSS
div {
float: right;
padding-left: 30px;
}
div {
float: left;
padding-right: 30px;
}

PostCSS Assets
div {
background:
resolve("postcss.png");
}
body {
width:
width("images/foobar.png");
height:
height("images/foobar.png");
background-size:
size("images/foobar.png");
}
div {
background:
url(/slideshow/introduction-to-postcss/94429031/"/images/logos/postcss.png");
}
body {
width: 320px;
height: 240px;
background-size: 320px 240px;
}

cssnext
:root {
--fontSize: 1rem;
--mainColor: #12345678;
}
body {
color: var(--mainColor);
font-size: var(--fontSize);
}
body {
color: rgba(18, 52, 86,
0.47059);
font-size: 16px;
font-size: 1rem;
}

�ݺ�ߣ

Introduction to Postcss

More Related Content

Introduction to Postcss