Σύγχρονο CSS με SASS

Γλώσσα: Γερμανικά

Σύγχρονο CSS με Sass - Εκπαιδευτικό πρακτικό εγχειρίδιο

Έχεις πάντα ενοχληθεί από το γεγονός ότι δεν υπάρχουν μεταβλητές και βρόχοι στο CSS; Τέλος με αυτό! Οι προεπεξεργαστές CSS όπως το Sass παρέχουν ακριβώς αυτά τα χαρακτηριστικά. Έτσι, είναι δυνατή η αποτελεσματική δημιουργία κώδικα CSS. Εκτός από το Sass, σε αυτό το εγχειρίδιο θα ρίξουμε φυσικά μια ματιά στο δημοφιλές framework Compass, το οποίο ανεβάζει τη χρήση του Sass σε ένα άλλο επίπεδο. Μάθε σε τρεις ώρες τις δυνατότητες που προσφέρουν το Sass και το Compass.

Γίνε μάστερ του Sass με αυτήν την τριώρη βίντεο εκπαίδευση και τον Web Developer Daniel Koch.
Ορίστε μεταβλητές, δημιουργήστε δικά σας mixins, εξερευνήστε χρώματα και αριθμούς και τελικά, χρησιμοποιήστε το Compass.
Μάθε να δημιουργείς CSS αποτελεσματικά και να εφαρμόζεις τις νέες σου γνώσεις για μελλοντικά projects.

Βήμα προς βήμα προς την επαγγελματική ανάπτυξη CSS. Όταν CSS, τότε μοντέρνο και με Sass - Ο Daniel Koch σου δείχνει!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

λεπτομέρειες

Μπορεί να χρησιμοποιηθεί με:
Περιεχόμενα: 3 h Σεμινάριο βίντεο
Άδεια: ιδιωτική και εμπορική Δικαιώματα χρήσης

Κατηγορίες

Σχεδιασμός Ιστοσελίδων, CMS & Ανάπτυξη

Δημιουργήθηκε με αγάπη από:

Daniel Koch

Σύγχρονο CSS με Sass

Δωρεάν

Σύγχρονο CSS με Sass - 01 Εισαγωγή

Μέσω των προεπεξεργαστών CSS είναι δυνατόν να γραφτεί CSS πολύ πιο αποτελεσματικά. Τι είναι αυτοί οι προεπεξεργαστές, ποιοι είναι διαθέσιμοι και γιατί η επιλογή αυτή έπεσε στο Sass φαίνεται σε αυτό το βίντεο.

Μοντέρνο CSS με Sass - 02 Η εγκατάσταση

Πριν το Sass γίνει χρήσιμο, πρέπει να εγκατασταθεί. Και η προϋπόθεση γι' αυτό είναι το Ruby. Και τα δύο - δηλαδή η εγκατάσταση του Ruby και του Sass - δείχνονται σε αυτό το βίντεο. Έπειτα μπορείτε να δοκιμάσετε αμέσως αν η εγκατάσταση του Sass πράγματι πέτυχε.

Μοντέρνο CSS με Sass - 03 Επιδέξια μεταγλώττιση.

Σύγχρονο CSS με Sass - Επιδέξια μεταγλώττιση

Οι στυλ-πρέπει να μετατραπούν σε αρχεία CSS για να είναι πραγματικά χρήσιμοι. Χάρη στην εντολή παρακολούθησης, μπορείτε εύκολα να ανιχνεύσετε τις αλλαγές σε μεμονωμένα αρχεία ή εντός ολόκληρων φακέλων.

Συγχρονιστείτε το CSS χρησιμοποιώντας το Sass - Συγχωνεύοντας τα αρχεία 04

Συγχώνευση αρχείων CSS σε Sass - 04 αρχεία

Με την εντολή @import μπορούν να εισαχθούν και να συγχωνευτούν αρχεία SCSS. Το γεγονός ότι το όνομα αρχείου ξεκινά με κάτω παύλα σχετίζεται με έναν πτυχή αυτού του βίντεο.

Σύγχρονο CSS με Sass - Δήλωση και χρήση μεταβλητών 05

Μοντέρνο CSS με Sass - Δήλωση και χρήση μεταβλητών 05

Στο Sass υπάρχει η δυνατότητα δήλωσης μεταβλητών. Αυτό το concept δεν είναι διαθέσιμο στο παραδοσιακό CSS, αλλά στο Sass αποτελεί ένα έξυπνο μέσο για την αποτελεσματική ανάπτυξη των stylesheets.

Σύγχρονο CSS με Sass - 06 Η αρχή του Nesting

Σύγχρονο CSS με Sass - 06 Το αρχή των διοχετεύσεων

