Εσωτερικές Ρυθμίσεις και Προσόδια Sass

Κανόνες ενσωμάτωσης Sass

Το Sass επιτρέπει την ενσωμάτωση των επιλογέων CSS με τον ίδιο τρόπο με τον HTML.

Δείτε αυτό το παράδειγμα κώδικα Sass για τη σύνταξη της σύνταξης του navigation του ιστοτόπου:

Γλώσσα SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Παρακαλώ σημειώστε ότι στο Sass,ul、li και a Ο επιλογέας ενσωματώνεται στο nav στον επιλογέα.

Όμως στο CSS, οι κανόνες είναι καθορισμένοι με σειρά (όχι ενσωματωμένοι):

Γλώσσα CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Επειδή μπορείτε να ενσωματώσετε χαρακτηριστικά Sass, είναι πιο καθαρό και πιο εύκολο να διαβάσετε σε σύγκριση με το standard CSS.

Ενσωματωμένα Sass χαρακτηριστικά

Πολλοί CSS χαρακτηρισμοί έχουν τον ίδιο πρόθεμα, όπως π.χ.:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• text-overflow

Με τη χρήση του Sass, μπορείτε να τα γράψετε ως εσωτερικές ιδιότητες:

Γλώσσα SCSS:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

Ο Μετατροπέας Sass θα μετατρέψει τον παραπάνω κώδικα σε κανονικό CSS:

Έξοδος CSS:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;