Stylus CSS چیست و چگونه از آن استفاده می کنید؟

ممکن است با سایر پیش پردازنده های CSS بیشتر آشنا باشید، اما از این رقیب غافل نشوید.

وقتی صحبت از توسعه وب می شود، رایج ترین روش برای استایل دادن به یک برنامه، استفاده از CSS است. با این حال، کار با CSS می تواند دشوار باشد زیرا اشکال زدایی آن بسیار دشوار است.

نحوه استفاده از Stylus CSS را بیاموزید و گزینه دیگری با یکی از محبوب ترین پیش پردازنده های CSS موجود خواهید داشت.

پیش پردازنده CSS چیست؟

پیش پردازنده های CSS ابزارهایی هستند که نوشتن CSS را آسان تر می کنند. آنها اغلب کد را از نحو سفارشی خود به فرمت css کامپایل می کنند که مرورگرها می توانند آن را درک کنند.

برای مثال، پیش پردازنده‌های CSS مانند Sass، ویژگی‌های خاصی مانند حلقه‌ها، میکسین‌ها، انتخابگرهای تودرتو، و دستورات if/else را ارائه می‌دهند. این ویژگی ها حفظ کد CSS خود را به خصوص در تیم های بزرگ آسان تر می کند.

برای استفاده از یک پردازنده CSS، باید کامپایلر را در محیط محلی و/یا سرور تولیدی خود نصب کنید. برخی از ابزارهای ساخت frontend، مانند Vite، به شما امکان می دهند پیش پردازنده های CSS مانند LessCSS را در پروژه خود بگنجانید.

قلم CSS چگونه کار می کند

برای نصب Stylus در محیط محلی خود، به Node.js و Node Package Manager (NPM) یا Yarn روی دستگاه خود نیاز دارید. دستور ترمینال زیر را اجرا کنید:

npm install stylus

یا:

yarn add stylus

هر فایل CSS قلم به یک پسوند .styl ختم می شود. هنگامی که کد Stylus CSS خود را نوشتید، می توانید آن را با این دستور کامپایل کنید:

stylus .

این باید تمام فایل‌های .styl را کامپایل کرده و فایل‌های css. را در دایرکتوری فعلی خروجی دهد. کامپایلر Stylus همچنین امکان کامپایل فایل‌های .css را به .styl با پرچم –css فراهم می‌کند. برای تبدیل فایل css به فرمت .styl از این دستور استفاده کنید:

stylus --css style.css style.styl

نحو و انتخابگرهای والد در Stylus CSS

در CSS سنتی، شما یک بلوک سبک را با پرانتز تعریف می کنید. عدم گنجاندن این شخصیت ها منجر به شکسته شدن سبک ها می شود. در Stylus CSS، استفاده از بریس اختیاری است.

مطلب مرتبط: نحوه ایجاد انیمیشن پیوسته در React Native با استفاده از Animated.loop()

Stylus از نحوی شبیه پایتون پشتیبانی می‌کند، به این معنی که می‌توانید بلوک‌ها را با استفاده از تورفتگی‌ها تعریف کنید، مانند این:

.container margin: 10px

بلوک کد بالا در CSS زیر کامپایل می شود:

.container {
  margin: 10px;
}

درست مانند پیش پردازنده های CSS مانند Less، می توانید به انتخابگر والد با کاراکتر & ارجاع دهید:

button
    color: white;
    &:hover
        color: yellow;

که کامپایل می کند به:

button {
  color: #fff;
}

button:hover {
  color: #ff0;
}

نحوه استفاده از متغیرها در Stylus CSS

در پیش پردازنده های CSS مانند Less CSS، شما متغیرها را با کاراکتر @ تعریف می کنید، در حالی که CSS سنتی از “–” برای تعریف یک متغیر استفاده می کند.

در Stylus همه چیز کمی متفاوت است: برای تعریف یک متغیر نیازی به نماد خاصی ندارید. در عوض، فقط متغیر را با استفاده از علامت تساوی (=) تعریف کنید تا آن را به یک مقدار متصل کنید:

