محوّل SCSS
من SCSS وLess وStylus إلى CSS

ما الذي يفعله محوّل SCSS

ورقة الأنماط التي تحتوي تداخلًا ليست CSS صالحًا. لذلك يهمل المتصفح القاعدة كاملة ولا يقول شيئًا. لذا يسطّح محوّل SCSS التداخل، ويستبدل المتغيرات بقيمها، ويكتب CSS العادي الذي يستطيع المتصفح قراءته.

من لصقة واحدة تعود ثلاثة أشياء. أولًا CSS المحوّل نفسه، جاهزًا للصق في ملف. ثم قائمة بالمتغيرات و mixins التي وجدها، مع القيمة التي يحملها كل منها. وأخيرًا لوح ملاحظات يسمّي كل ما اضطر المحوّل إلى تقريره بنفسه.

هذا اللوح الأخير أهم مما يبدو. فالتخمين الصامت داخل CSS محوّل هو تصميم مكسور بعد شاشتين. لذلك تُطبع كل فرضية بجوار المخرج لا مدفونة فيه.

يعمل المحوّل في الاتجاه المعاكس أيضًا. ولأن الملف المسطّح يصعب إبقاؤه مرتبًا، يستطيع تجميع CSS العادي مرة أخرى في SCSS أو Less متداخل، مع سحب القيم المشتركة كمتغيرات. لا تثبّت شيئًا ولا ترسل شيئًا.

كيف يحوّل المعالج إلى CSS

يجري العمل في ثلاث تمريرات. أولًا يحوّل القارئ المصدر إلى قائمة قواعد، لكل منها محدد وكتلة وعمق. ثم تجمع تمريرة ثانية المحددات المتداخلة مع آبائها. وأخيرًا يطبع كاتب القواعد المسطّحة بالترتيب.

يتبع جمع المحددات قواعد المحددات التي يستخدمها المتصفح نفسه. والقاعدة المتداخلة مرة تصبح محددًا منحدرًا. أما القاعدة المكتوبة بعلامة العطف فتبقي أباها متصلًا، وهكذا يُبنى حالة hover وصنف معدّل.

المتغيرات هي المهمة الثانية. ولأن SCSS وLess يسمحان بأن يقف الاسم مكان القيمة، يبحث المحوّل عن كل اسم يصادفه ويكتب القيمة في مكانه. تبدأ متغيرات Sass بعلامة الدولار، ومتغيرات Less بعلامة @، لذلك يميّزها القارئ من الحرف الأول.

لا يلمس الكاتب أي واجهة من واجهات المتصفح ولا يلمس الشبكة. لذلك تعمل الصفحة دون اتصال. وتعمل أيضًا على ملف تفضّل ألا تلصقه في محوّل مستضاف، مثل ورقة أنماط تسمّي منتجًا لم يُعلن عنه.

SCSS وLess وStylus جنبًا إلى جنب

تتفق اللغات الثلاث في الفكرة وتختلف في الترقيم. لذلك يقرأ المحوّل الثلاث ويكتب مخرجًا واحدًا.

يحتفظ SCSS بأقواس CSS وفاصلاته المنقوطة، ولهذا يبدو كأنه CSS مع ميزات إضافية. ويفعل Less الشيء نفسه، ويسمح كذلك بنداء جزئي لـ mixin دون أقواس. أما Stylus فيسقط الأقواس والفاصلات المنقوطة وكثيرًا ما يسقط النقطتين، ويعتمد على الإزاحة بدلًا منها.

ولأن الفروق صغيرة، تستطيع صفحة واحدة قراءة الثلاث. يحدّد القارئ اللغة التي أمامه بالنظر إلى الملف: علامة الدولار تشير إلى SCSS، وعلامة @ قبل اسم تشير إلى Less، وقوس ناقص يشير إلى Stylus. وحين يكون المصدر ملتبسًا تقول الصفحة ذلك في لوح الملاحظات بدل أن تخمّن.

المخرج واحد في كل الحالات. لذلك يرى المتصفح ورقة أنماط مسطّحة واحدة، وتبقى أنت بالمصدر في اللغة التي يستخدمها فريقك أصلًا.

لماذا جمع المحددات هو الجزء الصعب

المحوّل الذي يلصق المحددين بمسافة يخطئ في معظم حالات التداخل. ولأن القاعدة المتداخلة تحت أب تصبح منحدرة فقط حين لا توجد علامة عطف، يتابع القارئ الأب في كل مستوى وهو ينزل.

لذلك تحتفظ كل كتلة بالمحدد الكامل الذي ستطبعه. فالقاعدة في الأعلى تبدأ بمحددها. ثم ترث قاعدة بداخلها ذلك المحدد وتضيف محددها، مفصولًا بمسافة. أما علامة العطف فتحل مكان المسافة تمامًا، وهكذا يتصل حالة hover للأب دون فراغ.

ترتيب القواعد المطبوعة هو الحالة الثالثة. ولأن قاعدة لاحقة بالوزن نفسه تفوز، يحافظ الكاتب على ترتيب المصدر في كل مستوى. وبهذه الطريقة ينجو التسلسل من التحويل، وتبقى القاعدة التي أردتها فائزة.

ما يُحوّل بلا ملاحظات وما يحصل على ملاحظة

يكسب المحوّل الثقة بتسمية حدوده هو. لذلك يسرد لوح الملاحظات كل بنية عالجها القارئ بطريقة تستحق أن تتحقق منها.

تُحوّل تعريفات mixins ونداءاتها، لأن اللغتين تعرّفانها في المصدر الذي لصقته. وتُحوّل تعبيرات شرط Less حين يكون الشرط مقارنة بسيطة. لذلك يُدرج mixin المشروط الفرع الذي ينطبق.

أما الإدراج النصي فيحصل على ملاحظة أكثر. ولأن قيمة مبنية من متغير داخل نص تحتاج القيمة وقت التحويل، لا يستطيع القارئ حلها إلا إذا كان المتغير في الملف نفسه. والقيمة القادمة من import لا تملكه الصفحة تبقى كما كُتبت، وتقول الملاحظة أي اسم كان ناقصًا.

و imports نفسها تحصل على ملاحظة أيضًا. لا تستطيع الصفحة جلب ملف آخر، لأنها لا تلمس الشبكة أبدًا. لذلك يبقى at-import في المخرج كـ import CSS عادي، ويقول اللوح إن الملف لم يُقرأ. وهذا يبقي المخرج صادقًا بدل أن يكون خاطئًا في صمت.

والعدّ بجوار المخرج جزء من الفكرة نفسها. ولأن التحويل قد يغيّر حجم الملف في أي من الاتجاهين، يبلّغ اللوح عن القواعد المكتوبة، والإعلانات داخلها، وحجم المدخل والمخرج. لذلك تظهر ورقة الأنماط التي كبرت بعد التحويل بنظرة واحدة لا بعد النشر.