τα στοιχεία επικοινωνίας μου
Ταχυδρομείο[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Το Sass και το SCSS είναι δύο συντακτικές του Sass (Syntactically Awesome Stylesheets). Και τα δύο χρησιμοποιούνται για τη σύνταξη πιο δομημένου και διατηρήσιμου CSS. Ακολουθούν οι κύριες συγκρίσεις τους στη σύνταξη και τα χαρακτηριστικά:
Sass (σύνταξη εσοχής)
{}
και ερωτηματικό;
。nav
ul
margin: 0
padding: 0
li
display: inline-block
margin-right: 5px
SCSS (Sassy CSS)
{}
και ερωτηματικό;
。nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 5px;
}
}
Και οι δύο υποστηρίζουν μεταβλητές και έχουν την ίδια σύνταξη:
$primary-color: #333;
nav {
color: $primary-color;
}
Και τα δύο υποστηρίζουν την ένθεση, αλλά στο Sass, η ένθεση χρησιμοποιεί εσοχή, ενώ στο SCSS, χρησιμοποιούνται σγουρά στηρίγματα:
// Sass
nav
ul
margin: 0
padding: 0
// SCSS
nav {
ul {
margin: 0;
padding: 0;
}
}
Ο ορισμός και η επίκληση του μίκτη είναι ίδια και στα δύο:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Η παρεμβολή χρησιμοποιείται το ίδιο και στα δύο:
$side: left;
.margin-#{$side} {
margin-#{$side}: 10px;
}
Και οι δύο υποστηρικτικές λειτουργίες σε στυλ:
.container {
width: 100% - 20px;
}
Και τα δύο υποστηρίζουν κληρονομικότητα στυλ:
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
Θα τα προσθέσω εδώ την επόμενη φορά που θα τα χρησιμοποιήσω στο έργο μου!