Heim >Web-Frontend >CSS-Tutorial >Hocus-Pokus: Erstellen eines Design-freien Sass-Frameworks
Hocus-Pocus ist ein Design-freier Sass-Framework, an dem ich in meiner Freizeit arbeite. Die Hauptidee hinter Hocus-Pocus besteht darin, ein universelles und leichtes Stylesheet-Starter-Kit zu erstellen, das sich auf die häufigsten Funktionen konzentriert. In diesem Artikel werde ich behandeln, warum ich mich entschlossen habe, mein eigenes Sass -Framework und den Ansatz zu erstellen, den ich dabei gewählt habe.
Die zweite Frage, die dann folgt, lautet:
Warum verwenden Sie nicht ein vorhandenes, bekanntes und bewährtes Framework wie Bootstrap?
Meine Antwort darauf kommt auf die Vorlieben und meine Herangehensweise an CSS an. Ich denke, Bibliotheken wie Bootstrap oder Foundation sind großartig und haben sich stark verändert, wie die Leute über CSS denken. In den meisten Fällen in meiner eigenen Projektarbeit brauche ich jedoch nicht all diese Funktionen und UI -Komponenten wie Fortschrittsriegel oder Semmelbrösel. Stattdessen habe ich lieber etwas universelleres. Ich bevorzuge etwas, das ich in jedem Projekt verwenden kann, ohne das Framework -CSS -Klassen außer Kraft zu setzen.Aus den obigen Gründen können Sie in Hocus-Pocus das Aussehen jeder einzelnen Komponente mit Variablen ändern. Sie können sogar einige Funktionen deaktivieren oder eine Reihe von Helfern definieren. Der Nachteil dieses Ansatzes besteht
Das Framework ist verfügbar und einfach mit zwei verschiedenen Paketmanagern zu installieren: Bower und NPM. Es erfordert SASS (minimal erforderliche Version ist 3.3.0) und Autoprefixer ausführen. Autoprefixer wird verwendet, um die erforderlichen Anbieter -Präfixe zur endgültigen kompilierten CSS -Datei hinzuzufügen. Ich mache mir heutzutage nicht allzu sehr Sorgen um Kompatibilität zwischen verschiedenen Browsern, da ich persönlich die Autoprefixing für ausreichend finde. Zusätzlich verwende ich SASS-Linter (SCSS-Lint), dies ist jedoch nicht erforderlich, um Hocus-Pokus auszuführen und die Dinge richtig zu machen. Hocus-Pocus funktioniert ohne es.
Das nächste Prinzip ist für jeden Rahmen wichtig - die Namenskonvention. Ich bevorzuge reguläre Klassennamen im Dash -Stil ohne Bem. Ich werde mich nicht beschweren, wenn Sie ein Fan von BEM sind und es vorziehen, die BEM -Namenskonvention zu verwenden, wenn es für Sie funktioniert - und machen Sie es. Aus meiner Sicht behebt BEM nicht alle Verantwortungsprobleme in CSS. Ich finde auch, dass ich mich meinem CSS mit weniger Elementen auf Klassenebene nähere, wenn ich Bem verwende. Das Hinzufügen eines neuen Elements zu einem vorhandenen Block ist einfach zu einfach.
Zu guter Letzt achte ich genau auf das Schreiben von Dokumentationen und den Hokus-Pokus-Changelog auf dem neuesten Stand. Die Dokumentation muss nicht perfekt sein, besonders zu Beginn, aber ich versuche immer, Zeit zu finden, um sie zu verbessern. Dies hilft Newcomern
Framework -FunktionenDie meisten Rahmenklassen sind von vorhandenen Projekten inspiriert, an denen ich in der Vergangenheit gearbeitet habe. Sie können auch einige Ähnlichkeiten mit anderen CSS -Frameworks erkennen, die mich inspiriert haben, insbesondere meine Favoriten - Primer und Inuitcss.
Framework-Funktionen in Hocus-Pocus gehören:
$<span>rwd-type: desktop-first; </span>$<span>rwd-map: ( </span> <span>'mobile': 680px </span><span>); </span>$<span>spacing-map: ( </span> <span>'double': double($spacing-unit) </span><span>);</span>Dann haben Sie in kompilierten CSS Zugriff auf Klassen wie .Mobile-1/2, .mobil versteckte und .mobile-padding-Double.
Mein Ziel ist es, Hocus-Pocus zu einem idealen Sass-Starter-Kit zu machen, egal wie komplex Ihre Projekte sind. Auf diese Weise können Sie sich darauf konzentrieren, projektspezifische UI -Komponenten zu schreiben und Ihr Thema zu definieren.
Ich habe nicht vor, große neue Funktionen zu implementieren. Ich denke, die enthaltenen Funktionen sind eine angemessene Menge an Funktionen und sind wahrscheinlich die letzten. Ich werde die Syntax für einige Komponenten wahrscheinlich verbessern oder einige Namen einzelner Klassen ändern, aber ich prognostiziere keine Kompatibilitätsbrechungsänderungen aus der aktuellen Version. Im Moment bin ich mehr bestrebt, Fehler zu beheben, die auftreten, wenn mehr Menschen Hocus-Pocus versuchen.
Wenn Sie der Meinung sind, dass das Hocus-Pocus-Framework für Sie in einem bevorstehenden Projekt hilfreich ist, finden Sie eine vollständige Dokumentation auf hocus-pocus.io. Der Hocus-Pocus-Code ist Open Source und alle auf GitHub verfügbar. Ich schätze Kommentare, Feedback und Informationen zu potenziellen Problemen.
Verwenden eines Design-Free-Sass-Frameworks bietet mehrere Vorteile. Es ermöglicht den Entwicklern, eine saubere und organisierte Codebasis beizubehalten, wodurch das Verwalten und die Aktualisierung erleichtert wird. Es bietet auch eine solide Grundlage, um darauf aufzubauen und Zeit und Mühe in den ersten Entwicklungsstadien zu sparen.
Das obige ist der detaillierte Inhalt vonHocus-Pokus: Erstellen eines Design-freien Sass-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!