חרט הוא מעבד קוד קוד CSS, המאפשר לנו לעבוד בצורה פשוטה יותר בעורך הטקסטים שלנו ואז אני מסביר את הסיבות להצהרה שלי.
זהו דף סגנון כפי שאנו מכירים אותו:
גוף {font: 12px Helvetica, Arial, sans-serif; } א. כפתור {-רשת רדיוס-וובקיט: 5 פיקסלים; -מוז-גבול-רדיוס: 5 פיקסלים; גבול רדיוס: 5 פיקסלים; }
וזה יהיה אותו גיליון סגנונות שנוצר עם חֶרֶט:
גופן גוף 12 פיקסלים Helvetica, Arial, sans-serif a. כפתור -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
איפה המפתחות? איפה נקודה-פסיק, המעי הגס? ישכח, חרט עושה את זה בשבילנו.
אם אתה מתחיל עם CSS y HTML זה לא מומלץ להשתמש חרט על העובדה הפשוטה שאתה יכול לשכוח איך הדברים באמת עובדים, אבל אם כבר יש לך זמן בעולם הזה ואתה רוצה לחסוך לעצמך קוד ולעבוד .. קדימה.
מתכנתים פיתון הם ימצאו חרט משהו דומה מאוד למה שהם מותאמים, מכיוון שאתה צריך רק להזין כראוי כדי שהקסם ייעשה.
התקנה
עבור חרט עבודה שעלינו להתקין Node.js שנמצא בסניף הקהילה, אז אנחנו ממשיכים לעשות את זה:
$ sudo pacman -S nodejs
ובהמשך אנו מתקינים את Stylus. הדרך המסורתית תהיה:
$ npm install -g stylus
זה מתקין בסדר, אבל זה לא עובד בשבילי, אז זה הרבה יותר קל להתקין מ- AUR:
$ yaourt -S nodejs-stylus
כיצד להשתמש בחרט
אוקי, כבר התקנו Node.js והתקנו חרט.. איך נשתמש בזה? זה פשוט. נניח שיש לנו ספריה עם הקבצים הבאים:
- dir - index.html - style.css
מה שעלינו לעשות הוא ליצור את הקובץ style.style, שהוא זה שאנחנו הולכים לעבוד עליו. בקובץ זה יכול להיות לנו משהו כמו:
צבע רקע בגוף #ffff בגודל גופן 12 פיקסלים צבע כפתור אדום ריפוד 10 פיקסלים
אם אנו שומרים או מבצעים שינויים כלום לא קורה משום שאיננו "מרכיבים" את הקובץ שלנו. כדי להרכיב אותו, מה שאנחנו עושים זה לפתוח מסוף בספרייה שלנו (שם הקובץ style.style) ואנחנו מבצעים:
stylus -c style.styl
אבל בכל פעם שאנחנו שומרים את הקובץ style.style נצטרך לבצע את הקוד, אך למרבה המזל אין זה הכרחי, שכן אם אנו מבצעים את אותה פקודה, אלא להוסיף את הפרמטר -w (צפה) הדברים קורים:
חרט -c -w style.styl צופה /usr/lib/node_modules/stylus/lib/funtions/index.styl הידור style.css style צפייה style.styl style.css הידור style.css
במילים אחרות, הקובץ נערך אוטומטית .. האם התוצאה תהיה?
גוף {רקע-צבע: #fff; גודל-גופן: 12 פיקסלים} כפתור {צבע: # f00; ריפוד: 10 פיקסלים}
כפי שאתה יכול לראות, לא רק שהקוד שלנו יוצר אותנו CSS, אבל זה מבטל רווחים מיותרים כך שגיליון הסגנונות שלנו שוקל פחות
לא רק זה, חרט זה מאפשר לנו להעביר קבצי CSS לפורמט שלהם והאופן שבו אנו יכולים להשתמש בתחביר שלהם הוא מאוד מגוון. וזו רק תצוגה מקדימה. אז אני ממליץ לך אם אתה מעוניין לדעת קצת יותר על חרט