Χάρη στο nesting, η σύνταξη Sass μπορεί να παραμείνει πολύ πιο λεπτή απ' ό,τι στο CSS. Η ένθετη δομή σας βοηθά επίσης στο να γράφετε κώδικα πολύ πιο καθαρά.

Σύγχρονο CSS με Sass - 07 Επιδέξια Κληρονομία με Extend

Σύγχρονο CSS με Sass - 07 Επιδέξια κληρονομιά με Extend

Η χρήση της @extend σας επιτρέπει να μεταφέρετε ένα σύνολο ιδιοτήτων CSS από έναν επιλογέα σε έναν άλλο. Αυτό βοηθάει επίσης στη διατήρηση λεπτών αρχείων Sass.

Σύγχρονο CSS με Sass - 08 Μονάδες με τους επιλογείς με τους πλαίσιο-κράτιδες.

Μοντέρνο CSS με Sass - 08 Μονάδες με τους επιλογείς των στοιχείων αντικατάστασης

Ο επιλογέας υποκατάστασης επιτρέπει τον ορισμό των μονάδων. Αυτή η μετατροπή σε μονάδες επιτρέπει την κατακερματισμένη σύνταξη Sass σε λογικά τμήματα που μπορούν να ενσωματωθούν σε διαφορετικά σημεία.

Μοντέρνο CSS με Sass - Ορισμός 09 Mixins

Τα mixins είναι συναρτήσεις που μπορούν, για παράδειγμα, να απλοποιήσουν σημαντικά τις διαδικασίες εργασίας. Σε αυτό το βίντεο δείχνεται πώς μπορείτε να ορίσετε τα δικά σας mixins και να τα εφαρμόσετε τελικά.

Μοντέρνο CSS με Sass - Επιλογέας γονικού στοιχείου

Σύγχρονο CSS με Sass - Επιλογέας γονικού στοιχείου 10

Με τον επιλογέα που αφορά αυτό το βίντεο, μπορείτε να έχετε πρόσβαση στο γονικό στοιχείο ενός στοιχείου. Αυτός ο επιλογέας δεν υπάρχει γνωστά στο CSS και προσφέρει συνεπώς σημαντική αξία προστιθέμενη.

Σύγχρονο CSS με Sass - Αυτοματοποίηση με For loops

Μοντέρνο CSS με Sass - 11 Αυτοματοποίηση με For-Βρόχους

Το Sass επιτρέπει τη χρήση βρόχων For. Αυτό λειτουργεί πολύ απλά στο Sass και μπορεί για παράδειγμα να χρησιμοποιηθεί για τον ορισμό ενός δικού σας συστήματος πλέγματος.

Σύγχρονο CSS με Sass - 12 επαναλαμβανόμενοι και while κύκλοι

Σύγχρονο CSS με Sass – 12 Επαναληπτικές και While-Βρόχοι

Πέρα από τη λέξη ”For”, μπορούν επίσης να χρησιμοποιηθούν και οι λέξεις ”Each” και ”While”. Πώς μπορεί να χρησιμοποιηθεί αυτό για την αυτοματοποίηση είναι που δείχνει αυτό το βίντεο.

Σύγχρονο CSS με Sass - 13 αποφάσεις περίπτωσης με if και else.

Μοντέρνο CSS με Sass - 13 αποφάσεις περιπτώσεων με if και else.

Στις γλώσσες όπως το PHP και το JavaScript, υπάρχει η δυνατότητα να αντιδράσετε σε διαφορετικά συμβάντα χρησιμοποιώντας την if και την else. Κάτι τέτοιο υπάρχει πράγματι και στο Sass. Πώς μπορείτε να το χρησιμοποιήσετε δείχνει αυτό το βίντεο.

Σύγχρονο CSS με Sass - 14 μαθηματικοί τελεστές

Μπορείτε να υπολογίσετε σε Sass. Αυτό είναι πρακτικό, για παράδειγμα, όσον αφορά τον ορισμό των μεγεθών γραμμάτων. Χάρη στους αντίστοιχους τελεστές, μπορείτε επίσης να δημιουργήσετε το δικό σας εξατομικευμένο σύστημα πλέγματος.

Μοντέρνο CSS με Sass - 15 χρωματικά παιχνίδια

Μοντέρνο CSS με Sass - 15 Παιχνίδια Χρωμάτων

Φυσικά μπορούν να οριστούν χρώματα στο Sass. Το Sass όμως πηγαίνει πολύ πιο πέρα σε αυτόν τον τομέα από το συμβατικό CSS. Χάρη στις αντίστοιχες λειτουργίες, μπορούν παράδειγμα να πραγματοποιηθούν εύκολα μετασχηματισμοί στα χρώματα.

Σύγχρονο CSS με Sass - 16 Compass

Το Compass Framework επεκτείνει τις δυνατότητες του Sass ακόμη περισσότερο. Αυτό το πρώτο βίντεο δείχνει πώς μπορείτε να εγκαταστήσετε και να χρησιμοποιήσετε το Compass.

