Introduction to Postcss
- 2. 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(../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
}
}
- 3. ابتدایی هایروش با هاپیچیدگی مدیریت
Commenting: selectors, sections components
Naming Conventions: BEM, SUIT, ...
- 4. تازه هایخلقایت برای تازه نیازهای
@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
- 6. ) پردازندهپیش یک اینSASSیاLESS.نیست (
ٔهآیند سینکس اینCSS.نیست
.نیست سازیفشرده و کد کردن تمیز برای ابزار یک این
- 9. اساسسیپست مشهور هایافزونه
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);
}
- 11. اساسسیپست مشهور هایافزونه
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%}
- 13. اساسسیپست مشهور هایافزونه
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("/images/logos/postcss.png");
}
body {
width: 320px;
height: 240px;
background-size: 320px 240px;
}