اصل ماجرا

نویسنده با بررسی SCSS و دیگر پیش‌پردازنده‌های CSS، مشکلاتی مثل استفاده از رشته‌های ساده و عدم تجزیهٔ مقادیر شورت‌هنگ را نشان می‌دهد. سپس ایدهٔ نمایش CSS به‌صورت لیست‌های اسکیم‌وار با اتم‌های واضح مثل رنگ و طول را مطرح می‌کند. در پایان قواعد کلی طراحی DSLهای مشابه را خلاصه می‌کند.

متن کامل ترجمه‌شده

ایجاد این وبلاگ یک دلیل خوب برای امتحان کردن SCSS بود، که من به معنای انجام آن برای مدت طولانی بود. کار با SCSS و بررسی محدودیت های آن من را در مورد آنچه که باعث می شود یک Lispy DSL خوب ( زبان خاص domain). این پست اولین از یک سری است. امروز ما به SCSS نگاه می کنیم؛ در بخش های آینده ما نمونه های دیگر از Lispy DSL را بررسی خواهیم کرد. ایده پشت SCSS منحصر به فرد نیست؛ با تولید CSS از یک زبان قدرتمند تر شما می توانید از سیستم های استثنایی با توجه به آن زبان استفاده کنید. استثنایی در هنگام نوشتن CSS پیشرفته بسیار مورد نیاز است؛ به عنوان مثال، شما اغلب نیاز به استفاده از یک رنگ در بسیاری از شرایط مختلف است. در CSS ساده، شما نیاز به تکرار این ارزش رنگ برای هر استفاده و، اگر چند نمونه نیاز به تغییر، شما باید بروید و آنها را جایگزینهنگامی که HTML به راحتی می تواند محتوای قابل توجهی را بنویسد (به عنوان مثال با اختصاص دادن ID ها و کلاس ها)، CSS هیچ راهی برای نشان دادن اینکه عناصر سبک چگونه به طور منطقی ارتباط دارند ندارد. به عنوان یک یادآوری جالب، یکی از سازندگان CSS، برت بوس، فکر می کند که ویژگی های “نظریه واقعی” در CSS مورد نیاز نیستند. او تا آنجا می رود که می گوید ثابت ها حتی نباید به CSS اضافه شوند. بحث اصلی او به طور کلی به دیگران بیهوده می شود تا شما نیز از ویژگی های پیشرفته استفاده نکنید. خوشبختانه، بسیاری از مردم موافقند و زبان های پیش پردازش سرور خود را در CSS نوشته اند. برخی از این پروژه ها (به عنوان Less و Sass) روش اضافه کردن گسترش های سنتی خود را به CSS “نظریه” اضافه می کنند، در حالی که دیگران (به عنوان یکاما ما Smug Scheme weenies، و برای ما کد و داده ها یک و همان هستند. یک Schemer معمولی ترجیح می دهد نه تنها برای تولید CSS از SCSS، بلکه برای نشان دادن CSS در یک ارزش کلاس اول، به طوری که آن را می تواند تحت تاثیر قرار گیرد. و این دقیقا همان چیزی است که SCSS ارائه می دهد … در نگاه اول. شیطان در بسیاری، جزئیات پیچیده است هنگامی که شما برای اولین بار به CSS نگاه کنید، به نظر می رسد به اندازه کافی ساده است. در واقع، ستیز هسته ای به اندازه کافی ساده است. هر مجموعه قوانین دارای انتخاب کنندگان جدا شده توسط کمان ها به دنبال اعلامیه های بین باریک braces، جدا شده توسط نیمه رنگ: #my-id، p.my-class div { background-color: green; width: 10em; margin-left: 5px; boundary: 1pxدر طرح، ما می توانیم به راحتی این را به عنوان لیست از عناصر، که در آن هر ماده یک لیست از انتخاب کنندگان و ارزش ها است، و این دقیقا همان چیزی است که SCSS انجام می دهد: (css+ (((= id "می-id") (p (= class my-class)) div) (background-color "#008000") ; آیا ما باید از ارزش های زنجیره ( رنگ سبز) استفاده کنیم؛ برای کلاس ها و رنگ ها، یا نمادها؟ (نطاق "10em") (نطاق چپ "5px") (نطاق "1px solid rgb(0, 128, 0))) یکی از ویژگی های تمیز که توسط بسیاری از این CSS پیش پردازنده ها اضافه شده است که شما می توانید اشیاء را نصب کنید. این قرار می دهد بیان کامل خود را قبل از ماده عمده و رنگ، یا نماد، که به این معنی کهبرخی کودکان، div #some-other-child { رنگ: نارنجی } هنگامی که به مثال ها نگاه می کنیم، ما باید شروع به احساس خنده دار داشته باشیم. علاوه بر این که سیتاکس انتخاب کننده نسبتا سنگین است که باعث می شود آن را برای خواندن حتی برای یک شیمر دشوار است، برخی از مشکلات وجود دارد. اولین مشکل این است که ما ارزش های املاک را به عنوان زنجیره های خالی (یا نمادها) نشان می دهیم. این بدان معنی است که شما نمی توانید به راحتی، بگویید، تمام عناصر را که دارای یک رنگ خاص در جایی در ارزش های خود را بدون تحلیل اضافی بسیار سنگین پیدا کنید (در CSS، سبز، rgb(0,128,0) و #008000 همه به همان معنی است).شما همچنین نمی توانید به راحتی ادعاهای با متغیرها را بدون انجام manipulations string، که اغلب از نقطه استفاده از یک نمایندگی کلاس اول شکست می دهد: (let ((company-color "#008000") (page-width 1000) (logo-size 20)) (css+ ((= کلاس “menu”) (border-left ,(sprintf “1px solid ~A” ,company-color)) (width ,(sprintf “~Apx” (- صفحه-width logo-size))) ((= کلاس “همه”) (background ,(sprintf “url(“img/back.png”) no-repeat 10px 20px A” ,company-color)))))) مشکلی دوم این است که زنجیره ها، به طور مستقیم به CSS تزریق می شود، نمی توانند “به فرارmy-class ( رنگ “#222; نوع لیست: حلقه; margin-left: 5px”))) سومین “مشکل” ما را به سمت درست نشان می دهد. border-property در واقع یک مالکیت مختصر است. اعلامیه مرز از مثال اول به اعلامیه های کامل زیر تقسیم می شود: html { border-top: 1px solid rgb(0, 128, 0); border-rgb: 1px solid rgb(0, 128, 0); border-bottom: 1px solid rgb(0, 128, 0); border-left: 1px solid rgb(0, 128, 0); } متأسفانه این تفکیک غیرممکن است در SCSS بدون تحلیل ارزش های string از مالکیت است. علاوه بر این، حتی اگر ما باید این کار را انجام دهیم، این خصوصیات خود را shorthands هستند، همچنین! به عنوان مثال، اعلامبرای رسیدن به این حد، ما باید همه چیز را به ساده ترین شکل خود را تقسیم کنیم و ویژگی های پیچیده تر را به صورت ساده تر جمع کنیم. در CSS، هر ویژگی در اصل دارای سنتاکس ” ارزش” شکل آزاد خود است که می تواند به اندازه کافی پیچیده شود. برخی مثال ها: html { /** * تصاویر می توانند URI های کامل باشند (در یک RFC بسیار بزرگ دیگر) که می توانند * انتخابی* ذکر شوند (چرا همه این چیز غیر ضروری غیر ضروری است؟) / تصویر پشتیبان: url(“path/toimage/png”); / شما می توانید از “counters” نامیده شده استفاده کنید (چرا، هیچ متغیر در CSS وجود ندارد؟!) / محتوای: “کتاب حساب” (مجموعه من حساب) ”؛ ضد افزایش: my-chapter-counter; * Add 1 to chapter/ همچنین، یک مجموعه محدود از به طور خاص تعریف شده “صفحات کلی” * مانند serif، فانتزی (WTF) و monospace، و حتی به طور خاص تعریف شده * “فانتزی سیستم” مانند حالت بار، کوچک عنوان، آیکون، و مینو. / فانتزی خانواده: Helvetica، “Comic Sans MS”، فانتزی، کوچک عنوان; /* * انواع مختلف اندازه: em، ex، px، pt، in، cm، mm، درصد، بدون واحد. * مرزها و پوشیدنی ها 1, 2, 3 یا 4 ارزش هایی را که گسترش -top، * -right، -bottom و -left. * / margin: 1px 2em 30٪ 0؛ } جدی، چه کسی این چیز را پیدا می کند؟ من نمی گویم که هیچ یک از این چیزها بی فایده است، اما از دیدگاه طراحی زبان، اینهیچ جعلی): html { لیست-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%); background: url(“chess.png”) 40% / 10em gry round fixed border-box; } در نهایت، CSS3 انیمیشن های طرح مشخصات شامل یک عنصر سنتاکس کاملا جدید برای فریم های کلیدی است. این تنها مکان در CSS ساده است که در آن قسمت های برش حلقه ای داخل بخش های دیگر برش حلقه ای است. این جنبه بسیار متغیر و همیشه در حال تغییر از سنتاکس به این معنی است که این یک زبان کاملا باز است. این باعث می شود که آن را بسیار دشوار برای پوشش تمام گسترش های آینده است. نقطه ای که به من امید می دهد این واقعیت است که تمام این پیچیدگی از یک مجموعه از هسته “آتوم” ماننداین اساسا همان چیزی است که W3C با API DOM CSS خود انجام داده است. نگاه خوبی به این API DOM می تواند کمک کند تا تأثیر کمی پیدا کند، حتی اگر API خود را ناخوشایند و ناخوشایند (این بسیار OOP-ish) است. در یک زبان بدون یک مجموعه کوچک از اتم های مشخص شده، شما نیاز به تحلیلگران و ژنراتورهای ویژه برای هر نوع جداگانه خواهید داشت. این برای مردم بسیار ناخوشایند است. من می دانم، زیرا این دقیقا روش من برای نشان دادن عنوان های HTTP در intarweb است. من در نظر نمی گیرم که intarweb یک DSL واقعی باشد زیرا واقعاً دارای سنتاکس “نتیجه” برای ارزش های عنوان خود نیست. همه چیز از طریق روش های ساختاری است که ارزش های “نتیجه” را پذیرفته اند. با این حال، این موضوع را نشان میمن دوست دارم فکر کنم که Intarweb یک شکست کامل نیست، زیرا هنگامی که با intarweb کار می کنند، هنگامی که همه چیز را بررسی می شود، اغلب خیلی خوب است که دیگر با فرسیدن مقابله نکنیم. چیزهایی مانند کوکی ها یا ویژگی های تصدیق به طور ناشناخته ای سخت است که به طور درست فرسوده شود، و اگر هر کسی در کل قایق HTTP در سمت سرور نیاز به رول کردن فرسنده خود را داشته باشد، این تلاش زیادی است و بسیاری از پیاده سازی های عدم هماهنگی با بگ های خود است. پردازش این ارزش ها نیز یک بوی و هرگز شامل پردازش زنجیره ای نیست. چه می تواند یک SCSS بهتر به نظر برسد؟ از درک جدید ما از طبیعت CSS، سعی کنید آن را به صورت تکراری بهبود بخشید. برای شروع، ما می خواهیم برای همه چیز استفاده کنیم. زنجیرهانجام این تغییر ساده به ما می دهد که: (scss+ (((= کلاس "foo") (= کلاس "bar"))) (Border-left-color (rgb 0 128 0)) (Border-left-width (em 1)) ;; نمی دانم که آیا ما باید اجازه می دهیم این خلاصه.. (Border-right (px 1) قوی ، نارنجی) (width (px ,(- صفحه-width sidebar-width))) ((// p) (color-green) (font-family #("Helvetica" "Comic Sans MS" sans-serif))))))))))) من از ویکتورها برای توصیف فرآیند چیزها استفاده کرده ام، در حالی که بیانات ترکیبی مانند Border-right، فقط بیانات با بیش از دو عبارت زیر هستند. نصب شده مانند sans-seriاگر ما می خواستیم این کار را انجام دهیم، SCSS می تواند متغیرها را با تعریف های رنگ صادر کند، بنابراین سبز به سادگی یک نامشخص برای (rgb 0 128 0) است، و شما می توانید عملیات های "نوع آلمبرک" را انجام دهید: (scss+ (((= کلاس “foo”) (= کلاس “بار”)))) (نوع-به چپ-نوع ،(rgb 0 128 0)) ; “rgb” یک روش ساختار است (نوع-به چپ-نوع ،(em 1)) ; بنابراین “em”… (نوع-به راست ،(px 1) قوی ،ورنج) ; .. و “px” ((// p) (نوع ، سبز) ;; یک زمینه سبز که 50٪ تاریک تر است (نوع پشت زمین ،(darken green .5)) (نوع-نوع #(“Hاین همچنین دشوار تر می شود تا اشتباهات را معرفی کنید، به خصوص اگر ژنراتور CSS در حالی که نشان می دهد تایید می کند. با این حال، تایید قوی نیز به این معنی است که اجازه دادن گسترش ها (به عنوان کسانی از CSS3) دشوار تر می شود! سیتاکس انتخاب کننده می تواند برخی از عشق را نیز استفاده کند، اما من کمتر انتقادی از آن هستم. ایده اساسی خوب است؛ آن را می توان گسترش داد تا انتخاب کننده های عمدانی را شامل کند. در حال حاضر پشتیبانی می کند + برادر و > انتخاب کودک و همچنین مقایسه های کلاس و ID. چرا که این فعالان در موقعیت عامل یک لیست هستند، اضافه کردن چیزهای جدید همانند اضافه کردن یک روش جدید در طرح ساده است. یک pseudo-selector مانند p:first-child برای مثال می تواند به سادگی ترجمه شود (: p-child اول) بدون از بین بردنتا زمانی که ما اطمینان حاصل کنیم که تمام انتخاب کنندگان نام های املاک نامیده نشده اند، هیچ تردیدی وجود ندارد که به سادگی یک قاعده جدید را داخل یکی دیگر نصب کنیم: (scss+ ((= کلاس "foo") (color ,orange) (div (margin-left ,(px 1)) ((یا (= کلاس (یا "foo" "bar")) (= id qux)) (border-left-color ,(rgb 0 128 0)) (font-family #("Helvetica" "Comic Sans MS" sans-serif)))))) به جای تکرار انتخاب کلاس، ما فقط (یا ...) را در اطراف کلاس قرار می دهیم، که خلاصه خوبی است، اما به طور کلی من در مورد این نسخه خیلی خوشحال نیستم، بنابراین اجازه می دهیم یک گام را به عقب برسانیم. ما نمی توانیم تضمین کنیم کهپس از همه، به نظر می رسد که بهتر است این را نگه دارید //. اما ما می توانیم برخی از پارن های غیر ضروری را با استفاده از مثال قبلی و فقط قرار دادن // قبل از انتخاب کننده. از آنجایی که آن را تغییر داده شده است به یک s-expression، ما می توانیم آن را انجام دهیم. ما همچنین می توانیم اجازه دهیم = انتخاب کننده برای پذیرش هر ویژگی (نه فقط کلاس ها). در حالی که ما در آن هستیم، این انتخاب کننده همچنین باید ارزش های متعددی را برای اجتناب از تکرار قبول کند: (scss+ ((یا (= p کلاس “foo”) ; تغییر به (has-word؟ p کلاس “foo”) ?

[…]

چرا مهمه؟

SCSS و پیش‌پردازنده‌های مشابه به‌دلیل استفادهٔ زیاد در پروژه‌های وب، بر توسعه‌دهندگان و عملکرد سایت‌ها تأثیر دارند. این مقاله نشان می‌دهد که نحوهٔ نمایش مقادیر CSS به‌صورت رشته‌ای می‌تواند منجر به خطاهای امنیتی و نگهداری دشوار شود. خواننده باید به این نکته توجه کند که طراحی DSLی واضح و با اتم‌های ساختاری، کار با استایل‌ها را ایمن‌تر و قابل‌توسعه می‌کند.

به درد کی می‌خوره؟

• توسعه‌دهندگان وب • مهندسان Front‑end • طراحان UI/UX • پژوهشگران زبان‌های برنامه‌نویسی

تو عمل چی کار کنیم؟

با درک مشکلات SCSS، می‌توانید در پروژه‌های خود از پیش‌پردازنده‌های امن‌تر یا روش‌های سفارشی‌سازی CSS استفاده کنید. اگر DSL خود را بر پایهٔ اتم‌های واضح بسازید، امکان تجزیهٔ خودکار، تغییر مقدار رنگ یا طول بدون دست‌کاری رشته‌ای فراهم می‌شود و خطر بروز باگ یا حملهٔ تزریق کد کاهش می‌یابد.

نظر Blue IT News

پیشنهاد می‌کنیم قبل از انتخاب پیش‌پردازنده، ساختار داده‌ای که برای استایل‌ها می‌خواهید استفاده کنید را بررسی کنید؛ گاهی نوشتن یک لایهٔ سادهٔ تبدیل به CSS، امنیت و نگهداری بهتر را تضمین می‌کند.

<div class=“disclosure”> این صفحه ترجمه و تفسیر کاملی از گزارش اصلی More-magic است که توسط تیم تحریریه بلو آی تی نیوز به فارسی ترجمه و تحلیل شده. برای مشاهده نسخه اصلی، به منبع مراجعه کنید. </div>