SASS वाक्यरचना. निर्देश आणि नियम. Sass सह CSS विस्तारत आहे

विंडोजसाठी 26.05.2019
विंडोजसाठी

01.08.2017

या ट्यूटोरियलमध्ये, आम्ही SASS ची काही सर्वात उपयुक्त आणि शक्तिशाली वैशिष्ट्ये पाहू: स्टाइल नेस्टिंग, चंकिंग आणि इंपोर्टिंग.

01. नेस्टेड SASS शैली

SASS नेस्टिंग स्टाइल्स हे आणखी एक उत्तम वैशिष्ट्य आहे जे तुम्हाला CSS नियम लिहू देते आणि त्यांना एकमेकांमध्ये नेस्ट करू देते. नेस्टिंग तुम्हाला HTML सारख्या संरचनेत CSS लिहिण्याची परवानगी देते, निवडकांमध्ये दृश्य श्रेणीबद्धता तयार करते.

उदाहरणार्थ, येथे नेहमीचा CSS कोड आहे:

Nav a ( मजकूर-सजावट: काहीही नाही;)

आणि SASS सह आपण असे काहीतरी तयार करू शकता:

Nav( a( मजकूर-सजावट: काहीही नाही; ) )

नेस्टेड शैली कृतीत पाहण्यासाठी काही HTML जोडूया.

खालील कोड “साइट शीर्षलेख” मध्ये स्थित नेव्हिगेशनचे प्रतिनिधित्व करतो:

इतर नियमांमध्ये नेस्ट केलेले नियम लक्षात घ्या:

