ModuleTrick 🔢

توی این اپیزود قراره روش جدیدی برای استایل دهی به المنت های مشابه داخل یک والد و یاد بگیریم⚡️

#ModuleTrick #css
@CodeModule

انواع Pseudo class ها در css3 🔵

شبه کلاس ها یا به انگلیسی Pseudo Class، در واقع نوع دیگه ای از انتخابگرها هستن که برای تعریف حالت خاصی از یک تگ، مورد استفاده قرار میگیرن.

توی این پست چند تا از سودو کلاس های پر کاربرد و خفن رو برسی میکنیم.

1️⃣شبه کلاس invalid:

با استفاده از شبه کلاس invalid تو CSS میتونین برای عناصری که دارای مقدار نامعتبر (invalid) هستند، استایل دلخواه تعریف کنین.

input[type="email"]:invalid {
 border: 2px solid black;
 background-color:red;
 color:#fff;
}

2️⃣شبه کلاس first-child:

شبه کلاس first-child به شما این اجازه رو میده تا اولین فرزند هر پرنت رو بهش استایل بدید.

body p: first-child {
/*Write css codes*/
}

3️⃣شبه کلاس last-child:

برای مثال استفاده در تگ P ( یعنی تمامی تگ های P که آخرین فرزند از تگ والد ( پدرشون ) هستن رو انتخاب میکنه )

body p:last-child {
background-color:#1d7ce7;
color:#fff;
padding:5px;
}

4️⃣شبه کلاس nth-child:

می‌تونین به عنوان پارامتر، شماره اون فرزند رو وارد کنید و یا میتونین با استفاده از کلمات کلیدی ( odd یعنی فرد و even یعنی زوج ) معمولا و بیشتر در جدول ها استفاده میشه. ( مثلا گفتیم سطرهای فرد فلان رنگ زمینه و سطرهای زوج بهمان رنگ )

li:nth-child(3) {
 background-color:#e30730;
}

/* For odd tr */
table tr:nth-child(odd){
background-color:#f2f2f2;
}
 
/* For even tr */
table tr:nth-child(even){
background-color:#8AC007;
color:#fff;
}

5️⃣شبه کلاس not:

با استفاده از این شبه کلاس میتونید به هر تگی، جز اونی که کلاس یا آیدی مشخصی داره استایل مورد نظرتون رو بدید.

p:not(.free) {
background-color:green;
color:white;
text-align:center;
}

6️⃣شبه کلاس disable:

با استفاده از شبه کلاس disabled میتونین برای تگ هایی که غیرفعال هستن ( اگه از صفت disabled درون یک تگ استفاده کنیم اون تگ غیرفعال میشه ) ، استایل دلخواه تعریف کنید.

button:disabled {
background-color:red;
color: white;
}

شبه کلاس های زیادی وجود داره که هر کدوم رو نسبت به نیازمون میتونیم استفاده کنیم. ما توی این پست قصد داشتیم چند تا از پر کاربرد و جالب ترینشون رو بهتون معرفی کنیم. امیدوارم لذت برده باشید 😎

#css #styling
@CodeModule

پردازشگر PostCSS چیه و چه کاربردی
داره؟ 🧐

خب PostCSS یک پردازشگر مدرن css هست که وابسته به پلاگین هاییه که با جاوا اسکریپت براش نوشته شده.
میشه گفت PostCss امکانات بیشتری نسبت به Preprocessor ها در اختیار ما قرار میده البته این نکته هم فراموش نشه که شما می تونید PostCss رو به همراه Preprocessor ها هم استفاده کنید.
البته توجه داشته باشید که PostCss یک preprocessor نیست.

برای مثال تو یک پروژه نیاز دارید توی css متغیر بنویسید ، برای این کار یک پلاگین به اسم postcss-simple-vars وجود داره که این امکان رو به css اضافه می کنه.

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}

خروجی کد بالا که به css کامپایل شده:

.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}

🔵در حال حاضر بیش از ۲۰۰ پلاگین برای PostCSS وجود داره که لیست اون هارو می تونید از تو Github یا سایت postcss.parts ببینید.


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


1️⃣سرعت: کامپایل سریعتر نسبت به Preprocessor ها.

2️⃣ماژولار: شما بر اساس نیاز پروژه می تونید پلاگین های مختلفی اضافه کنید.

3️⃣قدرت: وجود بیش از ۲۰۰ پلاگین که این ابزار رو قدرتمند و کاربردی تر می کنه.


⚡️سرعت کامپایل PostCss و در مقایسه با سایر ابزار ها میتونید مشاهده کنید ⬇️

PostCSS 5.0.11: 40 ms
PostCSS 5.0.10: 60ms (1.5 times slower)
Rework: 75 ms (1.9 times slower)
libsass: 76 ms (1.9 times slower)
Less: 147 ms (3.7 times slower)
Stylus: 166 ms (4.1 times slower)
Stylecow: 258 ms (6.4 times slower)
Ruby Sass: 1042 ms (26.0 times slower)


#css #styling
@CodeModule