مقدمه:
در این مقاله قصد داریم تا شما دوست و همراه گرامی را با زبانSASS که به عنوان پیشپردازندهCss استفاده میشود، آشنا کنیم.یادگیری این زبان میتواند جذابیت نوشتن کدCssرا برای شما چند برابر افزایش دهد.
SASSچیست؟
مخفف ( Syntactically Awesome Style Sheets ) و یک زبان پیش پردازنده برای تولید کدCss است.
این زبان به هیچ عنوان جایگزین (Css )محسوب نمی شود. و میتوان آن را روشی برای توسعه ومدیریت کد های Cssدانست.
امکان استفاده از متغیرها (Variables)، دستورات تودرتو (Nesting)، وارد کردن قطعه کدها
imports )Partial )، گروهبندی کدها (Mixins)، وراثت (Inheritance) و عملگرها (Operators) را در کدهای
(Css)را فراهم میکند. کدهای (SASS ) در نهایت کامپایل و به (Css) تبدیل میشوند.
خودت را تکرار نکنDRY
(Don’t Repeat Yourself) اصلی در برنامهنویسی به معنای عدم تکرار یک یا چند خط کد در قسمتهای مختلف برنامه است.
برنامه نویس ها برای ایجاد امکان استفاده مجدد از یک تکه کد، آن را در قالب تابع یا کلاس تعریف میکنند.
و در صورت نیاز تابع مورد نظر فراخوانی و یا شی جدیدی از کلاس تعریف میشود.
با رعایت اصل (DRY) تغییر در یک جز از برنامه، نیازی به تغییر در قسمتهای دیگر کد ندارد.
در نتیجه رفع ایرادهای برنامه و توسعه دادن آن بسیار سادهتر خواهد بود.
PHP با $ انجام میشود. کدهای (SASS) در نهایت کامپایل و به (Css) تبدیل می شوند.
در کد (CSS) تولید شده بعد از کامپایل، مقدار متغیرها در جای خود قرار خواهند گرفت.
کدهای تودرتو (Nesting)
امکان تعریف ( selector) های تودرتو با قالبی شبیه به زبانهای برنامهنویسی دیگر را فراهم میکند.
تا شما کدهای خود را به راحتی بنویسید.
پس از کامپایل کدها، دستورات تودرتو به قالب شناخته شده خود در ( CSS )تبدیل خواهند شد.
قطعه کدها (Partials(
قطعه کدهای (SASS) که در قالب فایلهای جداگانه نوشته میشوند. قابلیت فراخوانی در سایر فایلهای (SASS)را دارند. برای مثال، میدانیم که (reset) کردن در تمام فایلهای ( Css) ضروری است.
استفاده از فایل های (Partial) می توان کد (Reset) مورد نظر را یک بار نوشت و در فایل های دیگر(SASS ) آن را فراخوانی کرد.
نامگذاری فایلهای (Partial) در (SASS)با (_) انجام میشود. (مانند_partial.scss). علامت (_) در ابتدای
اسم فایل، مشخص کننده این است. که فایل(Partial) میباشد و نباید به یک فایلCSSتبدیل شود.
فایلهای (Partial)در فایلهای دیگر (SASS) به وسیله (@import) فراخوانی میشوند.
Import
در خود ( Css) امکان (import) فایلهای دیگر (Css) وجود دارد. و میتوان با استفاده از آن، کدهای(Css) را به قسمتهای کوچکتر تقسیمبندی و آنها را فراخوانی کرد.
مشکل(import) در (Css) این است که با هر (@import) یک (Http Request) ایجاد می شود. (SASS)
به جای ایجاد یک (Http Request) ، فایل(partial ) فراخوانی شده . را با فایل اصلی ترکیب میکند.
و در نهایت یک فایل (Css) برای تحویل به مرورگر وجود خواهد داشت.
برای مثال : زیر، فایل اصلی base.scss فایل partial با نام _reset.scssرا فراخوانی میکند.
نوشتن پسوند فایل (reset.scss) لازم نیست. و خود(SASS) فرمت فایل را تشخیص میدهد.
نهایت پس از کامپایل، فایل (Css) تولید شده به صورت زیر خواهد بود.
گروهبندی کدها (Mixins)
دستورات دارای پیشوند در (Css3 ) و تکرار آنها در هر قسمت مورد نیاز کاری زمانبر و خستهکننده است.
mixin ها در(SASS) به شما اجازه میدهد. که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید.
بدیهی است که استفاده از متغیرها در کنار تعریف (mixin) ها، کد را انعطافپذیرتر خواهد کرد.
تعریف(mixin) با دستور (@mixin) به همراه اختصاص یک نام به آن و فراخوانی ( @includeبا mixin )انجام میشود.
مثال بالا، از متغیر (@radius) برای افزایش انعطافپذیری کد استفاده شده است.
کد (Css) کامپایل شده به صورت زیر خواهد بود.
توسعه/وراثت (Extend/Inheritance)
وراثت پرکاربردترین ویژگیهای(SASS) است. با به کارگیری این ویژگی میتوان گروهی از خصوصیات های
یک (selector) را در(selector) دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود.
(پیاده سازی اصل DRY ) در کد بالا، ویژگیهای نوشته شده برای (message) در کلاسهای
( .success،.errorو.warning) به وسیله دستور (@extend) به ارث برده شده اند.
عملگرها Operators
عملگرهای ریاضی +،–، *، / و % قابل استفاده هستند. در نتیجه به کمکSASSمحاسبات در (Css) امکانپذیر شده است.
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهایSASSانجام شده است.
برگرفته از :
وب سایت آکادمی آی تی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر میکنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact