Sass (גליונות סגנון מדהימים מבחינה תחבירית) הוא הרחבה של CSS עם תכונות נוספות שהופכות אותו לעוצמתי יותר. הדבר הטוב ביותר ב-Sass הוא התאימות שלו ל-CSS, מה שאומר שאתה יכול להשתמש בו בפרויקטים של פיתוח אתרים שלך עם מסגרות JavaScript כמו React.
עם זאת, שלא כמו וניל CSS, אתה צריך קצת הגדרה כדי להשתמש ב-Sass. גלה כיצד זה עובד על ידי הגדרת פרויקט פשוט של React.js ושילוב Sass איתו.
כיצד להשתמש ב-Sass בפרויקט React.js שלך
כמו מעבדי CSS אחרים, Sass אינה נתמכת באופן מקורי על ידי React. כדי להשתמש ב-Sass ב-React, עליך להתקין תלות של צד שלישי דרך מנהל חבילות כמו yarn או npm.
אתה יכול לבדוק אם npm או חוט מותקן במחשב המקומי שלך על ידי הפעלה npm --גרסה אוֹ חוט --גרסה. אם אינך רואה מספר גרסה בטרמינל שלך, להתקין npm או חוט קודם.
צור פרויקט React.js
כדי לעקוב אחר המדריך הזה, אתה יכול להגדיר אפליקציית React.js פשוטה באמצעות create-react-app.
ראשית, השתמש בשורת פקודה כדי לנווט לתיקיה שבה אתה רוצה ליצור את פרויקט React שלך. ואז לרוץ
npx create-react-app . לאחר סיום התהליך, היכנס לספריית האפליקציה באמצעות CD . הוסף את התוכן הבא שלך App.js קובץ בתור התחלה:יְבוּא לְהָגִיב מ "לְהָגִיב";
יְבוּא "./App.scss";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div className="עֲטִיפָה">
<h1>שימוש ב-Sass ב-React</h1>
<header className="wrapper__btns">
<לַחְצָן>כפתור כחול</button>
<לַחְצָן>כפתור אדום</button>
<לַחְצָן>כפתור ירוק</button>
</header>
</div> );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;לאחר שהגדרתם פרויקט React בסיסי, הגיע הזמן לשלב את Sass.
התקן את Sass
אתה יכול להתקין את Sass באמצעות npm או חוט. התקן אותו באמצעות חוט על ידי ריצה חוט להוסיף סאס או, אם אתה מעדיף npm, לרוץ npm להתקין sass. מנהל החבילות שלך יוסיף את הגרסה העדכנית ביותר של Sass לרשימת התלות בפרויקט package.json קוֹבֶץ.
שנה את שם קבצי .css ל- .scss או .sass
בתיקייה של הפרויקט, שנה את השם של App.css ו-index.css ל-App.scss ו-index.scss, בהתאמה.
לאחר ששינית את שמות הקבצים האלה, עליך לעדכן את הייבוא בקבצי App.js ו-index.js שלך כך שיתאימו לתוספות הקבצים החדשות באופן הבא:
יְבוּא "./index.scss";
יְבוּא "./App.scss";מנקודה זו ואילך, עליך להשתמש בסיומת .scss עבור כל קובץ סגנון שאתה יוצר.
ייבוא ושימוש במשתנים ובמיקסינים
אחד המשמעותיים ביותר היתרונות של Sass זה עוזר לך לכתוב סגנונות נקיים וניתנים לשימוש חוזר באמצעות משתנים ומיקסינים. אמנם לא ברור איך אתה יכול לעשות את אותו הדבר ב-React, אבל זה לא כל כך שונה משימוש ב-Sass בפרויקטים שנכתבו עם JavaScript ו-HTML פשוטים.
ראשית, צור חדש סגנונות תיקייה אצלך src תיקייה. בתיקייה סגנונות, צור שני קבצים: _variables.scss ו _mixins.scss. הוסף את הכללים הבאים ל-_variables.scss:
$background-color: #f06292;
$text-color: #f1d3b3;
רוחב $btn: 120px;
$btn-height: 40px;
$block-padding: 60px;והוסיפו את הדברים הבאים ל-_mixins.scss:
@mixin אנכי-רשימה {
תצוגה: flex;
align-items: center;
flex-direction: עמודה;
}לאחר מכן ייבא משתנים ומיקסינים ב-App.scss באופן הבא:
@יְבוּא "./סגנונות/משתנים";
@יְבוּא "./סגנונות/מיקסינים";השתמש במשתנים ובמיקסים שלך בקובץ App.scss:
@יְבוּא "./Styles/variables.scss";
@יְבוּא "./סגנונות/מיקסינים";
.עֲטִיפָה {
רקע-צבע: $background-color;
צבע: $text-color;
ריפוד: $block-padding;&__btns {
@לִכלוֹל אֲנָכִי-רשימה;
כפתור {
רוחב: $btn-width;
גובה: $btn-height;
}
}
}
כך אתה משתמש במשתנים ובמיקסינים ב-React. מלבד מיקסים ומשתנים, אתה יכול גם להשתמש בכל התכונות המדהימות האחרות ב-Sass, כמו פונקציות. אין הגבלה.
שימוש ב-Sass ב-React.js
Sass מספקת יותר פונקציונליות על גבי CSS, וזה בדיוק מה שאתה צריך כדי לכתוב קוד CSS לשימוש חוזר.
אתה יכול להתחיל להשתמש ב-Sass ב-React על ידי התקנת חבילת sass דרך npm או yarn, עדכון קבצי ה-CSS שלך ל-.scss או .sass, ואז עדכון הייבוא שלך לשימוש בסיומת הקובץ החדשה. לאחר מכן, אתה יכול להתחיל לכתוב SCSS ב-React.
