CSS Preprocessor: סקירה, בחירה, יישום

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

איך Preprocessor CSS

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

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

בשנת 1994, מדען נורווגי Håkon Lie פיתחה גיליון סגנון שיכול לשמש את המראה של הדפים בנפרד מן-מסמך HTML. חברי priglanulas הרעיון של ה- W3C, אשר מיד יצאו עד להשלמתו. מספר שנים לאחר מכן הוא פרסם גרסה ראשונה של מפרט CSS. ואז היא השתפרה ללא הרף, המתגבשת ... אבל הקונספט נשאר בכל זאת: כל סגנון להגדיר מאפיינים מסוימים.

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

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

CSS למתחילים: תכונות Preprocessor

יש להם מספר פונקציות:

• לאחד קידומות דפדפן חאקי;

• לפשט תחביר;

• לתת את ההזדמנות לעבוד עם סלקטורים מקוננים ללא שגיאות;

• לשפר סטיילינג ההיגיון.

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

כשראה את הפופולריות של תוספות אלה, ה- W3C החל בהדרגה להוסיף את האפשרות של אותם בקוד CSS. לדוגמא, במפרט כך Calc שם (פונקציה), אשר נתמכה על ידי דפדפנים רבים. צפוי כי בקרוב ניתן יהיה להגדיר משתנים וליצור דַבקָן. עם זאת, זה יקרה בעתיד הרחוק, ועל preprocessors כבר כאן וכבר עובד היטב.

CSS preprocessors פופולרי. Sass

עוצב ב 2007. במקור מרכיב Haml - ב- HTML תבנית. תכונות חדשות עבור רכיבי CSS לשלוט מפתחים התענגו על Ruby on Rails, אשר החל להפיץ אותו בכל מקום. Sass מספר עצום של תכונות כלולות עכשיו בכל Preprocessor: משתנה, הטבעה של בוררים, דַבקָן (אז, עם זאת, טענות אלה לא ניתן להוסיף).

משתנה הכרזה ב Sass

משתנה הכריז עם סימן $. הם יכולים לשמור על המאפיינים ועל הסטים שלהם, למשל: "$ borderSolid: אדום מוצק 1px;". בדוגמא זו, אנו הכרזנו משתנים בשם borderSolid והצלנו אותו מעריכים אדומים מוצק 1px. עכשיו, אם ב- CSS אנחנו צריכים ליצור רוחב גבול אדום של 1px, פשוט מצביע על כך משתנה לאחר שם מאפיין. לאחר ההכרזה על משתנה ולא ניתן לשנותו. ישנן מספר פונקציות מובנות. לדוגמה, להצהיר על משתנה עם ערך של FF5050 # $ redcolor. עכשיו, בקוד CSS במאפיינים של כל אלמנט, להשתמש בו כדי להגדיר את צבע הגופן: p {color: $ redColor; }. האם אתה רוצה להתנסות עם צבע? השתמש בפונקציה להכהות או להבהיר. זה נעשה כך: p {color: להכהות ($ redColor, 20%); }. כתוצאה מכך, redColor הצבע יהיה 20% קלים יותר.

הפונקציות המובנות הרבות Sass. שווה לפחות לקרוא אותם, אבל יותר טוב - ללמוד.

קינון

בעבר, כדי לציין קינון נאלץ להשתמש בעיצוב ארוך ולא נוח. תארו לעצמכם שיש לנו div, המהווה p, ועל זה, בתורו, להגדיר טווח. עבור div, עלינו להגדיר את צבע הגופן אדום, עבור p - צהוב, ביחס לכושר - ורוד. In a CSS אופייני הדבר ייעשה כדלקמן:

div {

צבע: אדום;

}

div p {

צבע: צהוב;

}

תוחלת div p {

צבע: ורוד;

}

עם Preprocessor CSS הכל הופך לקל יותר קומפקטי:

div {

צבע: אדום;

p {

צבע: צהוב;

.span {

צבע: ורוד;

}

}

}

