Κοινή χρήση τεχνολογίας

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

Το Sass και το SCSS είναι δύο συντακτικές του Sass (Syntactically Awesome Stylesheets). Και τα δύο χρησιμοποιούνται για τη σύνταξη πιο δομημένου και διατηρήσιμου CSS. Ακολουθούν οι κύριες συγκρίσεις τους στη σύνταξη και τα χαρακτηριστικά:

1. Γραμματική μορφή

Sass (σύνταξη εσοχής)

• χωρίς σγουρά τιράντες {} και ερωτηματικό;。
• Χρησιμοποιήστε εσοχή για να υποδείξετε ένθετες και ιεραρχικές σχέσεις.

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, η ένθεση χρησιμοποιεί εσοχή, ενώ στο SCSS, χρησιμοποιούνται σγουρά στηρίγματα:

// 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

Θα τα προσθέσω εδώ την επόμενη φορά που θα τα χρησιμοποιήσω στο έργο μου!