كيفية تحويل قديم المغلق الى اقل

لقد غطينا الكثير من أساسيات LESS في مشاركاتنا السابقة. إذا كنت تتابع سلسلة LESS الخاصة بنا ، فإننا نعتقد أنه في هذه المرحلة لديك فكرة جيدة عن كيفية استخدام المتغيرات, Mixins و عملية في أقل.

لقد ذكرنا أيضًا كيفية تحويل LESS إلى CSS منتظم ، مع تطبيق أو مع مترجم. لكن كيف نفعل العكس؟ تحويل المغلق إلى أقل؟ حسنا ، هذه النصيحة لك.

باستخدام أداة

مع زيادة شعبية المغلق المعالج, بعض الأدوات والتطبيقات الجديدة التي تهدف بشكل أساسي إلى جعل حياة مصمم الويب أو المطور أسهل ، مثل هذه الأداة: CSS2Less.

تتيح لنا هذه الأداة تحويل CSS العادي إلى أقل. لذلك ، دعونا نجربها. لدي قواعد CSS التالية من ملفي القديم ليتم تحويلها.

 nav الارتفاع: 40 بكسل ؛ العرض: 100 ٪ ؛ الخلفية: # 000؛ الحدود السفلية: 2px solid #fff؛  nav ul padding: 0؛ الهامش: 0 السيارات ؛  nav li display: inline؛ تعويم: اليسار؛  انتقل إلى color: #fff؛ عرض: كتلة مضمنة. العرض: 100 بكسل ؛ text-shadow: 1px 1px 0px # 000؛  nav li a border-right: 1px solid #fff؛ مربع التحجيم: مربع الحدود؛  nav li: last-child a border-right: 0؛  nav a: hover، nav a: active background-color: #fff؛  

ها هي النتيجة.

 nav a: hover، nav a: active background-color: #fff؛  nav الارتفاع: 40 بكسل ؛ العرض: 100 ٪ ؛ الخلفية: # 000؛ الحدود السفلية: 2px solid #fff؛ color: #fff؛ عرض: كتلة مضمنة. العرض: 100 بكسل ؛ text-shadow: 1px 1px 0px # 000؛  ul padding: 0؛ الهامش: 0 السيارات ؛  li: last-child a border-right: 0؛  li display: inline؛ تعويم: اليسار؛ border-right: 1px solid #fff؛ مربع التحجيم: مربع الحدود؛  

كما نرى أعلاه ، فإن CSS القديم لدينا أصبح الآن متداخلًا مثل LESS.

تحديد

ومع ذلك ، يمكننا أيضًا رؤية بعض القيود في نتائج التحويل. في CSS القديم ، لدينا العديد من الألوان نفسها ، كما في هذين الإعلانين الحدود السفلية: 2px solid #fff؛ و الحدود اليمنى: 1px solid #fff؛ لدينا كل الحدود باللون الأبيض. في أقل ما يمكننا تخزين هذه القيمة الثابتة في الواقع متغير.

كما لا عش وفصل الزائفة * مع رمز علامة الضم (&) ، كما في القواعد التالية لى: الماضي والطفل و nav a: hover، nav a: active. إنها تظل كما هي ، حيث يمكننا بالفعل تبسيط القواعد بهذه الطريقة ؛

 li &: first-child  a &: hover  &: active  

استنتاج

على الرغم من القيود التي لا تزال قائمة حاليًا ، يمكن لهذه الأداة أن تساعد في توفير وقتنا لتداخل قواعد CSS. نحن بحاجة فقط إلى القيام بالباقي يدويًا ؛ ربما حتى القيود المذكورة أعلاه هي حل.