Σύγχρονο CSS με Sass - 17 Compass και CSS3.

Η ιστοσελίδα έργου του Compass είναι το κεντρικό μέσο πληροφόρησης όταν πρόκειται για την εργασία με αυτό το πλαίσιο. Θα σας δείξω πώς να εργαστείτε με την τεκμηρίωση, χρησιμοποιώντας τα χαρακτηριστικά CSS3 του Compass.

Σύγχρονο CSS με Sass - 18 Compass σε δράση και μια ματιά στο Susy.

Σύγχρονο CSS με Sass - 18 Compass στη δράση μπαλλών και μια ματιά στο Susy.

Ένα παράδειγμα δείχνει πόσο εύκολα μπορούν να εφαρμοστούν πράγματα με το Compass. Στο τέλος αυτής της σειράς αναλύεται επίσης ένα εναλλακτικό πλαίσιο Sass. Το Susy παρέχει ένα λεπτό σύστημα πλέγματος.

Λεπτομέρειες περιεχομένου

CSS σε αποτελεσματική λειτουργία - με το Sass: ξεκίνα με το πρακτικό εκπαιδευτικό πρόγραμμα
O Sass έχει επαναπροσδιορίσει την ανάπτυξη CSS, επιτρέποντας επιτέλους την αποτελεσματική συγγραφή κώδικα CSS. Σε τρίωρο μαθηματικό πρόγραμμα με 18 μαθήματα θα μάθεις όλα τα σημαντικά θέματα σχετικά με το Sass και τη συλλογή Sass-Framework Compass.

Εγκατάσταση του Sass περιβάλλοντος ανάπτυξης

Πριν ξεκινήσεις το ταξίδι σου με το συμπρακτικό πρόγραμμα CSS μέσω του Sass, πρέπει να προχωρήσεις σε εγκατάσταση. Αλλά μην αγχώνεσαι - η διαδικασία είναι πολύ απλή. Το Ruby και μερικές εντολές στη γραμμή εντολών είναι αρκετές για να γίνεις υπερήφανος κάτοχος ενός Sass περιβάλλοντος ανάπτυξης. Όποιος μέχρι τώρα έχει διστάσει να εγκαταστήσει το Sass, θα καθοδηγηθεί βήμα προς βήμα μέσα από τη διαδικασία εγκατάστασης. Ένα πρώτο τεστ θα δείξει ποια έκδοση του Sass είναι εγκατεστημένη.

Πρώτοι βήματα με έναν τυπικό προγραμματισμό

Ακολουθούν ήδη τα πρώτα βήματα: Ξεκινάμε με το Sass! Ακολουθεί μια πρώτη ματιά στη σύνταξη, ακολουθούν θεμελιώδεις λειτουργίες γλώσσας. Μαθαίνεις τις μεταβλητές, βλέπεις μια τυπική δομή έργου και βρίσκεσαι γρήγορα στο Sass.

Ανάπτυξη: Βρόχοι & If-Δηλώσεις

Έχοντας προετοιμαστεί έτσι, ακολουθεί η επαγγελματική ανάπτυξη: Αυτά που καθιστούν το Sass τόσο ιδιαίτερο είναι τα πράγματα που θυμίζουν σχεδόν πραγματικές γλώσσες σεναρίων όπως το JavaScript. Και στο Sass μπορούν να οριστούν βρόχοι και να χρησιμοποιηθούν if-δηλώσεις. Αυτά τα πράγματα είναι επομένως η βασική προϋπόθεση για το στοιχείο των Mixins στο Sass. Αυτά είναι ισχυρές συναρτήσεις που σου επιτρέπουν να δουλέψεις με το Sass, τελικά λοιπόν με το CSS σας βοηθούν σημαντικά.

Compass: Απλοποιεί την εργασία με το CSS

Η μεγαλειώδης ολοκλήρωσηα αυτής της εκπαίδευσης αποτελείται από Compass. Αυτό αναβαθμίζει την ανάπτυξη του Sass σε επίπεδο, καθώς αυτή η δομή Sass παρέχει αμέτρητα εργαλεία και λειτουργίες που καθιστούν την εργασία με το CSS ακόμα πιο απλή.

Αυτό που μαθαίνεις στο εκπαιδευτικό πρόγραμμα CSS και Sass

Κατανοείς βήμα προς βήμα τις λειτουργίες του Sass, από την εισαγωγή στα επαγγελματικά εργαλεία έως την εργασία με το Compass. Έτσι έχεις στα χέρια σου αυτό που είναι εφικτό αυτό το χρόνο και μπορείς να εφαρμόσεις αμέσως τις γνώσεις σου. Η συγγραφή CSS δεν ήταν ποτέ τόσο αποτελεσματική!