ಥೀಮಿಂಗ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್
ಸುಲಭವಾದ ಥೀಮಿಂಗ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಜಾಗತಿಕ ಶೈಲಿಯ ಆದ್ಯತೆಗಳಿಗಾಗಿ ನಮ್ಮ ಹೊಸ ಅಂತರ್ನಿರ್ಮಿತ ಸಾಸ್ ವೇರಿಯೇಬಲ್ಗಳೊಂದಿಗೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 3 ರಲ್ಲಿ, ಕಡಿಮೆ, ಕಸ್ಟಮ್ CSS ಮತ್ತು ನಮ್ಮ dist
ಫೈಲ್ಗಳಲ್ಲಿ ನಾವು ಸೇರಿಸಿರುವ ಪ್ರತ್ಯೇಕ ಥೀಮ್ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ ವೇರಿಯಬಲ್ ಓವರ್ರೈಡ್ಗಳಿಂದ ಥೀಮಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚಾಗಿ ನಡೆಸಲಾಗುತ್ತದೆ. ಸ್ವಲ್ಪ ಪ್ರಯತ್ನದಿಂದ, ಕೋರ್ ಫೈಲ್ಗಳನ್ನು ಸ್ಪರ್ಶಿಸದೆಯೇ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 3 ರ ನೋಟವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರುವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ಪರಿಚಿತ, ಆದರೆ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಈಗ, ಥೀಮಿಂಗ್ ಅನ್ನು ಸಾಸ್ ಅಸ್ಥಿರಗಳು, ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ಕಸ್ಟಮ್ ಸಿಎಸ್ಎಸ್ ಮೂಲಕ ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚು ಮೀಸಲಾದ ಥೀಮ್ ಸ್ಟೈಲ್ಶೀಟ್ ಇಲ್ಲ; ಬದಲಾಗಿ, ಗ್ರೇಡಿಯಂಟ್ಗಳು, ನೆರಳುಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಸೇರಿಸಲು ನೀವು ಅಂತರ್ನಿರ್ಮಿತ ಥೀಮ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು.
ವೇರಿಯೇಬಲ್ಗಳು, ನಕ್ಷೆಗಳು, ಮಿಕ್ಸಿನ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಮ್ಮ ಮೂಲ Sass ಫೈಲ್ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ.
ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕೋರ್ ಫೈಲ್ಗಳನ್ನು ಮಾರ್ಪಡಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸಾಸ್ಗಾಗಿ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ರಚಿಸುವುದು ಎಂದರ್ಥ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು. ನೀವು npm ನಂತಹ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಭಾವಿಸಿದರೆ, ನೀವು ಈ ರೀತಿ ಕಾಣುವ ಫೈಲ್ ರಚನೆಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ:
ನೀವು ನಮ್ಮ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಿದ್ದರೆ ಮತ್ತು ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸದೇ ಇದ್ದರೆ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ನಿಮ್ಮದೇ ಆದ ರೀತಿಯಲ್ಲಿ ಪ್ರತ್ಯೇಕಿಸಿ, ಆ ರಚನೆಗೆ ಹೋಲುವ ಯಾವುದನ್ನಾದರೂ ಹಸ್ತಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ.
ನಿಮ್ಮ custom.scss
, ನೀವು Bootstrap ನ ಮೂಲ Sass ಫೈಲ್ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ನಿಮಗೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ: ಎಲ್ಲಾ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಿ, ಅಥವಾ ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಭಾಗಗಳನ್ನು ಆರಿಸಿ. ನಾವು ಎರಡನೆಯದನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ, ಆದರೂ ನಮ್ಮ ಘಟಕಗಳಾದ್ಯಂತ ಕೆಲವು ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ಅವಲಂಬನೆಗಳಿವೆ ಎಂದು ತಿಳಿದಿರಲಿ. ನಮ್ಮ ಪ್ಲಗಿನ್ಗಳಿಗಾಗಿ ನೀವು ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಹ ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.
ಆ ಸೆಟಪ್ನೊಂದಿಗೆ, ನಿಮ್ಮ ನಲ್ಲಿರುವ ಯಾವುದೇ ಸಾಸ್ ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ನಕ್ಷೆಗಳನ್ನು ನೀವು ಮಾರ್ಪಡಿಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು custom.scss
. // Optional
ಅಗತ್ಯವಿರುವಂತೆ ವಿಭಾಗದ ಅಡಿಯಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಭಾಗಗಳನ್ನು ಸೇರಿಸಲು ಸಹ ನೀವು ಪ್ರಾರಂಭಿಸಬಹುದು . bootstrap.scss
ನಿಮ್ಮ ಆರಂಭಿಕ ಹಂತವಾಗಿ ನಮ್ಮ ಫೈಲ್ನಿಂದ ಪೂರ್ಣ ಆಮದು ಸ್ಟಾಕ್ ಅನ್ನು ಬಳಸಲು ನಾವು ಸಲಹೆ ನೀಡುತ್ತೇವೆ .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಸಾಸ್ ವೇರಿಯೇಬಲ್ !default
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸದೆಯೇ ನಿಮ್ಮ ಸ್ವಂತ ಸಾಸ್ನಲ್ಲಿ ವೇರಿಯಬಲ್ನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಅಗತ್ಯವಿರುವಂತೆ ವೇರಿಯೇಬಲ್ಗಳನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಅಂಟಿಸಿ, ಅವುಗಳ ಮೌಲ್ಯಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು !default
ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ. ವೇರಿಯೇಬಲ್ ಅನ್ನು ಈಗಾಗಲೇ ನಿಯೋಜಿಸಿದ್ದರೆ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳಿಂದ ಅದನ್ನು ಮರು-ನಿಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.
ಅದೇ Sass ಫೈಲ್ನಲ್ಲಿನ ವೇರಿಯೇಬಲ್ ಅತಿಕ್ರಮಣಗಳು ಡೀಫಾಲ್ಟ್ ವೇರಿಯೇಬಲ್ಗಳ ಮೊದಲು ಅಥವಾ ನಂತರ ಬರಬಹುದು. ಆದಾಗ್ಯೂ, Sass ಫೈಲ್ಗಳಾದ್ಯಂತ ಅತಿಕ್ರಮಿಸುವಾಗ, ನೀವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ Sass ಫೈಲ್ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಮೊದಲು ನಿಮ್ಮ ಅತಿಕ್ರಮಣಗಳು ಬರಬೇಕು.
npm ಮೂಲಕ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡುವಾಗ ಮತ್ತು ಕಂಪೈಲ್ ಮಾಡುವಾಗ background-color
ಬದಲಾಯಿಸುವ color
ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :<body>
ಕೆಳಗಿನ ಜಾಗತಿಕ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿನ ಯಾವುದೇ ವೇರಿಯಬಲ್ಗೆ ಅಗತ್ಯವಿರುವಂತೆ ಪುನರಾವರ್ತಿಸಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಪ್ರಮುಖ ಮೌಲ್ಯದ ಜೋಡಿಗಳು ಸಂಬಂಧಿತ CSS ನ ಕುಟುಂಬಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ನಮ್ಮ ಬಣ್ಣಗಳು, ಗ್ರಿಡ್ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನಾವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ಸಾಸ್ ವೇರಿಯಬಲ್ಗಳಂತೆಯೇ, ಎಲ್ಲಾ ಸಾಸ್ ನಕ್ಷೆಗಳು !default
ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ ಮತ್ತು ಅದನ್ನು ಅತಿಕ್ರಮಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು.
ನಮ್ಮ ಕೆಲವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಖಾಲಿಯಾಗಿ ವಿಲೀನಗೊಳಿಸಲಾಗಿದೆ. ಕೊಟ್ಟಿರುವ ಸಾಸ್ ನಕ್ಷೆಯ ಸುಲಭ ವಿಸ್ತರಣೆಯನ್ನು ಅನುಮತಿಸಲು ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ, ಆದರೆ ನಕ್ಷೆಯಿಂದ ಐಟಂಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ವೆಚ್ಚದಲ್ಲಿ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಕಷ್ಟವಾಗುತ್ತದೆ.
ನಮ್ಮ ನಕ್ಷೆಯಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಣ್ಣವನ್ನು ಮಾರ್ಪಡಿಸಲು $theme-colors
, ನಿಮ್ಮ ಕಸ್ಟಮ್ ಸಾಸ್ ಫೈಲ್ಗೆ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ:
ಗೆ ಹೊಸ ಬಣ್ಣವನ್ನು $theme-colors
ಸೇರಿಸಲು, ಹೊಸ ಕೀ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಿ:
, ಅಥವಾ ಯಾವುದೇ ಇತರ ನಕ್ಷೆಯಿಂದ ಬಣ್ಣಗಳನ್ನು ತೆಗೆದುಹಾಕಲು $theme-colors
, ಬಳಸಿ map-remove
:
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಸ್ ನಕ್ಷೆಗಳಲ್ಲಿ ಕೆಲವು ನಿರ್ದಿಷ್ಟ ಕೀಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ನಾವು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅವುಗಳನ್ನು ನಾವೇ ವಿಸ್ತರಿಸುತ್ತೇವೆ ಎಂದು ಊಹಿಸುತ್ತದೆ. ನೀವು ಒಳಗೊಂಡಿರುವ ನಕ್ಷೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದಂತೆ, ನಿರ್ದಿಷ್ಟ ಸಾಸ್ ನಕ್ಷೆಯ ಕೀಲಿಯನ್ನು ಬಳಸುತ್ತಿರುವಲ್ಲಿ ನೀವು ದೋಷಗಳನ್ನು ಎದುರಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ಲಿಂಕ್ಗಳು, ಬಟನ್ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ನಾವು primary
, success
, ಮತ್ತು danger
ಕೀಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. $theme-colors
ಈ ಕೀಲಿಗಳ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಬಾರದು, ಆದರೆ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು ಸಾಸ್ ಸಂಕಲನ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಈ ನಿದರ್ಶನಗಳಲ್ಲಿ, ಆ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಸಾಸ್ ಕೋಡ್ ಅನ್ನು ನೀವು ಮಾರ್ಪಡಿಸುವ ಅಗತ್ಯವಿದೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಹಲವಾರು ಸಾಸ್ ಕಾರ್ಯಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಆದರೆ ಸಾಮಾನ್ಯ ಥೀಮಿಂಗ್ಗೆ ಉಪವಿಭಾಗ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ಬಣ್ಣ ನಕ್ಷೆಗಳಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಲು ನಾವು ಮೂರು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ:
ನೀವು V3 ನಿಂದ ಬಣ್ಣ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುತ್ತೀರಿ ಎಂಬುದರಂತೆಯೇ ಸಾಸ್ ನಕ್ಷೆಯಿಂದ ಒಂದು ಬಣ್ಣವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಇವುಗಳು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ.
ನಕ್ಷೆಯಿಂದ ನಿರ್ದಿಷ್ಟ ಮಟ್ಟದ ಬಣ್ಣವನ್ನು ಪಡೆಯಲು ನಾವು ಇನ್ನೊಂದು ಕಾರ್ಯವನ್ನು ಹೊಂದಿದ್ದೇವೆ . $theme-colors
ಋಣಾತ್ಮಕ ಮಟ್ಟದ ಮೌಲ್ಯಗಳು ಬಣ್ಣವನ್ನು ಹಗುರಗೊಳಿಸುತ್ತವೆ, ಆದರೆ ಹೆಚ್ಚಿನ ಮಟ್ಟಗಳು ಗಾಢವಾಗುತ್ತವೆ.
ಪ್ರಾಯೋಗಿಕವಾಗಿ, ನೀವು ಕಾರ್ಯವನ್ನು ಕರೆದು ಎರಡು ಪ್ಯಾರಾಮೀಟರ್ಗಳಲ್ಲಿ ಪಾಸ್ ಮಾಡುತ್ತೀರಿ: ಬಣ್ಣದ ಹೆಸರು $theme-colors
(ಉದಾ, ಪ್ರಾಥಮಿಕ ಅಥವಾ ಅಪಾಯ) ಮತ್ತು ಸಂಖ್ಯಾ ಮಟ್ಟ.
ಭವಿಷ್ಯದಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಹೆಚ್ಚುವರಿ ಸಾಸ್ ನಕ್ಷೆಗಳಿಗಾಗಿ ಮಟ್ಟದ ಕಾರ್ಯಗಳನ್ನು ರಚಿಸಲು ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಸಾಸ್ ಅನ್ನು ಸೇರಿಸಬಹುದು, ಅಥವಾ ನೀವು ಹೆಚ್ಚು ಮೌಖಿಕವಾಗಿರಲು ಬಯಸಿದರೆ ಸಾಮಾನ್ಯವಾದದ್ದೂ ಸಹ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ನಾವು ಸೇರಿಸುವ ಒಂದು ಹೆಚ್ಚುವರಿ ಕಾರ್ಯವೆಂದರೆ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಕಾರ್ಯ, color-yiq
. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಮೂಲ ಬಣ್ಣವನ್ನು ಆಧರಿಸಿ ಬೆಳಕಿನ ( ) ಅಥವಾ ಡಾರ್ಕ್ ( ) ಕಾಂಟ್ರಾಸ್ಟ್ ಬಣ್ಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹಿಂತಿರುಗಿಸಲು YIQ ಬಣ್ಣದ ಜಾಗವನ್ನು ಇದು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ . ನೀವು ಬಹು ವರ್ಗಗಳನ್ನು ರಚಿಸುತ್ತಿರುವ ಮಿಕ್ಸಿನ್ಗಳು ಅಥವಾ ಲೂಪ್ಗಳಿಗೆ ಈ ಕಾರ್ಯವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.#fff
#111
ಉದಾಹರಣೆಗೆ, ನಮ್ಮ ಮ್ಯಾಪ್ನಿಂದ ಬಣ್ಣದ ಸ್ವಿಚ್ಗಳನ್ನು ರಚಿಸಲು $theme-colors
:
ಒಂದು-ಆಫ್ ಕಾಂಟ್ರಾಸ್ಟ್ ಅಗತ್ಯಗಳಿಗಾಗಿ ಇದನ್ನು ಬಳಸಬಹುದು:
ನಮ್ಮ ಬಣ್ಣದ ನಕ್ಷೆ ಕಾರ್ಯಗಳೊಂದಿಗೆ ನೀವು ಮೂಲ ಬಣ್ಣವನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್ಗಳ ಫೈಲ್ನೊಂದಿಗೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ಹೊಸ $enable-*
Sass ವೇರಿಯೇಬಲ್ಗಳೊಂದಿಗೆ ಜಾಗತಿಕ CSS ಆದ್ಯತೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಟಾಗಲ್ ಮಾಡಿ. ವೇರಿಯೇಬಲ್ನ ಮೌಲ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸಿ ಮತ್ತು npm run test
ಅಗತ್ಯವಿರುವಂತೆ ಮರುಕಂಪೈಲ್ ಮಾಡಿ.
_variables.scss
ನಮ್ಮ ಫೈಲ್ನಲ್ಲಿ ಪ್ರಮುಖ ಜಾಗತಿಕ ಆಯ್ಕೆಗಳಿಗಾಗಿ ನೀವು ಈ ಅಸ್ಥಿರಗಳನ್ನು ಹುಡುಕಬಹುದು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು .
ವೇರಿಯಬಲ್ | ಮೌಲ್ಯಗಳನ್ನು | ವಿವರಣೆ |
---|---|---|
$spacer |
1rem (ಡೀಫಾಲ್ಟ್), ಅಥವಾ ಯಾವುದೇ ಮೌಲ್ಯ > 0 |
ನಮ್ಮ ಸ್ಪೇಸರ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಉತ್ಪಾದಿಸಲು ಡೀಫಾಲ್ಟ್ ಸ್ಪೇಸರ್ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ . |
$enable-rounded |
true (ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ border-radius ಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-shadows |
true ಅಥವಾ false (ಡೀಫಾಲ್ಟ್) |
ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ box-shadow ಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
$enable-gradients |
true ಅಥವಾ false (ಡೀಫಾಲ್ಟ್) |
background-image ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಶೈಲಿಗಳ ಮೂಲಕ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರೇಡಿಯಂಟ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ . |
$enable-transitions |
true (ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
transition ವಿವಿಧ ಘಟಕಗಳ ಮೇಲೆ ಪೂರ್ವನಿರ್ಧರಿತ s ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ . |
$enable-hover-media-query |
true ಅಥವಾ false (ಡೀಫಾಲ್ಟ್) |
ಅಸಮ್ಮತಿಸಲಾಗಿದೆ |
$enable-grid-classes |
true (ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ಗಾಗಿ CSS ತರಗತಿಗಳ ಉತ್ಪಾದನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ (ಉದಾ, .container , .row , .col-md-1 , ಇತ್ಯಾದಿ). |
$enable-caret |
true (ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ನಲ್ಲಿ ಹುಸಿ ಅಂಶದ ಕ್ಯಾರೆಟ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ .dropdown-toggle . |
$enable-print-styles |
true (ಡೀಫಾಲ್ಟ್) ಅಥವಾfalse |
ಮುದ್ರಣವನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಶೈಲಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ವಿವಿಧ ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸಾಸ್ ನಕ್ಷೆಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಬಣ್ಣಗಳ ಸರಣಿಯ ಮೂಲಕ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಿಯಮಾವಳಿಗಳ ಸರಣಿಯನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಈ ನಕ್ಷೆಯನ್ನು ಸಾಸ್ನಲ್ಲಿ ಲೂಪ್ ಮಾಡಬಹುದು.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿ ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಬಣ್ಣಗಳು, ನಮ್ಮ scss/_variables.scss
ಫೈಲ್ನಲ್ಲಿ ಸಾಸ್ ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ಸಾಸ್ ಮ್ಯಾಪ್ನಂತೆ ಲಭ್ಯವಿದೆ. ನಾವು ಈಗಾಗಲೇ ಸೇರಿಸಿರುವ ಗ್ರೇಸ್ಕೇಲ್ ಪ್ಯಾಲೆಟ್ನಂತೆಯೇ ಹೆಚ್ಚುವರಿ ಛಾಯೆಗಳನ್ನು ಸೇರಿಸಲು ನಂತರದ ಸಣ್ಣ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ಇದನ್ನು ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ .
ನಿಮ್ಮ ಸಾಸ್ನಲ್ಲಿ ನೀವು ಇವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
ಬಣ್ಣ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳು ಸೆಟ್ಟಿಂಗ್ color
ಮತ್ತು background-color
.
ಭವಿಷ್ಯದಲ್ಲಿ, ನಾವು ಕೆಳಗಿನ ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳೊಂದಿಗೆ ಮಾಡಿದಂತೆ ಪ್ರತಿ ಬಣ್ಣದ ಛಾಯೆಗಳಿಗೆ ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದ್ದೇವೆ.
scss/_variables.scss
ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ನಾವು ಎಲ್ಲಾ ಬಣ್ಣಗಳ ಉಪವಿಭಾಗವನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು ನಮ್ಮ ಫೈಲ್ನಲ್ಲಿ ಸಾಸ್ ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ಸಾಸ್ ಮ್ಯಾಪ್ನಂತೆ ಲಭ್ಯವಿದೆ .
ಬೂದು ವೇರಿಯಬಲ್ಗಳ ವಿಸ್ತಾರವಾದ ಸೆಟ್ ಮತ್ತು scss/_variables.scss
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನಾದ್ಯಂತ ಬೂದು ಬಣ್ಣದ ಸ್ಥಿರ ಛಾಯೆಗಳಿಗಾಗಿ ಸಾಸ್ ನಕ್ಷೆ.
ಒಳಗೆ _variables.scss
, ನಮ್ಮ ಬಣ್ಣ ಅಸ್ಥಿರಗಳು ಮತ್ತು ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ನೀವು ಕಾಣುತ್ತೀರಿ. $colors
ಸಾಸ್ ನಕ್ಷೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ :
ಅನೇಕ ಇತರ ಘಟಕಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನವೀಕರಿಸಲು ನಕ್ಷೆಯೊಳಗೆ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿ, ತೆಗೆದುಹಾಕಿ ಅಥವಾ ಮಾರ್ಪಡಿಸಿ. ದುರದೃಷ್ಟವಶಾತ್ ಈ ಸಮಯದಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ಘಟಕವು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಭವಿಷ್ಯದ ನವೀಕರಣಗಳು ಇದನ್ನು ಸುಧಾರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತವೆ. ಅಲ್ಲಿಯವರೆಗೆ, ${color}
ವೇರಿಯೇಬಲ್ಗಳು ಮತ್ತು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಬಳಸಲು ಯೋಜಿಸಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅನೇಕ ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು @each
ಸಾಸ್ ನಕ್ಷೆಯ ಮೇಲೆ ಪುನರಾವರ್ತಿಸುವ ಲೂಪ್ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಮ್ಮ ಮೂಲಕ ಘಟಕದ $theme-colors
ರೂಪಾಂತರಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಪ್ರತಿ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗೆ ಸ್ಪಂದಿಸುವ ರೂಪಾಂತರಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿದೆ. ನೀವು ಈ Sass ನಕ್ಷೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ಮರುಕಂಪೈಲ್ ಮಾಡುವಾಗ, ಈ ಲೂಪ್ಗಳಲ್ಲಿ ನಿಮ್ಮ ಬದಲಾವಣೆಗಳು ಪ್ರತಿಫಲಿಸುವುದನ್ನು ನೀವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೋಡುತ್ತೀರಿ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಅನೇಕ ಘಟಕಗಳನ್ನು ಬೇಸ್-ಮಾರ್ಡಿಫೈಯರ್ ಕ್ಲಾಸ್ ವಿಧಾನದೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಇದರರ್ಥ ಸ್ಟೈಲಿಂಗ್ನ ಬಹುಪಾಲು ಮೂಲ ವರ್ಗಕ್ಕೆ (ಉದಾ, .btn
) ಒಳಗೊಂಡಿರುತ್ತದೆ ಆದರೆ ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಿಗೆ ಸೀಮಿತವಾಗಿರುತ್ತದೆ (ಉದಾ, .btn-danger
). $theme-colors
ನಮ್ಮ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಹೆಸರನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಈ ಪರಿವರ್ತಕ ವರ್ಗಗಳನ್ನು ನಕ್ಷೆಯಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ .
ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು ನಮ್ಮ ಎಲ್ಲಾ ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳಿಗೆ $theme-colors
ಮಾರ್ಪಾಡುಗಳನ್ನು ರಚಿಸಲು ನಾವು ನಕ್ಷೆಯ ಮೇಲೆ ಹೇಗೆ ಲೂಪ್ ಮಾಡುತ್ತೇವೆ ಎಂಬುದಕ್ಕೆ ಎರಡು ಉದಾಹರಣೆಗಳಿವೆ ..alert
.bg-*
ಈ ಸಾಸ್ ಲೂಪ್ಗಳು ಬಣ್ಣ ನಕ್ಷೆಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ನಿಮ್ಮ ಘಟಕಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಬದಲಾವಣೆಗಳನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ ನಮ್ಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಪಠ್ಯ ಜೋಡಣೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಅಲ್ಲಿ ನಾವು ಸಾಸ್ ನಕ್ಷೆಗಾಗಿ @each
ಲೂಪ್ ಅನ್ನು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯೊಂದಿಗೆ ಬೆರೆಸುತ್ತೇವೆ.$grid-breakpoints
ನಿಮ್ಮ ನ್ನು ನೀವು ಮಾರ್ಪಡಿಸಬೇಕಾದರೆ $grid-breakpoints
, ನಿಮ್ಮ ಬದಲಾವಣೆಗಳು ಆ ನಕ್ಷೆಯಲ್ಲಿ ಪುನರಾವರ್ತನೆಯಾಗುವ ಎಲ್ಲಾ ಲೂಪ್ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ಸುಮಾರು ಎರಡು ಡಜನ್ CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು (ವೇರಿಯೇಬಲ್ಗಳು) ಇದು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಒಳಗೊಂಡಿದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಇನ್ಸ್ಪೆಕ್ಟರ್, ಕೋಡ್ ಸ್ಯಾಂಡ್ಬಾಕ್ಸ್ ಅಥವಾ ಸಾಮಾನ್ಯ ಮೂಲಮಾದರಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ನಮ್ಮ ಥೀಮ್ ಬಣ್ಣಗಳು, ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳು ಮತ್ತು ಪ್ರಾಥಮಿಕ ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್ಗಳಂತಹ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಮೌಲ್ಯಗಳಿಗೆ ಇವು ಸುಲಭ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತವೆ.
ನಾವು ಸೇರಿಸುವ ವೇರಿಯಬಲ್ಗಳು ಇಲ್ಲಿವೆ ( :root
ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ). ಅವು ನಮ್ಮ _root.scss
ಫೈಲ್ನಲ್ಲಿವೆ.
CSS ಅಸ್ಥಿರಗಳು Sass ನ ವೇರಿಯೇಬಲ್ಗಳಿಗೆ ಒಂದೇ ರೀತಿಯ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆ, ಆದರೆ ಬ್ರೌಸರ್ಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಮೊದಲು ಸಂಕಲನದ ಅಗತ್ಯವಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ಇಲ್ಲಿ ನಾವು ನಮ್ಮ ಪುಟದ ಫಾಂಟ್ ಮತ್ತು ಲಿಂಕ್ ಶೈಲಿಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್ಗಳೊಂದಿಗೆ ಮರುಹೊಂದಿಸುತ್ತಿದ್ದೇವೆ.
ನಿಮ್ಮ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ನಮ್ಮ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ವೇರಿಯಬಲ್ಗಳನ್ನು ಸಹ ನೀವು ಬಳಸಬಹುದು: