https://virgool.io/feed/@sina_soleymanzadeh Frotend Developer fa 2026-06-10 13:15:22 https://files.virgool.io/upload/users/174247/avatar/bcLU3C.png?height=120&width=120 https://virgool.io/@sina_soleymanzadeh https://virgool.io/@sina_soleymanzadeh/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-sass-scss-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA%DB%8C-duad4v4usbgm ساس چیست ؟ (Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازمان‌دهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.ولی sass به جای css استفاده نمیشه بلکه میشه گفت نسخه ای پیشرفته تر از css است که توست nodejs - npm کد هاش به css تبدیل میشن و شما اصلا فایلی به نام sass - scss داخل خروجی پروداکت ندارید و تمام کد ها به css تبدیل میشونداز sass همچون html استفاده میشود و کدها تو در تو هستند یعنی شما مثلا استایل ul و مینوسید و داخل اون li میزنید ul {display : flex ;li {list-style : none;}}Importبا استفاده از دستور @import می‌توانید فایل ها و یا هرچیز مد نظر خود را انتخاب کنید متغیر هاشما با استفاده از دلار ساین ($) متغیر ها را تعریف میکنند این متغیر ها می توانند رنگ ها یا فونت و سایز واندازه ها و... باشند $font : 'open sans' ; $primary-color : 'red ; ارث بریاز دستورالعمل @extend برای ارث بری استفاده میشود می توانید ویژگی های کلی بدید بعد بقیه المان ها از اون ارث بری کنند و موارد اضافی رو پارد کنید %btn-shared { display: inline-block;padding: 0.8rem 2rem;cursor: pointer; }.btn {&-main {@extend %btn-shared;color : #333 }}همچون مثال بالا برای .btn نوشتن بعد با استفاده از کلید واژه & گفتم که .btn-main ارث بری و کند و رنگش رو تغییر دادم sina Soleymanzadeh sina Soleymanzadeh Fri, 08 Jan 2021 20:17:00 +0330 https://virgool.io/CodeLovers/6-%D8%B1%D9%88%D8%B4-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%A8%D9%87%D8%AA%D8%B1-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%A9%D9%87-%D9%87%D9%85%D9%87-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-%D9%88%D8%A8-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A2%D9%86-%D9%87%D8%A7-%D8%B1%D8%A7-%D8%A8%D8%AF%D8%A7%D9%86%D9%86%D8%AF-qnsu6q7ejj5z 1 : حذف کدها و کتابخانه های بدون استفاده از پروژهخیلی وقتها بسیاری از کتابخونه هارو نصب میکنیم که در فرایند توسعه به کار می آیند و برای خروجی نهایی اصلا لازم نیستند و یا بعضی کد ها که کلن دیگر استفاده ای به هر دلیلی ندارند2 : گذاشتن break در حلقه هاهر حلقه ای در انتها پایان می یابد پس باید شرطی (break) برای آن بگذاریم که بعد از اتمام کار دیگه ادامه نده و تبدیل به یک حلقه بی نهایت نشه3 : استفاده از webpack برای نسخه نهایی پروژهوب پک یکی از ابزار مهم در وب است که پروژه شمارو خیلی خیلی minimize و فشرده میکنه 4 : باندلینگ یا باندل کردن پروژهیکی از مشکلات طراحی یک وب سایت با استفاده از زبان جاوا اسکریپت، که اکثر توسعه دهندگان با آن مواجه هستند، تعداد زیادی از فایل‌ها و assetهای این زبان که شامل فایل‌های تصاویر، فونت‌ها، استایل‌ها و غیره هستند، باید به صفحات وب ما لینک شوند تا ما بتوانیم کارهای مورد نظر خود را در یک صفحه وب انجام دهیم.که برای اینکار از باندلینگ یا باندل کردن استفاده میکنیم با استفاده از webpack به راحتی می توانیم تقریبا تمام فایل هارپ به یک فایل واحد تبدیل کنیم5 : تعداد دفعات استفاده از کلید واژه delete رو کم کنیداز این کلید واژه برای حذف استفاده می شود که مشکلاتی در آن وجود دارد و ما می توانیم به جای آن از undefined استفاده کنیم let info = {name : &quotmax&quot , job : &quotdeveloper&quot} info.job = undefind6 :استفاده از async , defer امروزه اسکریپت‌ها بسیار حجیم‌تر از HTML هستند و اندازه آن‌ها حجیم تر است و به زمان پردازشی بیشتری نیاز دارند. مرورگر به صورت پیش‌فرض باید اول تمام اسکریپت را دانلود میکند سپس آن را اجرا میکند که امکان ارور برای استفاده از DOM نیز وجود دارد برای رفع این مشکل جاوا اسکریپت دو روشی async و defer در اختیار ما قرار داده است. شما باید این خصوصیت‌ها را به تگ‌های اضافه کنید. sina Soleymanzadeh sina Soleymanzadeh Sat, 02 Jan 2021 02:07:08 +0330