प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sass तथा SCSS इति Sass (Syntactically Awesome Stylesheets) इत्यस्य द्वौ वाक्यविन्यासौ स्तः । तयोः उपयोगः अधिकसंरचितं, परिपालनीयं च CSS लिखितुं भवति । अत्र तेषां मुख्यानि तुलनाः वाक्यविन्यासे विशेषतासु च सन्ति ।

1. व्याकरणस्वरूपम्

सास्स (इण्डेन्टेशन वाक्य रचना) २.

• न कुञ्चिताः ब्रेसिज् {} अर्धविरामः च;。
• नीडीकरणस्य श्रेणीबद्धसम्बन्धस्य च सूचनाय इण्डेन्टेशनस्य उपयोगं कुर्वन्तु ।

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px
1
2
3
4
5
6
7

SCSS (Sassy CSS) ९.

• मानक CSS इत्यस्य सदृशं, कुञ्चितब्रेस् इत्यस्य उपयोगेन {} अर्धविरामः च;。
• विद्यमानानाम् सर्वेषां CSS-सङ्केतानां सह सङ्गतम् ।

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}
1
2
3
4
5
6
7
8
9
10

2. चराः

उभयत्र चरानाम् समर्थनं भवति तथा च समानवाक्यविन्यासः भवति:

$primary-color: #333;

nav {
  color: $primary-color;
}
1
2
3
4
5

3. नीडीकरणम्

उभयम् अपि नेस्टिंग् इत्यस्य समर्थनं करोति, परन्तु Sass इत्यस्मिन्, nesting इत्यत्र indentation इत्यस्य उपयोगः भवति, यदा SCSS इत्यस्मिन् curly braces इत्यस्य उपयोगः भवति:

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. मिश्रकाः

मिश्रकस्य परिभाषा आह्वानं च उभयत्र समानम् - १.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
1
2
3
4
5
6
7
8

5. प्रक्षेपः

उभयत्र प्रक्षेपणस्य प्रयोगः समानः भवति : १.

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}
1
2
3
4

6. संचालनम्

उभयत्र शैल्याः कार्याणि समर्थयति :

.container {
  width: 100% - 20px;
}
1
2
3

7. उत्तराधिकारः

उभयशैलीविरासतां समर्थयति : १.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

अहं तानि अत्र योजयिष्यामि अग्रिमे समये यदा अहं तान् मम परियोजनायां उपयुञ्जामि!