ליצור CSS ו HTML בהיקו

האיקו היא שירה יפנית המכילה כמה מצבים שונים בשירה מבחינת זמנים, כאשר היא מחוייבת להגיד באיזו עונה היא נמצאת במבנה מאוד מדוייק.

יש לנו 2 כלים ממש מדהימים הכתובים ברובי ליצור HTML ו CSS בצורה שלדעת המפתחים מזכירה Haiku יפני 🙂

הצורה ליצור html או xml בכלל נקראת HAML והיא עובדת בצורה הבאה:

1 !!! XML
2 !!! strict
3 %html
4...%title HAML example
5...%body
6....%div#my_id
7.....%h1 HAML example
8.....&= "Some text <markup escaped>"

וזהו יש לנו מסמך xhtml במצב strict עם טקסט בתוכו שעבר escape . שימו לב שהנקודות הן בשביל לשמור על הרווחים שלנו, כי כמו בפיתון גם כאן יש להם תפקיד.

בשביל css אבל, יש לנו תוכנה שתעשה את זה בשבילנו ותשמור את המידע בצורה סטטית, כי בלמעלה מ99% מהפעמים אין לנו צורך לייצר קובץ css חדש בכל פעם.

בשביל css נשתמש בשפה בשם SASS שעובדת בצורה הבאה:

1.!blue = #3bbfce
2.!margin = 16px
3.=table-scaffolding
4....th
5......text-align: center
6......font-weight: bold
7......td, th
8.......padding = !margin / 2
9.
10.=left(!dist)
11.....float: left
12.....margin-left = !dist
13.....border-color = !blue
14.
15.#data
16...+left(10px)
17...+table-scaffolding

וכמובן שהנקודות זה בשביל הזחות. התוצאה היא משהו בסגנון הזה:

#data {
float: left;
margin-left: 10px;
border-color: #3bbfce;
}
#data th {
text-align: center;
font-weight: bold;
}
#data th td, #data th th {
padding: 8px;
}

ככה שכמו שאתם רואים, אפשר לתכנת כאן הרבה קוד css ללא שימוש ב css עצמו. שימו לב שיש כאן שימוש מחדש במידע, וכן אפשרות לחשב מידע, דבר שאי אפשר לעשות עם css וכן גם השימוש במשתנים ופונקציות.

על שניהם חשוב לדעת שהמספר הזחות חשוב ממש כמו בפיתון, כך שאל תקחו דוגמא אמיתית מהקוד שלי כאן, אלא תקפידו על הזחות.

3 מחשבות על “ליצור CSS ו HTML בהיקו

  1. פינגבק: Jaml – לכתוב HTML בג’אווה סקריפט « לראות שונה

להשאיר תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s