2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
सामग्रीसूची
scss तथा css इत्येतयोः मध्ये तुलना
पूर्वनिर्धारितचरानाम् भेदं कुर्वन्तु
वैश्विकचरानाम् स्थानीयचरानाञ्च भेदं कुर्वन्तु
नेस्टेड् मातापितृ चयनकर्ता सन्दर्भ (&) .
SCSS सशर्तकथनानां उपयोगं करोति
SCSS मध्ये त्रयः प्रकाराः लूप्
कस्टम् फंक्शन्स् इत्यस्य उपयोगं कुर्वन्तु
SCSS (Sassy CSS) CSS कृते पूर्वसंसाधकभाषा अस्ति, एषा CSS इत्यस्य आधारेण अधिकानि कार्याणि लचीलतां च प्रदाति, येन शैलीपत्राणां लेखनं प्रबन्धनं च अधिकं कुशलं सुलभं च भवति ।
अत्र SCSS इत्यस्य केचन लाभाः सन्ति ।
सारांशतः SCSS न केवलं CSS इत्यस्य सर्वाणि कार्याणि धारयति, अपितु चर, नेस्टिंग्, मिश्रणं, आयातम् इत्यादीनि उन्नतविशेषतानि अपि प्रवर्तयति एतानि कार्याणि विकासकान् शैलीपत्राणि अधिकतया लिखितुं प्रबन्धयितुं च अनुमतिं ददति तथा च आधुनिक-अग्रभागे सामान्यतया उपयुज्यन्ते विकासस्य समाप्तिम्।
व्याकरणम् : १.
पठनीयता तथा परिपालनक्षमता : १.
कार्यविस्तारः : १.
संगतता : १.
शिक्षण वक्रः : १.
सारांशतः, साधारण CSS इत्यस्य तुलने, SCSS शैलीपत्राणां लेखनं, परिपालनं च सरलीकर्तुं अधिकानि साधनानि विशेषताश्च प्रदाति, तथा च बृहत् जटिलपरियोजनानां विकासाय विशेषतया उपयुक्ता अस्ति तथापि लघुपरियोजनानां वा सरलस्टाइलिंग-आवश्यकतानां वा कृते सादा CSS अधिकं सरलं सुविधाजनकं च भवितुम् अर्हति ।
scss शिक्षितुं पूर्वं प्रथमं vscode मध्ये द्वौ प्लग-इन् संस्थापयन्तु यत् scss इत्येतत् अनन्तरं शिक्षणार्थं साधारण CSS सञ्चिकासु परिवर्तयन्तु!
प्लग-इन्-भण्डारे sass इति अन्वेष्टुम्, निम्नलिखितद्वयं प्लग-इन् डाउनलोड् कृत्वा vscode पुनः आरभत!
SCSS मध्ये चरानाम् घोषणं अतीव सरलम् अस्ति, चराः परिभाषितुं $ चिह्नस्य उपयोगं कर्तुं शक्नुवन्ति ।
अत्र SCSS मध्ये चराः कथं घोषयितुं उपयोक्तुं च प्रदर्शयति सरलं उदाहरणम् अस्ति:
- // 定义变量
- $primary-color: #3498db;
- $secondary-color: #2ecc71;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
उपरिष्टाद् उदाहरणे वयं क्रमशः प्राथमिकवर्णं गौणवर्णं च संग्रहीतुं $primary-color तथा $secondary-color इति चरद्वयं परिभाषितवन्तः । ततः वयं एतान् चरानाम् उपयोगं शैलीनियमेषु कर्तुं शक्नुमः यत् सम्पूर्णे शैलीपत्रे वर्णाः सुसंगताः सुलभाः च भवन्ति ।
यदा SCSS सञ्चिका सामान्य CSS सञ्चिकायां संकलिता भवति तदा सर्वेषां चरानाम् स्थाने तेषां तत्सम्बद्धमूल्यानां स्थापनं भविष्यति, अतः अन्तिमजनितस्य CSS सञ्चिकायां किमपि चरघोषणा न भविष्यति
SCSS मध्ये, यदि परिभाषितं न भवति तर्हि चरस्य वैकल्पिकं मूल्यं भवति इति सुनिश्चित्य पूर्वनिर्धारितचरानाम् उपयोगं कर्तुं शक्नुवन्ति । विशेषतया विषयवस्तुन सह कार्यं कुर्वन् अथवा शैल्याः विन्यासः क्रियते तदा एतत् उपयोगी भवति ।
अत्र पूर्वनिर्धारितचराः कथं घोषयितव्याः, कथं च उपयोक्तव्याः इति उदाहरणम् अस्ति ।
- // 声明变量，并设置默认值
- $primary-color: #3498db !default;
- $secondary-color: #2ecc71 !default;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
उपरिष्टाद् उदाहरणे वयं पूर्वनिर्धारितमूल्यं परिभाषितुं !default टैग् इत्यस्य उपयोगं कृतवन्तः । अस्य अर्थः अस्ति यत् यदि $primary-color अथवा $secondary-color तस्मिन् SCSS सञ्चिकायां परिचयस्य पूर्वं अन्यत्र परिभाषितं न भवति तर्हि ते निर्दिष्टानि पूर्वनिर्धारितमूल्यानि (#3498db तथा #2ecc71) उपयुज्यन्ते यदि एते चराः सञ्चिकायाः आयातात् पूर्वं परिभाषिताः सन्ति तर्हि पूर्वनिर्धारितमूल्यानि उपेक्षितानि भविष्यन्ति ।
पूर्वनिर्धारितचरानाम् उपयोगस्य लाभः अस्ति यत् पूर्वमेव परिभाषितचरानाम् अधिलेखनं विना चरानाम् वैकल्पिकमूल्यानि प्रदातुं शक्नोति । इदं विशेषतया बहुशैलीसञ्चिकासु विषयवस्तुनिर्माणार्थं वा चरसाझेदारीार्थं वा उपयोगी भवति ।
नोटः- स्थानीयचराः वैश्विकचरानाम् अधिलिखन्ति
यदा वैश्विकचरस्य समाननाम्नः चरः स्थानीयव्याप्तौ पुनः घोषितः भवति तदा स्थानीयचरः वैश्विकचरस्य मूल्यं अधिलिखति । एतेन वैश्विकस्थितिं प्रभावितं विना विशिष्टचयनकस्य वा मिश्रकस्य वा कृते भिन्नानि चरमूल्यानि परिभाषितुं शक्यन्ते ।
स्थानीयचरं वैश्विकचररूपेण परिणतुं !global कीवर्डस्य उपयोगं कुर्वन्तु
SCSS स्थानीयचरं वैश्विकचररूपेण स्पष्टतया घोषयितुं !global कीवर्डं प्रदाति । एतेन स्थानीयचरस्य मूल्यं वैश्विकव्याप्तिपर्यन्तं प्रवर्तते यत्र तत् घोषितं भवति, समाननाम्ना विद्यमानं किमपि वैश्विकचरं अधिलेखनं भवति
उदाहरण:
- // 全局变量
- $primary-color: #3498db;
-
- .button {
- // 局部变量，覆盖全局变量
- $primary-color: #cc582e;
- background-color: $primary-color; // 使用局部变量值
- }
-
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #cddb34;
-
- .button {
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #2ecc71 !global;
- }
-
- body {
- background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
- }
प्रथमे उदाहरणे .button चयनकर्तायाः अन्तः स्थानीयचरः $primary-color वैश्विकचरस्य मूल्यं अधिलिखति । द्वितीये उदाहरणे !global कीवर्डस्य उपयोगेन .button चयनकस्य अन्तः स्थानीयचराः वैश्विकचररूपेण परिवर्तिताः भवन्ति, अतः वैश्विकव्याप्तेः चरमूल्यानि प्रभावितानि भवन्ति
चयनकर्ता नेस्टिंग् बालचयनकर्तृणां कृते शैलीनियमान् मातापितृचयनकानां अन्तः नेस्ट् कर्तुं अनुमतिं ददाति, उदाहरणार्थं:
- // SCSS代码
- .navbar {
- background-color: #333;
- padding: 10px;
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- display: inline-block;
- margin-right: 10px;
-
- a {
- text-decoration: none;
- color: #fff;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
- }
उपरिष्टाद् कोड् मध्ये .navbar चयनकर्तायां नेस्टेड् ul, li, उपचयनकं च भवति । एषा नेस्टेड् संरचना शैलीनियमान् स्पष्टतरं प्रबन्धनं सुलभं च करोति ।
SCSS मध्ये & चिह्नस्य उपयोगः मातापितृचयनकस्य सन्दर्भार्थं भवति, विशेषतः छद्म-वर्गस्य अथवा छद्म-तत्त्वस्य सन्दर्भे उपयोगी भवति । उदाहरणार्थं, वर्तमानचयनकस्य मातापितृचयनकस्य सन्दर्भं कर्तुं &:hover इत्यस्य उपयोगं कुर्वन्तु तथा च :hover अवस्थाशैलीं योजयन्तु ।
- .button {
- background-color: #3498db;
- color: #fff;
- padding: 8px 16px;
- border: none;
- text-align: center;
- text-decoration: none;
- display: inline-block;
-
- &:hover {
- background-color: #2980b9;
- }
- }
SCSS चयनकर्तानेस्टिंग् इत्यस्य बहुस्तरस्य अनुमतिं ददाति, उदाहरणार्थं:
- .container {
- .row {
- .col {
- width: 100%;
- }
- }
- }
SCSS इत्यस्मिन् चयनकर्ता नेस्टिंग् इत्यस्य अतिरिक्तं एट्रिब्यूट् नेस्टिंग् इत्यस्य विशेषता अपि अस्ति, यत् अन्यत् विशेषता अस्ति यत् स्टाइलशीट् स्वच्छतरं, प्रबन्धनं च सुलभं करोति । गुण-नीस्टिंग् इत्यनेन सम्बन्धित-गुणाः एकत्र व्यवस्थिताः भवन्ति, यत् वस्तुनः रूपस्य सदृशं भवति ।
गुणनेस्टिंग् इत्यस्य उपयोगः कोडस्य खण्डस्य अन्तः सम्बन्धितगुणान् स्थापयितुं शक्यते, यथा-
- .navbar {
- font: {
- family: Arial, sans-serif;
- size: 16px;
- weight: bold;
- }
- margin: {
- top: 10px;
- bottom: 15px;
- }
- padding: {
- left: 20px;
- right: 20px;
- }
- }
उपरिष्टाद् उदाहरणे font, margin, padding blocks इत्यत्र सम्बद्धानि विशेषतानि सन्ति । एषा संस्था प्रत्येकस्य खण्डस्य अन्तः गुणाः स्पष्टतराः, परिवर्तनं, परिपालनं च सुलभं च करोति ।
SCSS मध्ये, inheritance (Extend) इति अतीव उपयोगी विशेषता अस्ति यत् एकस्य चयनकर्तायाः अन्यस्य चयनकर्तायाः शैलीनियमान् उत्तराधिकारं प्राप्तुं शक्नोति । एतत् विशेषता डुप्लिकेट् CSS कोड् न्यूनीकरोति तथा च स्टाइलशीट् अधिकं मॉड्यूलर तथा च परिपालनं सुलभं करोति ।
@extend कीवर्ड इत्यस्य उपयोगेन चयनकर्ता उत्तराधिकारः प्राप्तुं शक्यते । उदाहरणतया:
- %message-shared {
- border: 1px solid #ccc;
- padding: 10px;
- color: #333;
- }
-
- .success-message {
- @extend %message-shared;
- background-color: lightgreen;
- }
-
- .error-message {
- @extend %message-shared;
- background-color: lightcoral;
- }
उपरिष्टाद् उदाहरणे %message-shared एकः स्थानधारकचयनकः अस्ति यः शैलीनां सामान्यसमूहं परिभाषयति । .success-message तथा .error-message क्रमशः %message-shared इत्यस्य शैलीं उत्तराधिकारं प्राप्नुवन्ति तथा च स्वकीयानि पृष्ठभूमिवर्णानि योजयन्ति ।
उत्तराधिकारः विशेषतया सामान्यलक्षणयुक्तानां चयनकर्तानां कृते उपयुक्तः भवति, यथा बटनघटकाः, सन्देशपेटिकाः इत्यादयः । उत्तराधिकारस्य माध्यमेन भवान् स्वस्य कोडं स्वच्छं, परिपालनीयं च कृत्वा भिन्न-भिन्न-परिदृश्येषु समानशैली-नियमानाम् पुनः उपयोगं कर्तुं शक्नोति ।
सारांशतः, SCSS मध्ये उत्तराधिकारः एकं शक्तिशाली साधनम् अस्ति यत् भवन्तं शैलीद्वैधतां परिहरितुं भवतः कोडस्य मॉड्यूलरता स्पष्टतां च निर्वाहयितुं साहाय्यं कर्तुं शक्नोति तथापि, तस्य उपयोगं कुर्वन्, चयनकर्तानां क्रमं, स्थानं च, तथा च उचितं प्रति ध्यानं दातव्यम् तस्य प्रभावं अधिकतमं कर्तुं स्थानधारकाणां उपयोगः।
स्थानधारकः % SCSS मध्ये एकः विशेषः चयनकर्ता अस्ति यस्य उपयोगः प्रायः शैलीनियमान् परिभाषितुं भवति ये उत्तराधिकारं प्राप्तुं शक्यन्ते परन्तु वास्तविकं CSS निर्गमं न जनयन्ति । विशेषतः : १.
- %placeholder-selector {
- // 样式规则
- }
उपरिष्टाद् उदाहरणे %placeholder-selector % इत्यनेन आरभ्यमाणः स्थानधारकचयनकर्ता अस्ति । एतत् शैलीनियमानां समुच्चयं परिभाषयति, परन्तु तत्सम्बद्धं चयनकर्तानाम संकलितस्य CSS मध्ये न दृश्यते ।
- .some-class {
- @extend %placeholder-selector;
- // 可选的额外样式
- }
@extend कीवर्डस्य उपयोगेन .some-class %placeholder-selector इत्यस्य शैलीं उत्तराधिकारं प्राप्तुं शक्नोति । अस्य अर्थः अस्ति यत् .some-class %placeholder-selector इत्यत्र परिभाषितान् सर्वान् शैलीनियमान् प्रयोक्ष्य तत्सम्बद्धं CSS आउटपुट् जनयिष्यति ।
सारांशेन, प्लेसहोल्डर चयनकर्ता% SCSS मध्ये एकं शक्तिशाली साधनम् अस्ति यत् विकासकानां कृते शैलीपत्राणां पुनः उपयोगक्षमतां, परिपालनक्षमतां च सुधारयितुम् अनावश्यकं CSS अतिरेकं न्यूनीकर्तुं साहाय्यं कर्तुं शक्नोति
Mixins इत्येतत् SCSS इत्यस्मिन् अन्यत् अतीव शक्तिशाली विशेषता अस्ति यत् शैलीनियमानां समुच्चयं पुनः उपयोक्तुं योग्ये कोडखण्डे समाहितं कर्तुं शक्नोति ततः यत्र यत्र आवश्यकता भवति तत्र तत्र सन्दर्भं दातुं शक्नोति placeholder selector % इत्यस्य विपरीतम्, mixins प्रत्यक्षतया CSS आउटपुट् जनयितुं शक्नुवन्ति, अतः तासां परिस्थितिषु उपयुक्तं यत्र बहुस्थानेषु समानशैल्याः उपयोगः आवश्यकः भवति ।
- @mixin mixin-name($parameter1, $parameter2, ...) {
- // 样式规则使用参数
- }
उपरिष्टाद् उदाहरणे @mixin कीवर्डः mixin-name इति mixin परिभाषयति यत् बहुविधं तर्कं (यदि आवश्यकं भवति) स्वीकुर्वितुं शक्नोति तथा च तस्य अन्तः शैलीनियमानां समुच्चयं परिभाषयति ।
- .some-class {
- @include mixin-name(value1, value2, ...);
- // 可选的额外样式
- }
चयनकर्तायां mixin आह्वयितुं तस्मै च पैरामीटर्स् पारयितुं @include कीवर्डस्य उपयोगं कुर्वन्तु । एवं प्रकारेण .some-class mixin मध्ये परिभाषितशैलीनियमान् प्रयोक्ष्यति तथा च पारितपैरामीटर् मूल्यानि तत्सम्बद्धेषु पैरामीटर् चरयोः प्रयोजयिष्यति ।
- @mixin button-style($background-color, $text-color) {
- display: inline-block;
- padding: 10px 20px;
- border: none;
- border-radius: 4px;
- background-color: $background-color;
- color: $text-color;
- text-align: center;
- text-decoration: none;
- font-size: 16px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-
- &:hover {
- background-color: darken($background-color, 10%);
- }
- }
- .button-primary {
- @include button-style(#3498db, #fff);
- }
-
- .button-secondary {
- @include button-style(#2ecc71, #fff);
- }
सारांशेन, mix @mixin SCSS मध्ये शैलीनियमानां समापनार्थं पुनः उपयोगाय च एकं शक्तिशाली साधनम् अस्ति यत् एतत् CSS इत्यस्य परिपालनक्षमतां लचीलतां च महत्त्वपूर्णतया सुधारयितुम् अर्हति तथा च विभिन्नजटिल-पुनरावृत्तिशैली-आवश्यकतानां कृते उपयुक्तम् अस्ति ।
SCSS इत्यस्मिन् सशर्तकथनानि विशिष्टशर्तानाम् आधारेण CSSशैल्याः गतिशीलरूपेण उत्पन्नं कर्तुं शक्नुवन्ति । SCSS मध्ये सशर्तकथनानि अन्येषु प्रोग्रामिंगभाषासु सशर्तकथनानां सदृशानि सन्ति, यत्र @if, @else if, @else च सन्ति ।
@if स्टेट्मेण्ट् इत्यनेन कण्डिशन् इत्यस्य आधारेण शैल्याः उत्पन्नं कर्तुं शक्यते । वाक्यविन्यासः यथा- १.
- $use-rounded-corners: true;
-
- .button {
- @if $use-rounded-corners {
- border-radius: 4px;
- }
- }
उपर्युक्ते उदाहरणे यदि $use-rounded-corners चरस्य मूल्यं सत्यं भवति तर्हि .button वर्गस्य शैली उत्पद्यते, यत्र border-radius: 4px; यदि कण्डिशन् मिथ्या अस्ति तर्हि शैल्याः एषः भागः न उत्पद्यते ।
@if इत्यस्य अतिरिक्तं अधिकानि सशर्तशाखाः योजयितुं @else if तथा @else इत्येतयोः उपयोगं अपि कर्तुं शक्नुवन्ति ।
- $button-size: medium;
-
- .button {
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- }
अस्मिन् उदाहरणे $button-size चरस्य मूल्यानुसारं .button वर्गे प्रयोक्तुं भिन्नानि पैडिंग् मूल्यानि चयनितानि सन्ति । यदि मेलशर्तः नास्ति तर्हि @else इत्यस्मिन् कोडखण्डः निष्पादितः भविष्यति ।
अधिकजटिलतर्कं नियन्त्रयितुं सशर्तकथनानि अपि नेस्ट् कर्तुं शक्यन्ते ।
- $button-style: flat;
- $button-size: medium;
-
- .button {
- @if $button-style == flat {
- background-color: transparent;
- color: #333;
- border: 1px solid #333;
-
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- } @else if $button-style == raised {
- background-color: #3498db;
- color: #fff;
- padding: 10px 20px;
- border-radius: 4px;
- } @else {
- // 默认样式
- background-color: #db6334;
- color: #fff;
- padding: 10px 20px;
- }
- }
अस्मिन् उदाहरणे $button-style तथा $button-size इत्येतयोः मूल्यानां आधारेण प्रयोक्तुं भिन्नाः शैल्याः चयनिताः सन्ति । एषः नेस्टेड्-पद्धतिः बहुशर्तानाम् आधारेण जटिलशैलीनियमान् जनयितुं सम्भवं करोति ।
सशर्तकथनानां उपयोगेन, भवान् SCSS मध्ये अधिकं लचीलं गतिशीलं च शैलीपरिभाषां प्राप्तुं शक्नोति, तथा च भिन्नशर्तानाम् आधारेण भिन्नानि CSS नियमाः जनयितुं शक्नोति, अतः शैलीपत्रस्य परिपालनक्षमतायां मापनीयतायां च सुधारः भवति
SCSS मध्ये, त्रीणि मुख्यानि लूपिङ्ग् कन्स्ट्रक्ट्स् सन्ति येषां उपयोगेन पुनरावृत्तिः CSS नियमाः उत्पन्नाः कर्तुं शक्यन्ते: @for, @each, @while च ।
@for लूप् इत्यस्य उपयोगः कतिपयेषु चरणेषु, परिस्थितिषु च शैल्याः पुनः पुनः उत्पन्नं कर्तुं भवति ।
मूलव्याकरणम्：
- @for $i from <start> through <end> {
- // 循环体
- }
उदाहरण：
- @for $i from 1 through 3 {
- .item-#{$i} {
- width: 100px * $i;
- }
- }
उपर्युक्ते उदाहरणे .item-1, .item-2, .item-3 इति त्रयः वर्गाः उत्पद्यन्ते, येषां विस्ताराः क्रमशः 100px, 200px, 300px इति सेट् भवन्ति ।
@each लूप् इत्यस्य उपयोगः सूची अथवा मानचित्रप्रकारस्य दत्तांशं भ्रमितुं प्रत्येकस्य तत्त्वस्य शैल्याः जनयितुं च भवति ।
मूलव्याकरणम्：
- @each $var in <list or map> {
- // 循环体
- }
उदाहरण：
- $colors: (red, green, blue);
-
- @each $color in $colors {
- .text-#{$color} {
- color: $color;
- }
- }
अस्मिन् उदाहरणे .text-red, .text-green, .text-blue इति त्रयः वर्गाः उत्पद्यन्ते, तेषां पाठवर्णाः च तत्सम्बद्धवर्णमूल्येषु सेट् भवन्ति ।
@while लूप् पुनः पुनः कस्यापि कण्डिशन् इत्यस्य आधारेण शैल्याः जनयति यावत् कण्डिशन् न पूर्यते ।
मूलव्याकरणम्：
- $i: 1;
- @while $i < 4 {
- // 循环体
- $i: $i + 1; // 更新条件
- }
उदाहरण：
- $i: 1;
- @while $i < 4 {
- .item-#{$i} {
- width: 100px * $i;
- }
- $i: $i + 1;
- }
एषः कोडः .item-1, .item-2 तथा .item-3 इति त्रीणि वर्गाणि जनयति, तेषां विस्तारं च क्रमशः 100px, 200px, 300px इति सेट् करोति ।
त्रयः SCSS लूप् संरचनाः @for, @each तथा @while इत्येतयोः उपयोगः अनुक्रमणिकाद्वारा लूप् कर्तुं, traverse list अथवा map type data इत्यनेन, तथा च क्रमशः सशर्तपाशस्य आधारेण शैल्याः जनयितुं भवति । एतानि लूप् संरचनानि SCSS अधिकं शक्तिशालीं लचीलं च कुर्वन्ति, आवश्यकतानुसारं जटिल CSS नियमाः जनयितुं समर्थाः भवन्ति ।
SCSS मध्ये, शैलीपत्राणि कस्टम् फंक्शन् इत्यनेन वर्धयितुं शक्यन्ते ये पैरामीटर्स् स्वीकुर्वन्ति तथा च प्रोसेस्ड् मूल्यानि प्रत्यागच्छन्ति ।
SCSS मध्ये, कार्याणि परिभाषितुं @function कीवर्डस्य उपयोगं कुर्वन्तु, येषु पैरामीटर्स्, रिटर्न् मूल्यानि च भवितुम् अर्हन्ति । यथा, वयं कस्यचित् तत्त्वस्य कुलपेटीप्रतिरूपविस्तारस्य गणनाय एकं फंक्शन् परिभाषयामः :
- @function total-width($padding, $border, $margin, $content-width) {
- @return $padding + $border + $margin + $content-width;
- }
उपर्युक्ते उदाहरणे - १.
एकदा फंक्शन् परिभाषितं जातं चेत् तस्य उपयोगः शैल्याः आवश्यकमूल्यानां गणनां जनयितुं च कर्तुं शक्यते । उदाहरणतया:
- .element {
- width: total-width(10px, 1px, 5px, 100px);
- }
अस्मिन् उदाहरणे 10px, 1px, 5px तथा 100px इति पैरामीटर् इत्यनेन सह total-width फंक्शन् आह्वयते । फंक्शन् (116px) द्वारा प्रत्यागतं परिणामं .element इत्यस्य width गुणस्य उपरि प्रयुक्तं भविष्यति ।
पृष्ठस्य कृष्णशुक्लविषयं स्विच् कर्तुं SCSS इत्यस्य उपयोगं कुर्वन्तु
html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="main.css">
- <title>黑白色主题切换</title>
- </head>
- <body>
- <div class="container">
- <button id="theme-toggle">切换主题</button>
- <div class="box">
- <div class="content">
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- </div>
- </div>
- </div>
-
- <script src="main.js"></script>
- </body>
- </html>
scss
- // 定义轻主题的样式变量
- $light-theme: (
- background-color: white,
- text-color: black,
- highlight-color: #f0f0f0
- );
-
- // 定义暗主题的样式变量
- $dark-theme: (
- background-color: black,
- text-color: white,
- highlight-color: #333333
- );
-
- // 定义一个混合（mixin）来应用主题样式
- // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
- @mixin theme($theme) {
- background-color: map-get($theme, background-color);
- color: map-get($theme, text-color);
-
- // 为 .box 类应用主题的高亮颜色
- .box {
- background-color: map-get($theme, highlight-color);
- }
- }
-
- // 应用轻主题样式到 body 元素，并添加过渡效果
- body {
- @include theme($light-theme);
- transition: all 0.3s ease;
- }
-
- // 为 body 的 dark 类应用暗主题样式
- body.dark {
- @include theme($dark-theme);
- }
-
- // 设置容器的文本居中和顶部间距
- .container {
- text-align: center;
- margin-top: 20px;
- }
-
- // 配置主题切换按钮的样式
- #theme-toggle {
- padding: 10px 20px;
- cursor: pointer;
- border: none;
- outline: none;
- background-color: #007bff;
- color: white;
- font-size: 16px;
- border-radius: 5px;
- }
-
- // 鼠标悬停在主题切换按钮上时改变背景色
- #theme-toggle:hover {
- background-color: #0056b3;
- }
-
- // 定义 .box 类的基本样式和过渡效果
- .box {
- margin: 20px auto;
- padding: 20px;
- width: 50%;
- border: 1px solid #ccc;
- transition: all 0.3s ease;
-
- // 内容区域的样式配置
- .content {
- p {
- margin: 10px 0;
- }
- }
- }
js
- /**
- * 为主题切换按钮添加点击事件监听器
- * 当按钮被点击时，切换文档主体的黑暗主题样式
- *
- * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
- * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
- * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
- */
- document.getElementById('theme-toggle').addEventListener('click', () => {
- document.body.classList.toggle('dark');
- });
सः ३० वर्षाणाम् अनुसरणं प्रौयोगिक कौलिका समुह, सलग, जावा, जावास्च, php, css समुच्चय भाषा सुनाधारी, ph, css समुच्चय संस्कृत भाषा सुनावं, सरोकार विद्वान विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग
