Sass چیست و چه کاربردهایی دارد؟
Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را سادهتر میکند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.
این کار باعث می شود کار خود را سریعتر پیش ببریم. به خاطر داشته باشید زمانی که در Sass کدهای خود را مینویسیم، مرورگر ها نمی توانند این کدها را درک کنند و دلیل این عدم درک هم این است که کدهای نوشته شده به زبان css نیستند.
پس ما به یک کامپایلر نیاز داریم تا کد های نوشته شده در Sass را به css تبدیل کنیم. نرم افزار های زیادی برای این کار وجود دارند که بعضی از آنها عبارتند از :
- Hammer
- Kodekit
- Compass
با این حال ما قصد نداریم در این مقاله همه مراحل نصب و کامپایل Sass را بیان کنیم. اگر میخواهید تجربه بیشتری در این مورد به دست آورید، به شما پیشنهاد می کنم از یک ویرایشگر آنلاین همچون Codepad استفاده کنید. با این کار نیاز ندارید نرم افزارهای مربوطه را بر روی کامپیوتر خود نصب کنید.
به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است. پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم. یک پیش پردازنده زبانی اسکریپتی بوده که به توسعه دهندگان اجازه می دهد کدها را به آن زبان نوشته و سپس به صورت css از آن خروجی بگیرند.
اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.
چیزی که برای ورود به این دنیای جذاب نیاز دارید این است که درک کاملی از موارد پایه ای و کدهای css داشته باشید. Sass یکی از محبوبترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.
چرا بهتر است از Sass استفاده کنیم؟
اگر شما با دوستان خود که در زمینه front-end کار میکنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار میشود و شما مجبورید کد های تکراری بنویسید.
اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.
در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.
چگونه از Sass استفاده کنیم؟
قبل از اینکه به توضیح در مورد ویژگی های منحصر به فرد این افزونه کاربردی بپردازم، بهتر است قواعد نوشتاری Sass را بررسی کنیم. باید توجه داشته باشید دو قاعده نوشتاری و یا سینتکس برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید میکنند
- SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.
- SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریعتر نوشته میشود.
در این مقاله از قاعده نوشتاری اول استفاده می کنیم.
متغیرها
متغیرها بسیار قدرتمند هستند. زیرا آنها به شما اجازه میدهند کد خود را سریع تغییر دهید. وقتی متغیری را تعریف میکنید، مقداری مشخص را در آن ذخیره میکنید. مقادیر مجاز برای متغیرها عبارتند از : اعداد، رشتهها، رنگها، null و … . برای تعریف متغیرها در Sass باید از علامت $ استفاده کرد و به دنبال آن نام متغیر را نوشت.