bg-color = black

اکنون می توانید از متغیر موجود در فایل .styl به صورت زیر استفاده کنید:

div background-color: bg-color

بلوک های کد بالا در CSS زیر کامپایل می شوند:

div {
  background-color: #000;
}

می توانید با پرانتز یک متغیر تهی تعریف کنید. مثلا:

empty-variable = ()

می توانید با استفاده از نماد @ به سایر مقادیر ویژگی ارجاع دهید. به عنوان مثال، اگر می خواهید ارتفاع یک div را نصف عرض آن تنظیم کنید، می توانید موارد زیر را انجام دهید:

element-width = 563px

div
    width: element-width
    height : (element-width / 2)

این کار می کند، اما شما همچنین می توانید به طور کلی از ایجاد متغیر اجتناب کنید و به جای آن به مقدار ویژگی width ارجاع دهید:

div
    width: 563px
    height: (@width / 2)

در این بلوک کد، نماد @ به شما این امکان را می دهد که به ویژگی عرض واقعی در div ارجاع دهید. صرف نظر از رویکردی که انتخاب می کنید، هنگام کامپایل کردن فایل .styl، باید CSS زیر را دریافت کنید:

div {
  width: 563px;
  height: 281.5px;
}

توابع در Stylus CSS

می توانید توابعی ایجاد کنید که مقادیر را در Stylus CSS برمی گرداند. فرض کنید می‌خواهید ویژگی text-align یک div را اگر عرض بیشتر از 400 پیکسل است روی “center” یا اگر عرض کمتر از 400 پیکسل است “چپ” تنظیم کنید. شما می توانید تابعی ایجاد کنید که این منطق را مدیریت کند.

alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'

div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}

این بلوک کد تابع alignCenter را فراخوانی می کند و با ارجاع آن به علامت @ مقدار ویژگی عرض را ارسال می کند. تابع alignCenter بررسی می‌کند که آیا پارامتر آن، n، بزرگ‌تر از 400 است یا نه، و در صورت وجود، «center» را برمی‌گرداند. اگر n کمتر از 200 باشد، تابع “چپ” را برمی گرداند.

مطلب مرتبط: ایجاد یک جدول زمانی تعاملی با CSS و جاوا اسکریپت

هنگامی که کامپایلر اجرا می شود، باید خروجی زیر را تولید کند:

div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}

در بیشتر زبان های برنامه نویسی، توابع بر اساس ترتیبی که آنها را ارائه می کنید، پارامترها را اختصاص می دهند. این می تواند منجر به اشتباهاتی در نتیجه ارسال پارامترها به ترتیب اشتباه شود، که احتمال بیشتری وجود دارد که پارامترهای بیشتری را پاس کنید.

قلم یک راه حل ارائه می دهد: پارامترهای نامگذاری شده. هنگام فراخوانی یک تابع از آنها به جای پارامترهای مرتب شده استفاده کنید، مانند این:

subtract(b:30px, a:10px) /*-20px*/

زمان استفاده از پیش پردازنده CSS

پیش پردازنده های CSS ابزارهای بسیار قدرتمندی هستند که می توانید از آنها برای ساده سازی گردش کار خود استفاده کنید. انتخاب ابزار مناسب برای پروژه شما می تواند به بهبود بهره وری شما کمک کند. اگر پروژه شما فقط به مقدار کمی CSS نیاز دارد، استفاده از یک پیش پردازنده CSS ممکن است زیاد باشد.

اگر در حال ساخت یک پروژه بزرگ، شاید به عنوان بخشی از یک تیم، هستید که به مقدار زیادی CSS متکی است، از یک پیش پردازنده استفاده کنید. آنها ویژگی‌هایی مانند توابع، حلقه‌ها و میکس‌ها را ارائه می‌کنند که سبک کردن پروژه‌های پیچیده را آسان‌تر می‌کنند.

Tags: اچ تی ام ال توسعه وب سی اس اس