כיצד להמיר CSS ישן כדי
יש לנו מכוסה הרבה של היסודות עבור LESS בפוסטים הקודמים שלנו. אם אתה כבר בעקבות סדרת LESS שלנו, אנו מאמינים כי בשלב זה יש לך כבר רעיון טוב על אופן השימוש משתנים, מיקסים ו פעולה בפחות.
יש לנו גם הזכיר כיצד להמיר LESS לתוך CSS רגיל, עם יישום או עם מהדר. אבל, איך אנחנו עושים את ההפך; להמיר CSS לתוך LESS? ובכן, טיפ זה בשבילך.
שימוש בכלי
עם הפופולריות הגוברת של פרוצדורה, כמה כלים חדשים ואפליקציות שמטרתם העיקרית היא להפוך את מעצב האינטרנט או את חיי המפתחים לקלים יותר, כגון כלי זה: CSS2Less.
כלי זה מאפשר לנו להמיר CSS רגיל לתוך LESS. אז בואו ננסה. יש לי את כללי CSS הבאים מהקובץ הישן שלי להמרה.
nav height: 40px; רוחב: 100%; רקע: # 000; border-bottom: 2px solid #fff; nav ul ריפוד: 0; שוליים: 0 אוטומטי; nav li display: inline; צף: משמאל; ניווט ב color: #fff; הצג: inline-block; רוחב: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; box-sizing: border-box; nav li: last-child a border-right: 0; ניווט ב: העבר בריחוף, נווט ב: active-background-color: #fff;
הנה התוצאה.
ניווט ב: רחף, נווט: פעיל background-color: #fff; nav height: 40px; רוחב: 100%; רקע: # 000; border-bottom: 2px solid #fff; a color: #fff; הצג: inline-block; רוחב: 100px; text-shadow: 1px 1px 0px # 000; ul ריפוד: 0; שוליים: 0 אוטומטי; li: last-child a border-right: 0; li display: inline; צף: משמאל; border-right: 1px solid #fff; box-sizing: border-box;
כפי שאנו יכולים לראות לעיל, CSS הישן שלנו מקונן עכשיו כמו ב LESS.
הגבלה
עם זאת אנו יכולים גם לראות כמה מגבלות בתוצאות ההמרה. ב CSS הישן, יש לנו כמה צבעים, כמו אלה שתי הצהרות border-bottom: 2px solid #fff; ו border-right: 1px solid #fff; יש לנו שני גבולות בלבן. ב LESS אנחנו יכולים למעשה לאחסן את הערך הזה קבוע ב משתנה.
היא גם לא מקננת ומפרידה מדומה-* עם סימן אמפרסנד (&), כגון בכללים הבאים li: הילד האחרון ו ניווט ב: רחף, נווט: פעיל. הם פשוט נשארים כפי שהם, שבו אנחנו יכולים למעשה לפשט את הכללים בדרך זו;
li &: first-child a &: hover &: פעיל
סיכום
למרות המגבלות שעדיין יש לה עדיין, כלי זה יכול לעזור מאוד בחסכון הזמן שלנו עבור קניונים CSS קינון. אנחנו רק צריכים לעשות את השאר באופן ידני; אולי עד למגבלות לעיל נפתרה.