אלמנטים פשוטו כמשמעו "השקיעה" אחד אחר.

הנחיות Preprocessor

שימוש בהוראות @import יכול לייבא קבצים. לדוגמא, יש לנו קובץ fonts.sass שמצהיר על סגנונות גופנים. חבר אותו style.sass הקובץ העיקרי: @ import "גופנים". בוצע! במקום קובץ גדול אחד עם סגנונות יש לנו כמה שניתן להשתמש בהם לצורך גישה מהירה וקלה אל המאפיינים הנדרשים.

דַבקָן

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

@mixin largeFont {

Font-family: 'רומי ניו טיימס';

Font-size: 64px;

line-height: 80px;

Font-weight: bold;

}

דַבקָן לחול על רכיב בדף, השתמש @include ההנחיה. לדוגמה, אנחנו רוצים להחיל אותה בכותרת H1. יש לנו את המבנה הבא: H1 {@include: largeFont; }

כל המאפיינים של דַבקָן מוקצים אלמנט h1.

Preprocessor פחות

תחביר Sass נזכר התכנות. אם אתם מחפשים אופציה כי הוא יותר מתאים למתחילים ללמוד CSS, לחפש פחות. הוא נוצר בשנת 2009. התכונה העיקרית - תמיכת תחביר ילידי CSS, כך הכיר Imposer תכנות תהיה קלה יותר ללמוד.

המשתנים מוכרזים באמצעות הסימן @. לדוגמה: @fontSize: 14px;. עבודות קינון על אותם העקרונות כמו Sass. דַבקָן הם הודיעו כדלקמן: .largeFont () {font-family: 'Times New Roman'; Font-size: 64px; line-height: 80px; Font-weight: bold; }. כדי לחבר את זה אין צורך להשתמש בהוראות Preprocessor - רק להוסיף את דַבקָן החדש שנוצר במאפיינים של האלמנט הנבחר. לדוגמה: h1 {.largeFont; }.

Stylus

Preprocessor נוספת. נוצר ב 2011 על ידי אותו כותב, כי העניק לעולם את ג'ייד, אקספרס ומוצרים שימושיים נוספים.

משתנים יכולים יוכרזו בשתי דרכים - לא במפורש ולא במשתמע. לדוגמא: גופן = "רומי ניו טיימס"; - אופציה מרומזת. אבל $ גופן = 'Times New Roman' - ברור. דַבקָן מוכרז ומחובר במרומז. התחביר הוא כדלקמן: redColor () צבע אדום. עכשיו אנחנו יכולים להוסיף את הפריט, למשל: redColor h1 ();.

Stylus על במבט ראשון זה אולי נראה מובן. איפה סוגר הנקודות והפסיק "ילידים"? אבל יש צורך לצלול לתוכו, הכל הופך הרבה יותר ברור. זכור, עם זאת, כי פיתוח ארוך טווח של Preprocessor זה יכול "לגמול" לך להשתמש בתחביר CSS הקלסי. לפעמים זה גורם לבעיות בעת קיום לעבוד עם סגנון "טהור".

מה Preprocessor לבחור?

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

• אם אתה - מתכנת ורוצה לעבוד עם סגנונות הם קוד, השתמש Sass;
• אם אתה - מתכן ורוצה לעבוד עם סגנונות כמו עם הפריסה הקונבנציונלית, לשים לב פחות;
• אם אתה אוהב מינימליזם, השתמש בעט.

עבור כל הגירסות של אינספור ספריות מעניינות שגם יכול לפשט עוד יותר בפיתוח. משתמשים Sass מומלץ לשים לב מצפן - כלי רב עוצמה עם תכונות רבות מובנית. לדוגמא, לאחר התקנתה אתה לעולם לא צריך לדאוג קידומת גרסת הספק. מפשט לעבוד עם רשתות. ישנם כלים לעבודה עם פרחים, שדונים. מגוון כבר הודיע דַבקָן. תן הכלי הזה כמה ימים - וכך תוכלו לחסוך הרבה זמן ומאמץ בעתיד.