Nav(उंची: 40px; a( प्रदर्शन: इनलाइन-ब्लॉक; रंग: #666; मजकूर-सजावट: काहीही नाही; पॅडिंग: 0 20px; ))

आणि मूळ CSS मध्ये समान कोड कसा दिसेल ते येथे आहे:

Nav ( उंची: 40px; ) nav a ( प्रदर्शन: इनलाइन-ब्लॉक; रंग: #666; मजकूर-सजावट: काहीही नाही; पॅडिंग: 0 20px; )

तुमचा CSS कोड व्यवस्थापित आणि व्यवस्थापित करण्याचा नेस्टिंग हा एक उत्तम मार्ग आहे.

नेस्टेड शैलींमध्ये आपल्याला आवश्यक तितके स्तर असू शकतात. हे एक उत्तम आणि उपयुक्त वैशिष्ट्य आहे, परंतु ते जास्त करू नका. नेस्टेड शैलींच्या खराब वापराचे येथे एक उदाहरण आहे:

मुख्य भाग( शीर्षलेख( .कंटेनर( .row( .left( .logo( img( ) ) ) ) ) )

कारण तीच गोष्ट खालील लहान नियमाने करता येते:

शीर्षलेख( .लोगो( img( ) ) )

02. SASS चंकिंग - स्प्लिटिंग स्टाइलशीट्स

SASS स्निपेट्स तुम्हाला कोडचे छोटे तुकडे वेगळ्या फायलींमध्ये गुंडाळण्याची परवानगी देतात आणि आवश्यकतेनुसार नंतर वापरतात. कमांड वापरून ते आयात केले जाऊ शकतात @इम्पोर्टआणि स्टाईल फाइलमध्ये ठेवा. तुकडे अधिक शैली व्यवस्थापित करणे सोपे करतात. तुमच्याकडे हेडरसाठी स्वतंत्र स्टाइलशीट असल्यास, तुम्ही त्यांना कॉल करू शकता _header.scss. अग्रगण्य अंडरस्कोर SASS ला कळू देते की फाइल एक तुकडा आहे आणि ती दुसऱ्या स्टाईलशीटमध्ये आयात केली जाऊ शकते.

SASS तुकडे - उदाहरण

यावेळी आपण SASS आणि CSS फाईल्स वेगवेगळ्या फोल्डर्समध्ये विभक्त करू. चला एक sass फोल्डर तयार करू. sass फोल्डरमध्ये, एक style.scss फाइल तयार करा, जी आमची मुख्य शैली फाइल असेल. CSS फोल्डर तयार करण्याची गरज नाही कारण SASS तुमच्यासाठी आपोआप एक तयार करेल.

SASS ते SCSS संकलित करणे खालीलप्रमाणे आहे: कमांड लाइन उघडा (तुम्हाला रुबी कमांड लाइन उघडण्याची आवश्यकता असू शकते) आणि टाइप करा:

Sass -- watch sass:css

ही कमांड SASS फोल्डरमधील प्रत्येक गोष्ट CSS फोल्डरमध्ये संकलित करते. CSS फोल्डर आपोआप तयार झाल्याचे तुमच्या लक्षात आले असेल. CSS फोल्डरमध्ये दोन फाइल्स आहेत: style.css आणि style.css.map.

आता SASS फोल्डरमध्ये नवीन फोल्डर्स तयार करूया: फोल्डर्स शीर्षलेख, मुख्य आणि तळटीप.

  1. शीर्षलेख फोल्डरच्या आत, एक तुकडा _header.scss तयार करा;
  2. मुख्य फोल्डरमध्ये _main.scss आणि _aside.scss 2 तुकडे आहेत;
  3. फूटर फोल्डरमध्ये _footer.scss हा एक तुकडा आहे.

सर्व फ्रॅगमेंट फाइल्सवर यादृच्छिक CSS नियम लिहू. तुम्ही आता सेव्ह केल्यास, काहीही बदलणार नाही कारण आम्ही अद्याप आमच्या मुख्य स्टाइलशीट style.scss शी जोडलेले नाही.

SASS फ्रॅगमेंट्स वापरणे

पूर्वी नमूद केले होते की @import निर्देश SASS तुकड्यांना जोडण्यासाठी वापरला जातो. आमच्या बाबतीत, style.scss असे काहीतरी दिसले पाहिजे:

// हेडर @import "header/header.scss"; // मुख्य @import "main/main.scss"; @import "main/aside.scss"; // Footer @import "footer/footer.scss";

तुम्ही वेगवेगळ्या फाइल्समध्ये लिहिलेले सर्व CSS नियम सेव्ह केल्यानंतर style.css उघडल्यास, तुम्हाला हे सर्व नियम एका CSS कोडमध्ये संकलित केलेले दिसेल. ही SASS चंकिंगची जादू आहे.

03. SASS आयात

SASS आयात वैशिष्ट्य आम्हाला SASS मध्ये लिहिलेले CSS दुसऱ्या SASS फाईलमध्ये आयात करण्यास अनुमती देते.

हे वैशिष्ट्य CSS मध्ये देखील उपलब्ध आहे आणि आपल्याला CSS कोड लहान भागांमध्ये विभाजित करण्याची आणि आवश्यकतेनुसार वापरण्याची परवानगी देते.

SASS आयात करणे आवश्यक आहे कारण आपण आयात करण्यासाठी CSS वापरल्यास, प्रत्येक फाइल एक वेगळी HTTP विनंती तयार करते. याचा अर्थ पृष्ठ अधिक हळू लोड होईल. SASS सह आयात केल्याने फक्त एक CSS फाइल तयार होते, जी जलद लोड होते.

SASS आयात वापरणे

आम्ही ट्यूटोरियलच्या मागील भागात SASS आयात वापरला आहे. आम्ही आमच्या स्टाइलशीट style.scss मध्ये header/_header.scss आयात केले आहे:

@import "header/header.scss";

येथे अंडरस्कोर नाही, बरोबर? कारण आम्ही SASS ला माहिती देण्यासाठी अंडरस्कोर वापरतो. शेवटी विस्तार लिहिण्याचीही गरज नाही. SASS ला आधीच माहित आहे की आम्ही फक्त .scss फाइल्स आयात करतो. या प्रकरणात, आयात वाक्यरचना यासारखे दिसले पाहिजे:

@इम्पोर्ट "हेडर/हेडर";

हे वैशिष्ट्य जलद आणि सोपे कोडिंगसाठी अतिशय उपयुक्त आहे. आपण अनेक प्रकल्पांमध्ये एक फाईल वापरू शकतो. तुम्हाला अचानक त्याची गरज भासल्यास, फक्त फाइल घ्या आणि आयात करा.

नमस्कार मित्रांनो!

हे प्रीप्रोसेसरसाठी तपशीलवार मार्गदर्शक आहे ससनवशिक्यांसाठी. येथे आपण Sass प्रीप्रोसेसर, त्याचे फायदे, वाक्यरचना आणि उदाहरणांसह त्याच्या वापराचा विचार करू.

मस्त

प्लस

स्टमर

इश्यू प्रायोजक - होस्टिंग पार्टनर: partnerwp.ru

तुम्ही GitHub वरून या ट्यूटोरियलसाठी सर्व Sass/CSS उदाहरणे आणि सानुकूलित Gulp प्रोजेक्ट डाउनलोड करू शकता.

सससर्वात विकसित आणि स्थिर CSS प्रीप्रोसेसर, तसेच व्यावसायिकांमध्ये सर्वात लोकप्रिय प्रीप्रोसेसरांपैकी एक आहे.

सासचे फायदे

  • वेगवेगळ्या CSS आवृत्त्यांशी सुसंगत, धन्यवाद ज्यामुळे तुम्ही तुमच्या प्रोजेक्टमध्ये CSS लायब्ररी वापरू शकता;
  • कोणत्याही प्रसंगासाठी मोठ्या संख्येने विविध कार्ये. काही CSS प्रीप्रोसेसर अशा समृद्ध कार्यक्षमतेचा अभिमान बाळगू शकतात;
  • Sass सर्वात जुन्या CSS प्रीप्रोसेसरांपैकी एक आहे, ज्याने त्याच्या अस्तित्वाच्या अनेक वर्षांमध्ये भरपूर अनुभव आत्मसात केला आहे;
  • Sass फ्रेमवर्क वापरण्याची एक उत्तम संधी जी विकसकासाठी जीवन सुलभ करते. अशीच एक फ्रेमवर्क म्हणजे बोरबॉन, जी आम्ही जेडीच्या काही आवृत्त्यांमध्ये सास लिहिताना वापरतो;
  • मांडणी. तुम्ही तुमच्या जवळ असलेल्या दोन वाक्यरचनांपैकी एक निवडू शकता - सरलीकृत (SASS) आणि विस्तारित CSS-सारखी (SCSS).

जेव्हा मी प्रथम CSS प्रीप्रोसेसरशी परिचित झालो तेव्हा इतर अनेक नवशिक्या वेब डेव्हलपर्सप्रमाणे मला CSS प्रीप्रोसेसर वापरण्याची कल्पना पूर्णपणे समजली नाही. एक अतिरिक्त स्तर का बनवा, काही साधने वापरा, CSS क्लिष्ट करा, मला वाटले. पण कालांतराने, मला समजू लागले की सीएसएस लिहिणे दिवसेंदिवस छळ झाले, एक धूसर दिनचर्या अनेक क्रियांची पुनरावृत्ती करावी लागली, निवडक, गुणधर्म आणि अगदी सीएसएस कोडचे संपूर्ण ब्लॉक कॉपी करावे लागले. आज, उदाहरणे वापरून, मी तुम्हाला दाखवेन की तुम्ही Sass प्रीप्रोसेसर वापरून तुमचे काम कसे सोपे करू शकता, तुमच्या विकासात विविधता आणू शकता आणि काही अधिक किंवा कमी क्लिष्ट फंक्शन्स लिहिण्यात थोडी मजा देखील घेऊ शकता.

पर्यावरणाची स्थापना करणे

या धड्यात Sass सोबत काम करण्यासाठी वातावरण म्हणून, आमच्या इतर धड्यांप्रमाणे, आम्ही गल्प टास्क मॅनेजरसाठी Sass आवृत्ती वापरू. गल्प-सॅस). मूळ रुबी आवृत्ती वापरण्यासाठी किंवा विशेष सॉफ्टवेअर वापरून सास संकलित करण्यासाठी, आपण कार्यालयातील सूचना वाचू शकता. संकेतस्थळ. हा धडा प्रामुख्याने व्यावहारिक स्वरूपाचा आहे, म्हणून आम्ही प्रकल्पाशी कनेक्ट होण्याच्या संभाव्य पर्यायांवर विचार करणार नाही, आम्ही गुल्प वापरून सर्वात लोकप्रिय मार्गाने सास कनेक्ट करू.

तुमच्याकडे Node.js आणि Gulp ची नवीनतम आवृत्ती स्थापित असल्याची खात्री करा. Node.js इन्स्टॉल नसेल तर ते डाउनलोड करून इन्स्टॉल करा. Node.js स्थापित केल्यानंतर, कमांडसह gulp स्थापित करा "npm i -g gulp"(विंडोज) किंवा "sudo npm i -g gulp"(लिनक्स, ओएस एक्स). वाचा: .

Npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"); // Sass पॅकेज gulp.task("sass", function() ( // एक टास्क तयार करा "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // gulp-sass .pipe(gulp) वापरून Sass ला CSS मध्ये रूपांतरित करा. dest(" css")) // निकाल css फोल्डरमध्ये अपलोड करा)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // पहा सास फोल्डरमधील सास फाइल्सच्या मागे)); gulp.task("डिफॉल्ट", ["वॉच"]);

ओळ 6 कडे लक्ष द्या - येथे आम्ही परिणामी फाइलसाठी आउटपुट शैलींपैकी एक वापरतो: घरटे- नेस्टेड, डीफॉल्टनुसार; विस्तारित- विस्तारित; संक्षिप्त- कॉम्पॅक्ट, जेव्हा कुरळे ब्रेसेसमधील निवडकर्ता आणि त्याचे गुणधर्म एका ओळीवर प्रदर्शित केले जातात; संकुचित- संकुचित. याव्यतिरिक्त, प्रक्रिया धन्यवाद .on("त्रुटी", sass.logError)त्रुटी आढळल्यास, आम्हाला Gulpfile एक्झिक्युशन कमांड रीलोड करावी लागणार नाही आणि आम्हाला Sass फाइलच्या कोणत्या ओळीवर त्रुटी आहे ते आम्ही पाहू. उदाहरणांमध्ये मी आउटपुट शैली वापरेन विस्तारितस्पष्टतेसाठी.

तुमच्या फाइल सिस्टमवर तुमच्याकडे खालील प्रोजेक्ट स्ट्रक्चर असावे:

  • माझा प्रकल्प/
    • css/
      • common.css
    • सास/
      • common.sass
    • node_modules/
    • gulpfile.js
    • package.json

आम्ही कमांडसह गुल्पफाईलची अंमलबजावणी सुरू करतो घासणेप्रोजेक्ट फोल्डर टर्मिनलमध्ये.

येथे आपण डिरेक्टरीमधून सर्व Sass फाईल्स घेतो सास/तुमचा प्रकल्प आणि तयार झालेला CSS निकाल फोल्डरमध्ये अपलोड करा css/. याव्यतिरिक्त, येथे आम्ही एक निरीक्षण स्थापित करतो घड्याळ Sass फाइल्समधील बदलांसाठी आणि CSS मध्ये स्वयंचलित संकलनासाठी, असे बदल झाल्यास. परिणामी सीएसएस फाइल लेआउटमध्ये समाविष्ट केली आहे.

जर तुम्ही या उदाहरणात गुल्प पॅकेजेस सेट करण्याबाबत गोंधळात असाल, तर गल्प मॅन्युअल वाचा.

आमचे वातावरण कॉन्फिगर झाल्यानंतर आणि डिरेक्टरीमध्ये *.sass फाइल्स सेव्ह करताना Sass यशस्वीरित्या CSS मध्ये रूपांतरित होते. सास/, आपण सुरक्षितपणे शिकणे सुरू ठेवू शकता आणि उदाहरणे पार पाडू शकता ज्याचे आज आपण सराव मध्ये विश्लेषण करू.

Sass वाक्यरचना

Sass लिहिण्याचे 2 प्रकार आहेत, 2 वाक्यरचना: SASS आणि SCSS. सासचे सर्वात जुने स्पेलिंग आहे इंडेंटेशन सिंटॅक्स. हे स्पेलिंग आहे जे आपण आपल्या धड्यात वापरू. या वाक्यरचनासाठी फाइल विस्तार आहे *.सास. दुसरा पर्याय म्हणजे वाक्यरचना, CSS वाक्यरचना विस्तारत आहे, सॅसी सीएसएस. SCSS नियमित CSS प्रमाणे लिहिलेले आहे, परंतु Sass च्या अतिरिक्त वैशिष्ट्यांसह वर्धित केले आहे. SCSS सिंटॅक्ससह फाइल विस्तार - *.scss.

फार महत्वाचे! इंडेंटेशन सिंटॅक्सला नेस्टेड गुणधर्मांच्या इंडेंटेशनचे अत्यंत काटेकोर पालन करणे आवश्यक आहे, आणि कन्सोलमध्ये एक ओळ निर्दिष्ट केल्याशिवाय Gulp किंवा अंतर्निहित त्रुटी चालवताना त्रुटी आढळल्यास, बहुधा त्रुटी चुकीच्या इंडेंटेशनमध्ये आहे. आणखी एक महत्त्वाचा तपशील - जर तुम्ही टॅबचा इंडेंट म्हणून वापर केला, तर तुम्ही सास रूपांतरित करण्याचा प्रयत्न करता तेव्हा कंपाइलर त्रुटी देईल, जे टॅब व्यतिरिक्त, स्पेसेस इंडेंट म्हणून देखील वापरतात. एकतर तुम्ही फक्त टॅब किंवा फक्त स्पेस वापरता.

SASS आणि SCSS वाक्यरचना:

SASS - इंडेंटेशन सिंटॅक्स SCSS - विस्तार वाक्यरचना
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack रंग: $primary-color $font-stack: Helvetica, sans-serif; $primary-color: #333; मुख्य भाग ( फॉन्ट: 100% $ फॉन्ट-स्टॅक; रंग: $primary-color; )

मूलभूत लेखन नियमांव्यतिरिक्त (कुरळे ब्रेसेस, ओळींच्या शेवटी अर्धविराम), SASS आणि SCSS काही फंक्शन्सच्या लेखनात देखील भिन्न आहेत. त्यामुळे इंटरनेटवरून कोणतीही उदाहरणे वापरताना काळजी घ्या, नेमका कोणता वाक्यरचना वापरला आहे ते तपासा. जर इंटरनेटवरील एक बऱ्यापैकी मोठे उदाहरण SCSS शैलीमध्ये बनवले असेल आणि तुमचा प्रकल्प SASS मध्ये लिहिलेला असेल, तर तुम्ही निर्देशाचा वापर करून वाक्यरचना आणि फाइल विस्तार न बदलता तुमच्या मुख्य फाइलमध्ये आयात करू शकता. @इम्पोर्ट, उदाहरणार्थ, जर तुम्ही फाइल डाउनलोड केली असेल carousel.scss, नंतर तुम्ही ते तुमच्याशी कनेक्ट करू शकता main.sassओळ @इम्पोर्ट "कॅरोसेल". जेव्हा तुम्हाला main.scss फाइलमध्ये *.sass फाइल्स इंपोर्ट करण्याची आवश्यकता असेल तेव्हा तुम्ही उलट परिस्थिती देखील करू शकता. Github वरून आमच्या उदाहरणात, आम्ही सर्वकाही आयात करतो _x.x.sassफायली एकामध्ये common.sass, जेथे x.x हा या लेखातील उदाहरणाचा शीर्षक क्रमांक आहे.

आपण इंडेंटेशन सिंटॅक्स वापरू.

1. Sass सह CSS वाढवणे

१.१ गुंतवणुकीचे नियम

Sass विकासकांना CSS नियम इतरांमध्ये नेस्ट करण्याची उत्तम संधी देते, ज्यामुळे लांब निवडक लिहिण्यात/कॉपी करण्यात घालवण्यात येणारा वेळ कमी होतो आणि स्पष्ट पदानुक्रमासह कोड अधिक संरचित होतो.

1.2 पालक निवडकर्त्याला बंधनकारक

तुम्हाला नवीन नियम न बनवता सिलेक्टरचा विस्तार करायचा असल्यास, तुम्ही चिन्ह वापरून अतिरिक्त सिलेक्टरला पूर्ण सिलेक्टरला बांधू शकता. & . पृष्ठभागावर हे पदानुक्रमात मूल निवडकर्ता तयार केल्यासारखे दिसते, परंतु वापरत आहे & , आम्ही मूल निवडक तयार करण्याऐवजी पालक निवडकर्त्याचा विस्तार करत आहोत.

नियमाकडे लक्ष द्या body.firefox आणि, जे शेवटी सेट केल्यास वर्तमान घटकापूर्वी कोणत्याही घटकामधून नवीन साखळी मिळवू देते & .

याव्यतिरिक्त, कंपाऊंड सिलेक्टर तयार करण्यासाठी पालक बंधन वापरले जाऊ शकते:

1.3 नेस्टेड गुणधर्म

सोयीसाठी, तुम्ही प्रॉपर्टी नेमस्पेस प्रत्यय संलग्नकांमध्ये खंडित करू शकता. उदाहरणार्थ, समास- वर, समास- तळाशी समास-डावीकडे, समास-अधिकारांचा समान आधार आहे समासआणि खालीलप्रमाणे संलग्नकांमध्ये विभागले जाऊ शकते:

1.4 वाइल्डकार्ड निवडक

कधीकधी अशी परिस्थिती उद्भवते जेव्हा पृष्ठावरील अनेक घटक समान CSS बेस, गुणधर्मांचा समान संच वापरतात, फक्त त्यांच्यासाठी विशिष्ट. हे मूलभूत CSS नियम Sass मध्ये अनेक ठिकाणी वापरण्यासाठी वाइल्डकार्ड निवडक म्हणून पॅकेज केले जाऊ शकतात. वाइल्डकार्ड निवडकांना निर्देश वापरून अनुमान लावले जाते @वाढवणे.

2. SassScript

SassScript तुम्हाला सानुकूल व्हेरिएबल्स, अंकगणित आणि इतर फंक्शन्सच्या वापराद्वारे Sass च्या क्षमतांचा लक्षणीय विस्तार करण्यास अनुमती देते. SassScript चा वापर आपोआप नवीन निवडक आणि गुणधर्म निर्माण करण्यासाठी केला जाऊ शकतो.

2.1 Sass मध्ये चल

तुमच्या Sass फाइलमध्ये कुठेही वापरता येणारे व्हेरिएबल्स परिभाषित करण्यात सक्षम असणे हे खरोखरच छान वैशिष्ट्य आहे. रंग, डिफॉल्ट मूल्ये, युनिट्स, हे सर्व व्हेरिएबलमध्ये घेतले जाऊ शकते आणि भविष्यात वापरले जाऊ शकते. व्हेरिएबल खालीलप्रमाणे परिभाषित केले आहे: $नाम: मूल्य.

2.2 संख्या आणि स्ट्रिंग + इंटरपोलेशनसह ऑपरेशन्स

Sass तुम्हाला संख्यांवर मानक अंकगणित ऑपरेशन्स वापरण्याची क्षमता देते, जसे की बेरीज (+), वजाबाकी (-), भागाकार (/), आणि मोड्युलो (%). तुलना ऑपरेटर (<, >, <=, >=, ==, !=) संख्यांसाठी देखील समर्थित आहेत.

याव्यतिरिक्त, Sass मध्ये तार जोडण्याची (कनेक्ट) क्षमता आहे.

जसे आपण उदाहरणावरून पाहू शकतो $summ: 10 + 20 / 2, अंकगणित ऑपरेशन्स करताना प्राधान्य पाळले जाते - प्रथम विभागणी, नंतर बेरीज. ऑपरेशन्सचा क्रम परिभाषित करण्यासाठी, तुम्ही गणिताप्रमाणे कंस वापरू शकता. जोडताना कृपया लक्षात ठेवा 12px + 8px, आम्हाला मिळेल 20px.

2 आणि 9 ओळींकडे देखील लक्ष द्या, येथे आम्ही Sass फाइलमध्ये कुठेही डायनॅमिक मूल्ये ठेवण्यासाठी इंटरपोलेशन वापरतो, ज्यामध्ये आमच्याकडे मालमत्तेचे नाव आहे, निवडकर्त्याचे नाव आहे किंवा कोणत्याही ओळीवर .

इंटरपोलेशन- हे इतरांचा वापर करून नवीन मूल्य प्राप्त करत आहे.

Sass मधील इंटरपोलेशनचा सर्वात सामान्य वापर म्हणजे व्हेरिएबलचे नवीन व्हॅल्यू दुसऱ्या व्हेरिएबलच्या व्हॅल्यूमध्ये "एकत्रित" करून, रचनाद्वारे मिळवणे. #{} , उदाहरणार्थ:

इंटरपोलेशन न वापरता तुम्ही स्ट्रिंगमध्ये व्हेरिएबल टाकू शकत नाही, जसे की तुम्ही दुहेरी अवतरणांसह PHP मध्ये करू शकता. चलांमध्ये इंटरपोलेशन वापरण्याची खात्री करा.

2.3 फुलांसह ऑपरेशन्स

Sass मध्ये रंग जोडले जाऊ शकतात, वजाबाकी, भागाकार आणि गुणाकार. सर्व अंकगणित ऑपरेशन्स प्रत्येक रंगासाठी स्वतंत्रपणे केल्या जातात: लाल, हिरवा आणि निळा.


कृपया लक्षात घ्या की rgba रंग जोडताना, शेवटचे 0.75 अपारदर्शकता पॅरामीटर अभिव्यक्तीमधील इतरांपेक्षा वेगळे नसावे, अन्यथा जोडणे अयशस्वी होईल. त्याऐवजी, तुम्ही rgba अल्फा चॅनेल वापरून समायोजित करू शकता अपारदर्शक करणेआणि पारदर्शक करणेकिंवा rgba फंक्शन वापरून HEX रंगाची अपारदर्शकता नियंत्रित करा.

3. निर्देश आणि नियम

३.१ @इम्पोर्ट

तुम्ही तुमच्या Sass फाइलमध्ये इंपोर्ट करू शकता सास, scssआणि cssनिर्देश वापरून फाइल्स @इम्पोर्ट, तर सर्व मिक्सिन्स आणि व्हेरिएबल्स मुख्य फाइलमध्ये कार्य करतील ज्यामध्ये आयात होते.

@import नियमित CSS @import प्रमाणे कार्य करेल जर:

  • फाईलच्या मार्गामध्ये उपस्थित आहे http://;
  • द्वारे फाइल कॉल केली जाते url();
  • किंवा इंपोर्टमध्ये मीडिया पॅरामीटर्स असतात.

मुख्य Sass फाइलमध्ये दुसरी फाइल पूर्णपणे इंपोर्ट करण्यासाठी, फाइल विस्तार असणे आवश्यक आहे *.सास, *.scssकिंवा *.css.

चला काही उदाहरणे पाहू.

खालील फायली आयात केल्या आहेत नाही:

खालील फाइल्स इच्छाआयात केलेले:

लक्ष द्या! नवीन आवृत्त्यांमध्ये गल्प-सॅस Sass मध्ये CSS फाईल्स इंपोर्ट करण्यासाठी तुम्हाला .css एक्स्टेंशन नमूद करावे लागेल

स्वल्पविरामाने विभक्त केलेल्या एकाधिक फायली आयात करणे शक्य आहे: @इम्पोर्ट "हेडर", "मीडिया".

अंडरस्कोरने सुरू होणाऱ्या फाइल्स म्हणतात तुकडेआणि आयात करताना अंडरस्कोअर किंवा विस्तार निर्दिष्ट करणे आवश्यक नाही. उदाहरणार्थ, फाइल _header.sassयाप्रमाणे आयात केले जाऊ शकते: @इम्पोर्ट "हेडर".

लक्षात ठेवा की आयात त्या ठिकाणी होते जेथे तुम्ही निर्देश निर्दिष्ट करता @इम्पोर्ट. त्यानुसार, आवश्यक असलेल्या ठिकाणी नेस्टेड आयात करणे शक्य आहे:
#main @import "उदाहरण"

३.२ @at-root

निर्देश @at-rootत्यामध्ये असलेले नियम मूळवर उचलतात, पालकांकडून साखळी रद्द करते. येथे सर्व काही सोपे आहे:

आम्ही सासमध्ये असलेल्या सर्व निर्देशांकडे पाहिले नाही, परंतु केवळ व्यवहारात सर्वात जास्त वापरलेले आहे. तुम्हाला Sass निर्देशांमध्ये खोलवर जाण्यात स्वारस्य असल्यास, दस्तऐवजीकरण पहा.

4. अभिव्यक्ती

Sass विविध परिस्थिती, लूप अंमलबजावणी इत्यादींसाठी अभिव्यक्ती आणि कार्ये वापरण्यास समर्थन देते.

४.१ @if() निर्देश

निर्देश @तर() SassScript ला काही अटींनुसार कार्यान्वित करण्याची अनुमती देते आणि त्यात खालील वाक्यरचना आहे:

4.2 @ निर्देशांकासाठी

@च्या साठीठराविक वेळा शैलींसह ब्लॉक प्रदर्शित करते. रनटाइमवर तुम्ही काउंटर व्हेरिएबल सेट करू शकता.

आपण निर्दिष्ट करू शकता माध्यमातूनच्या ऐवजी, जर तुम्हाला 1 ते 11 पर्यंत जाण्याची आवश्यकता असेल, आणि फक्त 10 पर्यंत नाही, उदाहरणार्थ.

४.३ @प्रत्येक निर्देश

जर तुम्हाला फक्त संख्यांऐवजी मूल्यांच्या सूचीद्वारे पुनरावृत्ती करायची असेल तर तुम्ही निर्देश वापरू शकता @प्रत्येक:

4.4 @ निर्देश असताना

@तसेचअभिव्यक्ती असताना स्टाईल ब्लॉकमधून लूप खरे.

5. मिक्सिन्स

हॅगफिश- सास कोड ब्लॉक्स (किंवा टेम्प्लेट मिक्सिन्स), जे युक्तिवाद घेऊ शकतात (पर्यायी) आणि लेखन शैलीच्या शक्यतांचा लक्षणीय विस्तार करू शकतात आणि समान नियम आणि अगदी संपूर्ण CSS ब्लॉक्स लागू करण्यात घालवलेला वेळ कमी करू शकतात. हे फंक्शनसारखे काहीतरी आहे जे वाद घालू शकते, मोठ्या प्रमाणात काम करू शकते आणि इनपुट पॅरामीटरवर अवलंबून परिणाम देऊ शकते.

मिक्सिन निर्देशानुसार घोषित केले जाते @mixin, घोषणा केल्यानंतर ते सूचित करणे आवश्यक आहे नावहॅगफिश मिक्सिन निर्देशांद्वारे कॉल केला जातो @समाविष्ट करा, जे मिक्सिन आणि पास झालेल्या वितर्कांचे नाव घेते, जर असेल तर.

मित्रांनो, आम्ही Sass ची मुख्य वैशिष्ट्ये पाहिली आहेत, जी CSS वेबसाइट शैलीसह फलदायी कार्यासाठी पुरेशी आहेत. या मार्गदर्शकामध्ये काही निर्देश आणि वैशिष्ट्ये समाविष्ट नाहीत, परंतु जर तुम्हाला सासच्या सर्व वैशिष्ट्यांबद्दल जाणून घेण्यात रस असेल तर ते उपयुक्त ठरेल.

मी लगेच प्रश्नाचे उत्तर देईन - पूर्ण झालेल्या वेबसाइटवर Sass शैलींसह कसे कार्य करावे, तयार झालेले CSS संपादित करणे आणि ते FTP द्वारे अपलोड करणे खरोखर आवश्यक आहे का? नाही, तुम्ही ते करू शकत नाही. तुमच्याकडे तुमच्या Sass स्टाइल्सची किंवा संपूर्ण साइटची स्थानिक प्रत असावी आणि काम पूर्ण केल्यानंतर, FTP द्वारे पूर्ण झालेल्या शैली तैनात (अपलोड) करा. यासाठी तुम्ही गुल्प पॅकेज वापरू शकता विनाइल-एफटीपी. किंवा FTP/sFTP द्वारे अपलोड केलेल्या फाइल्स संकलित करण्यासाठी तुमच्या सर्व्हरवर Sass वातावरण सेट करा.

आजसाठी एवढेच. आपण लक्ष दिल्याबद्दल धन्यवाद!

या पोस्टमध्ये आम्ही SASS वापरण्याच्या तांत्रिक वैशिष्ट्यांबद्दल बोलू आणि हाताळू SASS कंपाइलर सेट करत आहेकमांड लाइनद्वारे. SASS कंपाइलर सेट केल्याने, ते कसे कार्य करते हे आम्हाला समजेल आणि SASS फाइलला CSS फाइलमध्ये रूपांतरित करण्याची प्रक्रिया कशी होते हे आम्हाला अधिक चांगल्या प्रकारे समजेल, ज्यामुळे आम्हाला अधिक चांगला SASS कोड लिहिण्यास मदत होईल.

तर, या पोस्टमध्ये आपण याबद्दल बोलू वेबसाइट्सवर SASS वापरणेआणि इतर प्रकल्पांमध्ये. विविध रुबी लायब्ररींना SASS कसे "संलग्न" करायचे ते पाहू. कामाला गती देण्यासाठी SASS कोड कसा कॅश करतो याबद्दल बोलूया. HTML पृष्ठे योग्यरितीने कार्य करण्यासाठी, एन्कोडिंग निर्दिष्ट करणे महत्वाचे आहे, म्हणून तुम्हाला SASS एन्कोडिंगसह कसे कार्य करते हे समजून घेणे आवश्यक आहे. आणि ते कॉन्फिगर करण्यासाठी आम्ही SASS कंपाइलर कमांड्स देखील पाहू.

प्रकल्प आणि वेबसाइट्समध्ये SASS वापरणे

CSS मध्ये अनेक नवीन वैशिष्ट्ये जोडून CSS भाषा वाढवण्याचे हे एक साधन आहे. तुमच्या प्रकल्पांमध्ये किंवा तुमच्या वेबसाइटवर, तुम्ही SASS चार वेगवेगळ्या प्रकारे वापरू शकता:

  • SASS स्थापित केले जाऊ शकते आणि रुबी भाषा मॉड्यूल म्हणून वापरले जाऊ शकते;
  • तुम्ही SASS सह कार्य करू शकता जसे की तुम्ही ऑपरेटिंग सिस्टम कमांड लाइन टूल्स आहात;
  • SASS चा वापर रॅक फ्रेमवर्क प्लगइन म्हणून केला जाऊ शकतो;
  • SASS चा वापर डेस्कटॉप कंपायलर किंवा ऑनलाइन कंपाइलर वापरून केला जाऊ शकतो, परंतु या प्रकरणात SASS मधून SCSS मध्ये रूपांतरण प्रक्रिया मॅन्युअल असेल.

आपण इच्छित असल्यास, आपल्याला प्रथम रुबी स्थापित करण्याची आवश्यकता आहे, आम्ही याबद्दल आधीच बोललो आहोत.

SASS ते CSS संकलित करण्यासाठी आणि त्यांचे संक्षिप्त वर्णन देण्यासाठी कमांड्सची सूची देणारा टेबल बनवू.

कृपया लक्षात घ्या की हे आदेश ऑपरेटिंग सिस्टम कमांड लाइनवरून चालवले जातात.

रॅकसाठी SASS प्लगइन. रेलसाठी SASS प्लगइन. Merb साठी SASS प्लगइन

रॅक प्लगइनसह SASS सहजपणे वापरले जाऊ शकते. मी रुबी भाषेत फार मजबूत नाही, ज्याबद्दल मला खरोखर खेद वाटतो, कदाचित मी कधीतरी पकडेन, परंतु आत्ता मी म्हणेन की सुरुवातीला रॅक हा सर्व्हर रॅक होता. रुबी भाषेच्या संदर्भात: रॅक ही एक लायब्ररी किंवा फ्रेमवर्क आहे जे काम करणे सोपे करते आणि क्लायंटच्या वेब सर्व्हरला ते सुलभतेने हाताळू देते.

सर्वसाधारणपणे, जर तुम्हाला रॅक म्हणजे काय हे माहित असेल आणि त्यासह कसे कार्य करावे हे माहित असेल, तर SASS प्लगइनला रॅकशी कनेक्ट करण्यासाठी, कमांड वापरा:

config.gem "sass"

तुम्हाला रॅक ॲप्लिकेशनमध्ये SASS प्लगइन सक्षम करायचे असल्यास, config.ru फाइलमध्ये खालील ओळी जोडा, जी ॲप्लिकेशन रूटमध्ये आहे:

"sass/plugin/rack" आवश्यक आहे Sass::Plugin::Rack वापरा

आपण रुबी भाषा आणि त्याच्या लायब्ररीसह SASS कसे वापरू शकता ते आम्ही पाहिले आहे, आता SASS संकलन पर्यायांबद्दल बोलूया.

SASS कंपाइलर कॅशिंग यंत्रणा

SASS कॅशिंग यंत्रणा सारखीच आहे. SASS कंपाइलर बाय डिफॉल्ट फाइल्स आणि स्निपेट्स कॅशे करतो (वारंवार वापरला जाणारा संकलित CSS कोड स्टोअर करतो), जो नंतर संकलित न करता वापरतो, जर फायलींचा SASS कोड बदलला गेला नाही.

SASS ला गती देण्यासाठी, विकसक खालील तंत्र वापरतात:

  1. एक सामान्य SASS फाइल तयार करा.
  2. ते अनेक लहान SASS फाइल्स तयार करतात ज्यामध्ये ते विविध घटकांसाठी शैली लिहितात.
  3. मोठ्या फाइल्समध्ये लहान फाइल्स इंपोर्ट करा.

हा दृष्टिकोन SASS ते CSS संकलित करण्यात लक्षणीय गती वाढवतो. SASS कंपाइलर प्रत्येक वेळी संकलित करतेवेळी कॅशे फाइल्स तयार करतो; तुम्ही कोणतेही फ्रेमवर्क वापरत नसल्यास, तुम्हाला SASS कॅशे फोल्डरमध्ये SASS कॅशे फाइल्स आढळतील.

तुम्हाला SASS मध्ये कॅशिंग वैशिष्ट्याची आवश्यकता नसल्यास, तुम्ही :cache पॅरामीटर असत्य वर सेट करून ते अक्षम करू शकता.

SASS कंपाइलर सेट करत आहे

तुम्ही SASS कंपाइलर कॉन्फिगर करू शकता. यासाठी, विशेष SASS पर्याय किंवा SASS पॅरामीटर्स आहेत, तुम्हाला जे काही म्हणायचे आहे. रेल किंवा रॅकमध्ये SASS कंपाइलर कॉन्फिगर करण्यासाठी, ऍप्लिकेशन कॉन्फिगरेशन फाइलमध्ये खाली दर्शविल्याप्रमाणे कोडची एक ओळ जोडा:

Sass::Plugin.options[:style] = :compact

SASS पॅरामीटर्स किंवा पर्याय वापरून आपण SASS मध्ये काय कॉन्फिगर करू शकतो ते पाहू.

क्रमांक साठी सेटिंग्जSASS आणि त्यांचे वर्णन
1 : शैली
हे SASS पॅरामीटर तुम्हाला आउटपुट फाइलची शैली सेट करण्यास अनुमती देते.
2 : मांडणी
हा SASS पर्याय तुम्हाला कंपाइलरला सांगण्याची परवानगी देतो. त्यानुसार, SASS वाक्यरचना वापरण्यासाठी, तुम्हाला लिहावे लागेल: sass; वाक्यरचना SCSS होण्यासाठी, लिहा: scss. डीफॉल्ट मूल्य: sass.
3 : मालमत्ता_ मांडणी
ही SASS कंपाइलर सेटिंग SASS सिंटॅक्समध्ये CSS नियम लिहिण्यासाठी नियम निर्दिष्ट करते आणि SCSS सिंटॅक्समध्ये कार्य करत नाही.
4 : कॅशे
हा SASS पर्याय तुम्हाला कॅशिंग कॉन्फिगर करण्याची परवानगी देतो. कॅशे पॅरामीटर सत्य वर सेट केले असल्यास, SASS कंपाइलर SASS स्त्रोत फाइलमध्ये आयात केलेले कोडचे तुकडे कॅशे करेल. SASS मधील कॅशिंग पर्याय काहीसे सारखेच आहेत.
5 : वाचा_ कॅशे
हा पर्याय SASS कंपाइलरला सांगतो की कोड पुन्हा संकलित करताना तो कॅशे करू नये, परंतु कॅशे पॅरामीटर निर्दिष्ट न केल्यास तो फक्त जुना कॅशे वापरू शकतो.
6 : कॅशे_ स्टोअर
SASS मध्ये, तुम्ही कॅशे स्टोरेज फोल्डर कॉन्फिगर करू शकता. जर पर्याय Sass::CacheStores::Base च्या सबक्लासवर सेट केला असेल, तर कॅशे स्टोअरचा वापर कॅशे केलेले संकलन परिणाम संचयित करण्यासाठी आणि पुनर्प्राप्त करण्यासाठी केला जाईल.
7 : कधीही_ अद्यतन
SASS कंपाइलरला हे पॅरामीटर ट्रू करून CSS फाइल्स कधीही अपडेट न करण्यासाठी कॉन्फिगर केले जाऊ शकतात.
8 : नेहमी_ अद्यतन
SASS कंपाइलर हे पॅरामीटर ट्रूवर पास करून स्त्रोत फाइल्स अपडेट आणि सेव्ह करताना नेहमी CSS फाइल्स अपडेट करण्यासाठी कॉन्फिगर केले जाऊ शकते.
9 : नेहमी_ तपासा
जेव्हा सर्व्हर स्टार्टअपवर सर्व SASS फायली CSS वर पुन्हा संकलित करणे आवश्यक असते तेव्हा हा SASS कंपाइलर पर्याय वापरला जातो.
10 : मतदान
जेव्हा हा पर्याय सत्य वर सेट केला जातो, तेव्हा नेहमी Sass::Plugin::Compiler#watch साठी बॅकएंड पोलिंगचा वापर मानक फाइलसिस्टम ऐवजी करा.
11 : पूर्ण_ अपवाद
हे SASS कंपाइलर सेटिंग तुम्हाला त्रुटींचे प्रदर्शन सेट करण्याची परवानगी देते; हे कंपाइलरला त्रुटी आढळलेल्या लाईन नंबर दर्शवेल.
12 : टेम्पलेट_ स्थान
हे पॅरामीटर तुम्हाला SASS टेम्पलेट्समधून निर्देशिका पथ सेट करण्यास अनुमती देते.
13 : css_ स्थान
हा पर्याय CSS फाइल्सचे स्थान निर्दिष्ट करतो
14 : युनिक्स_ नवीन लाईन्स
विंडोज सीआरएलएफमध्ये लाइन ब्रेक, युनिक्स सीआरमध्ये लाइन ब्रेक, हे पॅरामीटर तुम्हाला फाइलमधील लाइन ब्रेक्स विंडोज ते युनिक्समध्ये बदलण्याची परवानगी देते.
15 : फाईलचे नाव
कंपाइलर एक फाइल निर्दिष्ट करू शकतो ज्यामध्ये त्रुटी लॉग ठेवला जाईल.
16 : ओळ
हा SASS पर्याय SASS टेम्प्लेटची पहिली ओळ निर्दिष्ट करतो जिथून एरर आढळल्यावर रेषा क्रमांक दर्शवण्यासाठी मोजायचे आहे.
17 : भार_ मार्ग
हा पर्याय वापरताना SASS फाइल समाविष्ट करण्यासाठी वापरला जातो @ आयातनिर्देश
18 : फाइल सिस्टम_ आयातक
हा पर्याय वापरलेल्या फाइल सिस्टममधून फायली आयात करण्यासाठी वापरला जातो सस:: आयातदार:: पाया
19 : स्त्रोत नकाशा
हे पॅरामीटर ब्राउझरला SASS शैली शोधण्यात मदत करते, हे पॅरामीटर तीन मूल्ये घेऊ शकते: · : ऑटो: हे मूल्य सापेक्ष URI (HTTP मध्ये URI) वापरून फाईलचे स्थान दर्शवण्यासाठी वापरले जाते.· : फाइल: हे मूल्य फाइलचा स्थानिक मार्ग दर्शविण्यासाठी वापरले जाते आणि रिमोट सर्व्हरसह कार्य करण्यासाठी वापरले जात नाही.· : इनलाइन: या मूल्यामध्ये मजकूर स्त्रोत नकाशा आहे.
20 : ओळ_ संख्या
CSS फाइलमध्ये त्रुटी क्रमांक प्रदर्शित करण्यासाठी हा पर्याय आवश्यक आहे; सत्य वर सेट केल्यास त्रुटी प्रदर्शित केल्या जातील.
21 : ट्रेस_ निवडकर्ते
CSS आयात निवडक आणि मिक्सन्सचा मागोवा घेण्यासाठी SASS कंपाइलर कॉन्फिगर केले जाऊ शकते. जेव्हा खरे पॅरामीटर या पर्यायाला पास केले जाते तेव्हा कंपाइलर मदत करेल.
22 : डीबग_ माहिती
हा पर्याय कोड डीबगिंगसाठी SASS कंपाइलर कॉन्फिगर करण्यात मदत करतो.
23 : सानुकूल
तुम्हाला वेगवेगळ्या ॲप्लिकेशन्समध्ये SASS कोड वापरायचा असेल तर हा पर्याय तुम्हाला मदत करेल.
24 : शांत
तुम्ही या पर्यायासह SASS कंपाइलरद्वारे उत्पादित चेतावणी अक्षम करू शकता.

SASS फाइल एन्कोडिंग. SASS कंपाइलर एन्कोडिंग सेट करत आहे

SASS कंपाइलर एन्कोडिंग कॉन्फिगर करण्यात फारसा अर्थ नाही कारण SASS ते स्वयंचलितपणे शोधते. सुरुवातीला, एन्कोडिंग निश्चित करण्यासाठी, SASS CSS तपशील पाहते आणि परिणामी रुबी मूल्य परत करते: SASS @charset निर्देशानंतर युनिकोड बाइट ऑर्डर वाचते, जर SASS एन्कोडिंग समजू शकत नसेल, तर ते UTF-8 मधील फाइल्स एन्कोड करते.

SASS कंपाइलरसाठी एन्कोडिंग स्पष्टपणे सेट करण्यासाठी, @charset निर्देश वापरा.

SASS कंपाइलर फाइल सिंटॅक्स कसे ठरवतो

तुम्ही वापरत असलेले वाक्यरचना स्वयंचलितपणे शोधण्यासाठी तुम्ही SASS कंपाइलर कॉन्फिगर करू शकता. डीफॉल्टनुसार, SASS कंपाइलर असे मानतो की त्याला प्रक्रियेसाठी SASS सिंटॅक्ससह कोड प्राप्त होतो.

तुम्हाला -scss पर्याय वापरून SASS ला SCSS मध्ये बदलायचे असल्यास. मग कंपाइलर विचार करेल की त्याला फाइलवर scss म्हणून प्रक्रिया करणे आवश्यक आहे.

SASS कंपाइलर जेव्हा सोर्स फाइलचा विस्तार वाचतो तेव्हा सिंटॅक्स ठरवू शकतो, परंतु त्याचे दुसरे वैशिष्ट्य म्हणजे ते scss ला sass मध्ये रूपांतरित करू शकते आणि त्याउलट, त्यामुळे तुम्हाला चुकीच्या पद्धतीने निर्दिष्ट केलेल्या SASS फाइल सिंटॅक्समुळे समस्या आणि त्रुटी येऊ नयेत.

सर्वांना नमस्कार! वेळ किती लवकर उडून जातो. मी नियमित Css वरून Sass प्रीप्रोसेसरमध्ये लेखन शैली कशी बदलली हे माझ्या लक्षातही आले नाही. परंतु मला आधी समजले नाही - सास हा कोणता प्रकार आहे, त्याची आवश्यकता कशासाठी आहे, हे बहुधा लेआउटमधील सुपर प्रगत साधकांसाठी आहे. होय, प्रीप्रोसेसर वापरणे हे वेब डेव्हलपमेंटमध्ये नवीन स्तरावर एक पाऊल आहे, परंतु येथे काहीही भितीदायक किंवा क्लिष्ट नाही आणि हा लेख शेवटपर्यंत वाचून तुम्ही स्वतःच पहाल.

तर, प्रीप्रोसेसर आणि Sass बद्दल विशेषतः चांगले काय आहे? मी लगेच म्हणेन की इतर आहेत, जसे की लेस, स्टाइलस इ. ते सर्व समान तत्त्वानुसार कार्य करतात, परंतु प्रत्येकाची स्वतःची वैशिष्ट्ये आहेत. Sass ने व्यावसायिकांमध्ये खूप लोकप्रियता मिळवली आहे, ज्यामुळे शिकणे खूप सोपे झाले आहे. हे तंत्रज्ञान जितके अधिक लोकप्रिय, तितका मोठा समुदाय आणि दस्तऐवजीकरण अधिक विस्तृत.

प्रीप्रोसेसर हे कोड लिहिताना विकसकाला बहुतेक नियमित कामांपासून मुक्त करण्यासाठी डिझाइन केलेले आहेत, ज्यामुळे कामाची गती आणि गुणवत्ता वाढते. CSS प्रीप्रोसेसर व्यतिरिक्त, HTML प्रीप्रोसेसर देखील आहेत, उदाहरणार्थ, पग (जेड).

लेख रचना

दस्तऐवजीकरण

सासचा विकासक फ्रेंच नागरिक ह्यूगो गिरौडेल आहे, जो काही काळ जर्मनीमध्ये राहत होता. साहजिकच, दस्तऐवजीकरण इंग्रजीमध्ये आहे, परंतु मला वैयक्तिकरित्या ते चांगले समजले आहे (तांत्रिक इंग्रजी जाणून घेणे महत्वाचे आहे). परंतु रशियन भाषेत भाषांतर देखील आहे. मी अजूनही इंग्रजी आवृत्तीची शिफारस करेन, त्याची सवय होण्यासाठी आणि इंग्रजीचा अधिकाधिक सखोल अभ्यास करण्यासाठी हे आहे. परंतु रशियन देखील वाईट नाही.

  • इंग्रजी दस्तऐवजीकरण: http://www.sass-lang.com
  • रशियन दस्तऐवजीकरण: https://sass-scss.ru

Sass ते Css संकलित करत आहे

Sass ते Css संकलित करण्यासाठी सॉफ्टवेअरसाठी, मी Sass टास्क मॅनेजर प्लगइन वापरतो. सर्वसाधारणपणे, सास हा रुबी भाषेचा अनुप्रयोग (रत्न) आहे. म्हणून, जर तुम्हाला गुल्पशिवाय करायचे असेल, तर Css वर संकलित करण्यासाठी तुम्हाला रुबी प्रोग्रामिंग भाषा प्लॅटफॉर्म स्थापित करणे आवश्यक आहे. हे आता कसे केले जाते हे मी तुम्हाला दाखवणार नाही, तुम्ही त्याबद्दल अधिकृत वेबसाइटवर वाचू शकता.

वाक्यरचना - Sass, Scss

मी लगेच लक्षात घेतो की कोड लिहिण्यासाठी 2 वाक्यरचना आहेत: Sass आणि Scss.

Sass चे वाक्यरचना Scss पेक्षा थोडे वेगळे आहे. Scss हे नियमित Css कोडसारखे दिसते आणि Sass नियमांमधील कुरळे ब्रेसेस आणि अर्धविराम काढून टाकते. काही फंक्शन्स कशी लिहिली जातात त्यातही फरक आहेत आणि तुम्ही कोणता वाक्यरचना निवडाल याची काळजी घ्यावी लागेल. Sass - साठी फाइल विस्तार *.सास,आणि Scss साठी - *.scss. Sass वाक्यरचना जुनी आहे, आणि नवशिक्यांसाठी शिकणे सोपे करण्यासाठी Scss नंतर आले. मी स्वतः या प्रीप्रोसेसरचा Scss मध्ये अभ्यास करण्यास सुरुवात केली, अशा प्रकारे ते समजणे सोपे होते. आता मी Sass वर स्विच केले आहे, ते माझ्यासाठी अधिक सोयीचे आहे.

जर आपण सास बद्दल बोललो, तर त्याची कोड रचना इंडेंटेशनच्या आधारावर तयार केली गेली आहे (अखेर, त्यात कोणतेही कुरळे ब्रेसेस नाहीत) आणि आपण येथे सावधगिरी बाळगली पाहिजे, कारण टॅब्युलेटर (TAB - 4 स्पेस) आणि सामान्य स्पेस दोन्ही ( सहसा ही दुहेरी जागा असते). मी नेहमी टॅब्युलेटर वापरतो.

लक्षात ठेवा!जर तुम्ही इंडेंट म्हणून टॅब वापरत असाल, तर रिक्त जागा वगळल्या पाहिजेत जेणेकरून सर्व काही समान असेल. आणि त्याउलट - जर तुम्ही मोकळी जागा वापरत असाल तर टॅब्युलेटर वगळले पाहिजे. अन्यथा, कंपाइलर एक त्रुटी टाकेल.

सस

.मुख्य सामग्री .मुख्य-शीर्षक फॉन्ट-आकार: 30px फॉन्ट-वजन: 700 समास: 0 0 30px .वर्णन समास-तळा: 30px p रंग: #444444 फॉन्ट-आकार: 16px लाइन-उंची: 22px

Scss

.मुख्य सामग्री ( .मुख्य-शीर्षक ( फॉन्ट-आकार: 30px; फॉन्ट-वजन: 700; समास: 0 0 30px; ) .वर्णन ( समास-तळाशी: 30px; p ( रंग: #444444; फॉन्ट-आकार: 16px; रेखा -उंची: 22px; ) )

बऱ्याच कोड एडिटरमध्ये (उदाहरणार्थ, सबलाइम टेक्स्ट) पट्ट्यांच्या स्वरूपात इंडेंटेशन खुणा असतात, ज्यामुळे आपल्याला गोंधळात पडण्यापासून प्रतिबंध होतो. खालील उदाहरणांमध्ये मी Sass वाक्यरचना वापरेन.

Sass सह तुमचे जीवन सोपे करणे

नियमांचे घरटे

मला पहिल्यापासूनच सास बद्दल हेच आवडले होते, हे तंतोतंत CSS नियमांचे एकमेकांमध्ये घरटे होते. यामुळे बराच वेळ वाचतो आणि कोड संरचित आणि वाचण्यास सोपा आहे. उदाहरणार्थ, जर आम्हाला विशिष्ट पॅरेंट कंटेनरच्या घटकांसाठी शैली लिहायची असेल, तर Css मध्ये आम्हाला प्रत्येक वेळी पालक वर्ग निर्दिष्ट करणे आवश्यक आहे, उदाहरणार्थ:

मुख्य .शीर्षक ( फॉन्ट-आकार: 30px; रंग: #444; ) .मुख्य .उपशीर्षक ( फॉन्ट-आकार: 20px; ) .मुख्य .वर्णन ( फॉन्ट-आकार: 14px; समास-तळा: 30px; )

म्हणजेच, आम्ही सर्वत्र पालक वर्ग.मुख्य निर्दिष्ट करतो, आणि हे, यामधून, पूर्णपणे सोयीचे नाही. Sass वापरून, तुम्ही ते असे लिहू शकता:

Scss

.मुख्य ( .शीर्षक ( फॉन्ट-आकार: 30px; रंग: #444; ) .उपशीर्षक ( फॉन्ट-आकार: 20px; ) .वर्णन ( फॉन्ट-आकार: 14px; समास-तळाशी: 30px; ) )

सस

.मुख्य .शीर्षक फॉन्ट-आकार: 30px रंग: #444 .उपशीर्षक फॉन्ट-आकार: 20px .वर्णन फॉन्ट-आकार: 14px समास-तळाशी: 30px

सहमत आहे, ते अधिक सुबक दिसते आणि तुम्ही कोड जलद लिहू शकता, कारण आम्ही पालक वर्ग.मुख्य एकदाच लिहितो. रुबी आणि तत्सम सॉफ्टवेअर इन्स्टॉल न करता तुम्ही माझे अनुसरण करू इच्छित असल्यास, तुम्ही प्रात्यक्षिकासाठी ऑनलाइन कंपाइलर वापरू शकता.

नेस्टेड गुणधर्म

सासमध्ये घरटे बांधण्याच्या नियमांव्यतिरिक्त, घरट्याच्या गुणधर्मांची शक्यता आहे. उदाहरणार्थ, समास मूल्ये कशी लिहायची ते येथे आहे:

सस

.मुख्य .शीर्षक समास: शीर्ष: 10px उजवीकडे: 15px तळाशी: 10px डावीकडे: 15px

Css

.मुख्य .शीर्षक ( समास-शीर्ष: 10px; समास-उजवीकडे: 15px; समास-तळाशी: 10px; समास-डावीकडे: 15px; )

निवडक बंधनकारक किंवा जोडणी - आणि चिन्ह

आम्ही आमचा कोड लिहिण्याचा वेग वाढवू शकतो आणि चिन्ह वापरून जोडणी (कनेक्शन) वापरून ते आणखी कॉम्पॅक्ट करू शकतो - & . हे कसे कार्य करते? उदाहरणार्थ, आमच्याकडे वर्ग आहेत जसे की: .मुख्य-शीर्षक, .मुख्य-उपशीर्षक, .मुख्य-वर्णन. Sass मध्ये, हे वर्ग खालीलप्रमाणे लिहिले जाऊ शकतात:

मुख्य &-शीर्षक फॉन्ट-आकार: 30px रंग: #444 &-उपशीर्षक फॉन्ट-आकार: 20px आणि-वर्णन फॉन्ट-आकार: 14px समास-तळाशी: 30px

मुख्य-शीर्षक ( फॉन्ट-आकार: 30px; रंग: #444; ) .मुख्य-उपशीर्षक ( फॉन्ट-आकार: 20px; ) .मुख्य-वर्णन ( फॉन्ट-आकार: 14px; समास-तळा: 30px; )

चिन्ह वापरणे & आम्ही रूट क्लासशी कनेक्ट करतो, म्हणजेच या प्रकरणात रूट.मेनची सतत पुनरावृत्ती करण्याची आवश्यकता नाही. त्याच वेळी, हे लक्षात ठेवा की आम्ही कोणतेही बाल घटक तयार केलेले नाहीत.

/* लिंक */ a (रंग: लाल; ) a:होवर (रंग: निळा; ) /* स्यूडो-एलिमेंट */ .मुख्य::पूर्वी (सामग्री: ""; प्रदर्शन: ब्लॉक; फॉन्ट-आकार: 20px; ) .मुख्य :: नंतर ( सामग्री: ""; प्रदर्शन: ब्लॉक; फॉन्ट-आकार: 30px; )

काहीवेळा आपल्याला वर्तमान घटकापर्यंत निवडकर्त्यांची साखळी निर्दिष्ट करण्याची आवश्यकता असते. आपण अर्थातच ते रूटवर हलवू शकता, परंतु घरटे तुटू नये म्हणून आपण ते खालीलप्रमाणे लिहू शकता:

मुख्य .कंटेनर आणि रुंदी: 700px

Container.main (रुंदी: 700px)

हलवून & निवडकर्त्यानंतर, आम्ही डॉकिंग क्रम बदलला, म्हणजे या प्रकरणात class.container हा पालक आहे.

पालक निवडकर्त्यासाठी बंधनकारक, परंतु एक स्तर जास्त

वर, उदाहरण म्हणून, मी Sass कोड प्रदर्शित केले:

मुख्य &-शीर्षक फॉन्ट-आकार: 30px रंग: #444 &-उपशीर्षक फॉन्ट-आकार: 20px आणि-वर्णन फॉन्ट-आकार: 14px समास-तळाशी: 30px

आता कल्पना करा की .main-title ब्लॉकमध्ये आणखी एक घटक आहे ज्याला पालकांच्या संपूर्ण साखळीचा वापर करून स्पष्टपणे शैलीबद्ध करणे आवश्यक आहे. बर्याच काळापासून मी फक्त मूळ नाव निर्दिष्ट केले आहे (या प्रकरणात - मुख्य), परंतु हे फार सोयीचे नाही. मी सास डॉक्युमेंटेशन शोधायला सुरुवात केली आणि एक उपाय शोधला. खरं तर, सर्वकाही सोपे आहे - आम्ही पालकांना एक लिंक घोषित करणे आवश्यक आहे आणि आवश्यक तेथे ते वापरणे आवश्यक आहे.

मी आधी हे कसे केले:

मुख्य &-शीर्षक फॉन्ट-आकार: 30px रंग: #444 .main__icon // root.main निर्दिष्ट करा, अन्यथा, आपण वापरल्यास आणि ते .main-शीर्षक रंग: #444 रुंदी: 20px &-उपशीर्षक फॉन्ट-आकाराशी लिंक करेल : 20px आणि वर्णन फॉन्ट-आकार: 14px समास-तळाशी: 30px

आणि आता आपण हे करू शकता:

मुख्य $self: & // पालकांशी लिंक करा &-शीर्षक फॉन्ट-आकार: 30px रंग: #444 #($self)__icon // त्याऐवजी आणि पालक रंगाची लिंक वापरा: #444 रुंदी: 20px &-उपशीर्षक फॉन्ट-आकार: 20px आणि-वर्णन फॉन्ट-आकार: 14px समास-तळाशी: 30px

तुमच्या लक्षात आल्यास, आम्ही पालकांचा संदर्भ घोषित केला - $self: & . हे मला जावास्क्रिप्टमध्ये इव्हेंट ट्रिगर करणाऱ्या ऑब्जेक्टच्या (या) संदर्भाची थोडी आठवण करून देते. आता, योग्य ठिकाणी, आपण त्याला फक्त #($self) म्हणू शकतो. हे सगळं किती सोपं आहे हे कळलं, पण मी डोकं खाजवत होतो आणि विचार करत होतो की या समस्येवर सासरे काही उपाय नाही.

मुख्य-शीर्षक ( फॉन्ट-आकार: 30px; रंग: #444; ) .मुख्य-शीर्षक .मुख्य__ चिन्ह ( रंग: #444; रुंदी: 20px; ) .मुख्य-उपशीर्षक ( फॉन्ट-आकार: 20px; ) .मुख्य-वर्णन ( फॉन्ट-आकार: 14px समास-तळाशी: 30px)

टेम्पलेट्स

बहुतेकदा असे घडते की अनेक घटकांमध्ये समान शैलीचा आधार असतो, परंतु केवळ काही नियमांमध्ये ते एकमेकांपासून वेगळे असतात. उदाहरणार्थ बटणे घेऊ. जर आपण समान आकाराचे बटण घेतले तर ते एकमेकांपासून फक्त रंगात भिन्न असू शकतात: लाल, हिरवा, राखाडी इ. तुम्ही शुद्ध Css वापरत असल्यास, तुम्हाला स्वल्पविरामाने विभक्त केलेले, बेस स्टाइलमधील बटणाचे सर्व रंग निर्दिष्ट करावे लागतील किंवा बेस क्लास तयार करावा लागेल. पण Sass मध्ये हे खूप सोपे आहे:

% बटण पार्श्वभूमी-रंग: #666 सीमा: 1px घन #666 पॅडिंग: 0 20px फॉन्ट-आकार: 15px लाइन-उंची: 40px उंची: 40px .button-हिरवा @extend % बटण पार्श्वभूमी-रंग: हिरवा बॉर्डर-रंग: हिरवा . बटण-लाल @extend % बटण पार्श्वभूमी-रंग: लाल सीमा-रंग: लाल

बटण-हिरवा, .बटण-लाल (पार्श्वभूमी-रंग: #666; सीमा: 1px ठोस #666; पॅडिंग: 0 20px; फॉन्ट-आकार: 15px; लाइन-उंची: 40px; उंची: 40px; ) .बटण-हिरवा ( पार्श्वभूमी-रंग: हिरवा; बॉर्डर-रंग: हिरवा;

या प्रकरणात टेम्पलेट % बटण निवडक आहे (हे - % ने सूचित केले आहे) चिन्ह. हे सोयीचे आहे कारण टेम्पलेट निवडकर्ता स्वतः कुठेही गुंतलेला नाही, आणि त्याच्या शैली इतर निवडकर्त्यांद्वारे निर्देशांद्वारे वारशाने मिळतात - @वाढवणे. हे टेम्पलेट तुम्हाला पाहिजे तितक्या वेळा वापरले जाऊ शकते, ज्यामुळे कोडचे प्रमाण कमी होते.

SassScript

Sass मध्ये, प्रोग्रामिंग भाषांप्रमाणे, अशी वैशिष्ट्ये आहेत: व्हेरिएबल्स तयार करणे, अंकगणित ऑपरेशन्स (जोड, वजाबाकी, भागाकार, गुणाकार इ.), पुनरावृत्ती (लूप), फंक्शन्स (मिक्सिन्स) आणि बरेच काही. म्हणजेच, सास ही एक प्रकारची प्रोग्रामिंग भाषा आहे, जी पुन्हा कोड लिहिणे सुलभ करण्यासाठी आणि कामात लक्षणीय गती वाढविण्यासाठी डिझाइन केले आहे.

चल

Sass मध्ये व्हेरिएबल चिन्हाने सुरू होते $ , आणि नाव लॅटिनमध्ये लिहिलेले आहे, उदाहरणार्थ: $color . हे लक्षात घ्यावे की चिन्हे: " — "आणि" _ » अदलाबदल करण्यायोग्य आहेत. उदाहरणार्थ, तुम्ही $color-red ला कॉल केल्यास, तुम्ही $color_red ला कॉल करू शकता. व्हेरिएबल खालीलप्रमाणे परिभाषित केले आहे: $नाम: मूल्य, उदाहरणार्थ: $color: #f6f6f6 .

कोणत्याही नेस्टिंग पातळीच्या बाहेर घोषित केलेले व्हेरिएबल जागतिक स्तरावर उपलब्ध आहे, उदा. सर्वत्र वापरले जाऊ शकते. आपण निवडकर्त्याच्या कोणत्याही नेस्टिंग स्तरावर व्हेरिएबल परिभाषित केल्यास, ते फक्त या स्तरावर उपलब्ध असेल. संपूर्ण दस्तऐवजात ते जागतिक स्तरावर कार्य करण्यासाठी, तुम्ही एक कीवर्ड निर्दिष्ट करणे आवश्यक आहे !जागतिक.

शीर्षक $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

सर्वसाधारणपणे, व्हेरिएबल्स ही एक अद्भुत गोष्ट आहे; तुम्हाला फक्त ते घोषित करावे लागेल आणि एक मूल्य प्रविष्ट करावे लागेल आणि नंतर तुम्ही ते कुठेही वापरू शकता. उदाहरणार्थ, आम्ही रंगांना विशिष्ट नावे, फॉन्ट आकार, फॉन्ट फॅमिली इत्यादी देऊन परिभाषित करू शकतो. आणि सर्वसाधारणपणे कोणतेही अर्थ.

निर्देश

@वाढवणे

जेव्हा आम्ही रिक्त टेम्पलेटचा अभ्यास केला तेव्हा आम्ही या निर्देशाला स्पर्श केला. चला आपले ज्ञान पुन्हा एकत्रित करूया. वापरून @वाढवणेआम्ही कोणत्याही निवडकर्त्याचे नियम कॉपी करू शकतो. उदाहरणार्थ, लेआउट दरम्यान असे असू शकते की घटक " ए"आणि घटक" बी"दिसायला सारखे असू शकते. या प्रकरणात, आपण "A" घटकासाठी नियम लिहू शकता आणि "B" साठी आपण आवश्यक गुणधर्मांची किंचित पुन्हा व्याख्या करून, "A" घटकाच्या शैली कॉपी करू शकता.

ब्लॉक_ए बॅकग्राउंड-रंग: #cccccc सीमा: 5px सॉलिड #999999 पॅडिंग: 20px फॉन्ट-आकार: 30px उंची: 150px रुंदी: 150px .block_b @extend .block_a पॅडिंग: 15px

ब्लॉक_ए, .ब्लॉक_बी (पार्श्वभूमी-रंग: #cccccc; सीमा: 5px ठोस #999999; पॅडिंग: 20px; फॉन्ट-आकार: 30px; उंची: 150px; रुंदी: 150px; ) .block_b ( पॅडिंग: 15px;)

या उदाहरणात, आम्ही 2 एकसारखे चौरस बनवले. स्क्वेअर “B” साठी आम्ही फक्त पॅडिंग पुन्हा परिभाषित केले: 15px. @extend असे कार्य करते. मी हे निर्देश बऱ्याचदा वापरतो.

@इम्पोर्ट

हे निर्देश तुम्हाला अनेक स्टाईल फाइल्स एकामध्ये एकत्र करण्याची परवानगी देते. हे खूप सोयीस्कर आहे, विशेषतः जर प्रकल्प मोठा असेल. Css मध्ये अस्तित्वात असलेल्या निर्देशासह गोंधळात टाकू नका - @इम्पोर्ट. Css मध्ये, आवश्यक विशेषता − आहे url().

खरं तर, वेगवेगळ्या फायलींमध्ये शैली लिहिणे अधिक सोयीस्कर आहे आणि प्रत्येकाचा स्वतःचा उद्देश आहे. उदाहरणार्थ, संपूर्ण पृष्ठ फ्रेमवर्क प्रदेशांमध्ये विभागले जाऊ शकते: header.sass, sidebar.sass, footer.sass. आपण @import वापरून मुख्य फाईल main.sass मध्ये सर्वकाही गोळा करू शकता. फाइल नावाच्या सुरुवातीला अंडरस्कोर वापरून प्रदेश फाइल्स देखील निर्दिष्ट केल्या जाऊ शकतात, उदाहरणार्थ: _header.sass, _sidebar.sass, _footer.sass. अशा फायलींना तुकडे म्हणतात. तुकडे आयात करताना, फाइल विस्तार निर्दिष्ट करणे आवश्यक नाही.

साधी आयात

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

तुकडे आयात करत आहे

@import "शीर्षलेख" @import "sidebar" @import "footer"

फ्रॅगमेंट फाइल्समध्ये खालील विस्तार असू शकतात: *.सास, *.scssकिंवा *.css. उदाहरणार्थ, मुख्य फाइलमध्ये विस्तार असू शकतो *.सास, आणि साइट शीर्षलेख, उदाहरणार्थ, विस्तारासह *.scss. म्हणजेच, तुमच्याकडे मुख्य फाईलचा कोणता विस्तार आहे याने काही फरक पडत नाही. हे नोंद घ्यावे की आयात करताना, सर्व व्हेरिएबल्स आणि मिक्सिन (आम्ही त्यांच्याबद्दल खाली बोलू) मुख्य फाइलमध्ये हस्तांतरित केले जातात ज्यामध्ये आयात होते.

तुम्ही स्वल्पविरामाने विभक्त केलेल्या अनेक फाइल्सची आयात देखील निर्दिष्ट करू शकता: @import “हेडर”, “साइडबार”, “फूटर”.

लक्षात ठेवा की आयात आपण निर्देश निर्दिष्ट केलेल्या ठिकाणी होते @इम्पोर्ट. हे सहसा दस्तऐवजाच्या सुरूवातीस केले जाते.

@at-root

निर्देश @at-rootस्वत: साठी बोलतो आणि जर रशियनमध्ये अनुवादित केले तर ते असे वाटेल - "मुळापासून". दुसऱ्या शब्दात, आम्ही निवडकर्त्याला मूळ निवडकांची साखळी पूर्ववत करून, मूळवर हलवतो. येथे, अर्थातच, तुम्ही प्रश्न विचारू शकता: "जर तुम्ही सिलेक्टरला मॅन्युअली रूटवर हलवू शकत असाल तर या निर्देशाची गरज का आहे?" उत्तर सोपे आहे - रचना न मोडता कोड लिहिण्याची सोय. जेव्हा तुम्ही Sass सह पूर्ण प्रमाणात काम करायला शिकाल, तेव्हा तुम्हाला हे समजेल.

मुख्य &-शीर्षक फॉन्ट-आकार: 30px रंग: #444 @at-root .main__icon रंग: #444 रुंदी: 20px

मुख्य-शीर्षक ( फॉन्ट-आकार: 30px; रंग: #444; ) .मुख्य__ चिन्ह (रंग: #444; रुंदी: 20px; )

निर्देश आणि अभिव्यक्ती नियंत्रित करा

@ जर निर्देश असेल

जर त्यात संलग्न अभिव्यक्ती वगळता कोणतेही मूल्य परत करत असेल तर हे निर्देश शैली कार्यान्वित करते खोटेआणि निरर्थक.

$color: हिरवा .header @if $color == हिरवा पार्श्वभूमी-रंग: हिरवा @else असल्यास $color == निळा पार्श्वभूमी-रंग: निळा @else पार्श्वभूमी-रंग: #f6f6f6

शीर्षलेख (पार्श्वभूमी-रंग: हिरवा;)

ज्यांना प्रोग्रामिंग भाषेच्या किमान मूलभूत गोष्टी माहित आहेत (उदाहरणार्थ, javaScript किंवा Php) त्यांना समजणे कठीण होणार नाही. येथे सार समान आहे, मुख्य गोष्ट म्हणजे कोड लिहिण्याची वाक्यरचना जाणून घेणे.

@ निर्देशासाठी

प्रोग्रामिंग भाषेत (पुन्हा Javascript किंवा Php मध्ये) वापरून च्या साठीआपण एक सायकल सेट करू शकता. Sass मध्ये, हे निर्देश समान कार्य करते - ते एक लूप तयार करते. प्रत्येक पुनरावृत्तीसाठी (पुनरावृत्ती), एक काउंटर व्हेरिएबल वापरले जाते जे आउटपुट डेटा बदलते.

निर्देशामध्ये लेखनाचे 2 प्रकार आहेत: 1. @for $var from<начало>माध्यमातून<конец>आणि 2. @ साठी $var पासून<начало>करण्यासाठी<конец>. जर तुम्हाला शेवटचा अंक लूपमध्ये समाविष्ट करायचा असेल तर " वापरा माध्यमातून" चला एक उदाहरण पाहू:

@$i साठी 1 ते 6 .elem-item-#($i) बॅकग्राउंड-इमेज: url("images/image-#($i).jpg")

एलिम-आयटम-1 ( पार्श्वभूमी-प्रतिमा: url("images/image-1.jpg"); ) .elem-item-2 (पार्श्वभूमी-प्रतिमा: url("images/image-2.jpg"); ) . elem-item-3 ( पार्श्वभूमी-प्रतिमा: url("images/image-3.jpg"); ) .elem-item-4 (पार्श्वभूमी-प्रतिमा: url("images/image-4.jpg"); ) . elem-item-5 ( पार्श्वभूमी-प्रतिमा: url("images/image-5.jpg");)

अंतिम मूल्य निर्दिष्ट करण्यासाठी मी कीवर्ड वापरला " करण्यासाठी" या परिस्थितीत, चक्र क्रमांकावर समाप्त होते - 5 . Sass कोड किती कॉम्पॅक्ट दिसतो ते पहा.

@प्रत्येक निर्देश

निर्देश @प्रत्येक@for प्रमाणे, ते लूपमध्ये मूल्ये प्रदर्शित करते आणि सोयीस्कर आहे कारण, संख्यांव्यतिरिक्त, तुम्ही विशिष्ट मूल्यांवर पुनरावृत्ती करू शकता. चला वरील लूप घेऊ आणि काही मूल्यांमध्ये बदलू.

@each $bgItem प्राणी, तलाव, समुद्र, लँडस्केप, निसर्ग .elem-item-#($bgItem) पार्श्वभूमी-प्रतिमा: url("images/image-#($bgItem).jpg")

एलिम-आयटम-प्राणी ( पार्श्वभूमी-प्रतिमा: url("images/image-animal.jpg"); ) .elem-item-lake ( background-image: url("images/image-lake.jpg"); ) . elem-item-sea ( पार्श्वभूमी-प्रतिमा: url("images/image-sea.jpg"); ) .elem-item-landscape ( background-image: url("images/image-landscape.jpg"); ) . घटक-आयटम-नेचर ( पार्श्वभूमी-प्रतिमा: url("images/image-nature.jpg");)

या प्रकरणात, काउंटर व्हेरिएबल तयार केले जात नाही आणि पुनरावृत्तीची संख्या कीवर्ड नंतर तयार केलेल्या मूल्यांच्या संख्येवर अवलंबून असते. मध्ये" मूल्ये व्हेरिएबलद्वारे आउटपुट केली जातात (या उदाहरणात - $bgItem), ज्याचे नाव अनियंत्रित असू शकते.

मिक्सिन्स (कार्ये)

मिक्सिन्स (मिक्सिन्स) हे एक प्रकारचे फंक्शन आहे, जसे की प्रोग्रामिंग भाषेत, जे पुनरावृत्ती कोडपासून मुक्त होण्यासाठी डिझाइन केलेले आहे. मिक्सिन्समध्ये संपूर्ण स्टाइलिंग स्निपेट असू शकतात, ज्यांना सासमध्ये परवानगी आहे. अधिक स्पष्टतेसाठी एक उदाहरण पाहू.

@mixin संरेखित-केंद्र स्थान: परिपूर्ण शीर्ष: 50% डावीकडे: 50% ट्रान्सफॉर्म: भाषांतर(-50%, -50%) .कंटेनर @संरेखित-केंद्र समाविष्ट करा

@mixin डायरेक्टिव्हसह मिक्सिन तयार केले जाते, त्यानंतर मिक्सिनच्या नावाने विभक्त केलेली जागा, तसेच पर्यायाने पास केलेले पॅरामीटर्स. मी ताबडतोब लक्षात घेतो की मिक्सिन नावातील हायफन (-) आणि अंडरस्कोर (_) चिन्हे परस्पर बदलण्यायोग्य आहेत. मिक्सिनमध्ये केवळ नियमच नाही तर निवडक देखील असू शकतात. वर मी पॅरामीटर्सशिवाय प्राथमिक मिश्रणाचे उदाहरण दिले आहे.

मिक्सिनला @include निर्देशाने कॉल केले जाते आणि नंतर, एका स्पेसने विभक्त करून, आम्ही तयार केलेल्या मिक्सिनचे नाव सूचित करतो. वरील उदाहरणात, हे निरपेक्ष पोझिशनिंग वापरून X अक्ष आणि Y अक्षाच्या बाजूने ब्लॉकला मध्यभागी करत आहे. जर तुम्हाला हे वारंवार वापरावे लागत असेल, तर तुम्ही हे मान्य कराल की मध्यवर्ती शैली पुन्हा पुन्हा लिहिण्यापेक्षा फक्त मिक्सिन कॉल करणे सोपे आहे.

आता पॅरामीटर्स (वितर्क) असलेले मिश्रण पाहू.

@mixin बॉर्डर($width, $color) बॉर्डर: रुंदी: $width शैली: घन रंग: $color .square @include बॉर्डर(2px, #ccc)

चौरस (सीमा-रुंदी: 2px; सीमा-शैली: घन; सीमा-रंग: #ccc; )

तुम्ही बघू शकता, कंसातील मिक्सिनच्या नावानंतर आम्ही वितर्क निर्दिष्ट करतो, या प्रकरणात सीमा रुंदी आणि रंग. मी स्पष्टतेसाठी प्रदान केलेले हे सर्वात सोपे मिश्रण आहे. सराव मध्ये, आपण विविध परिस्थिती आणि चल वापरून अधिक जटिल मिश्रण शोधू शकता. पण आता सर्वकाही गुंतागुंतीचे करू नका; आपण नेहमी लहान आणि सोप्या गोष्टीपासून सुरुवात केली पाहिजे आणि नंतर आपण वर जाऊ.

हे Sass प्रीप्रोसेसरचे माझे छोटे पुनरावलोकन संपवते. लहान का? होय, कारण हे सर्व मी तुम्हाला सांगितले नाही. सर्वसाधारणपणे, वरील वापरून, तुम्ही सुरक्षितपणे आता Css ऐवजी Sass वापरणे सुरू करू शकता. मी वर दिलेल्या कागदपत्रांचा संदर्भ घेऊन तुम्ही Sass बद्दल अधिक जाणून घेऊ शकता.

बरं, तुमचे लक्ष दिल्याबद्दल सर्वांचे आभार! नेहमीप्रमाणे, टिप्पण्यांमध्ये प्रश्न विचारा आणि एकतर टेलिग्राम चॅनेल किंवा ईमेल वृत्तपत्राची सदस्यता घ्या (उजवीकडे साइडबारमध्ये फॉर्म) जेणेकरून मनोरंजक काहीही चुकू नये.

माझ्या इतर पोस्ट्समध्ये भेटू...



आम्ही वाचण्याची शिफारस करतो