Anemos CSS Lexer
Άνοιξε το console για να δείς το αποτέλεσμα.
Σε global scope υπάρχει η μεταβλητή raw, inspected και Options
Για την ανάπτυξη τα Options του raw δεν πρέπει να μετατραπούν σε string, συνεπώς δεν χρησιμοποιούμε την inspect για την ανάπτυξη, αλλά μόνο για debugging.
Σύνταξη:
Βάζουμε ένα ή 2 θαυμαστικά πριν από κάθε δήλωση.
αν βάλουμε ένα σημαίνει πως το css θα ακολουθήσει "atomic" στρατηγική, δηλαδή κάθε εντολή θα σπάσει με πολλά classes, ενώ αν βάλουμε 2 θαυμαστικά σημαίνει πως όλη η δήλωση θα θεωρηθεί ένα.
Μετά το θαυμαστικό έχουμε την επιλογή να βάλουμε ένα directive.
Τα default directives σε αυτό το παράδειγμα είναι το "medium" και το "large", αλλά ο χρήστης θα μπορεί να φτιάξει και δικά του.
Πχ: !medium{color:red} ή !medium(bla bla){color:red}
Τα directives δίνουν την δυνατότητα επεξεργασίας πριν, κατά, και μετά το parsing.
Επίσης δέχονται arguments.
Μετα τα directives υπάρχουν τα At Rules.
Αν βάλουμε περισσότερα σημαίνει ότι ο κώδικας θα πάει το ένα μέσα στο άλλο.
Τα κενά εδώ συμβολιζονται με το underscore "_".
Πχ στο παρακάτω παράδειγμα το "color:red" θα μπει μέσα στο "@layer blabla" το οποίο είναι μέσα στο "@media(min-width:641px)".
!@media(min-width:641px)@layer_blabla{color:red};
Τα κενά εδώ στους css selectors δηλώνονται με το ίσον "=".
!:hover=div{color:red};
Επίσης αναγνωρίζονται τα nested declarations.
!{
color:red;
+div{color:green}
}