Hocus-Pocus est un cadre SASS sans conception sur lequel je travaille pendant mon temps libre. L'idée principale derrière Hocus-Pocus est de faire un kit de démarrage de feuille de style universel et léger qui se concentre sur les caractéristiques les plus courantes. Dans cet article, je vais couvrir pourquoi j'ai décidé de construire mon propre cadre SASS et l'approche que j'ai adoptée en le faisant.
En bref, je dirais que j'ai commencé à travailler sur un framework SASS parce que je voulais gagner du temps lors du démarrage de nouveaux projets Web. J'ai remarqué que même lorsque je travaille sur des conceptions vraiment personnalisées, j'ajoute toujours le même ensemble d'outils, j'inclus les mêmes packages standard et implémente une collection similaire de composants CSS de base.
La deuxième question qui suit est alors - pourquoi vous n'utilisez pas un framework existant, bien connu et éprouvé comme bootstrap?
Ma réponse à cela revient aux préférences et à mon approche du CSS. Je pense que les bibliothèques comme Bootstrap ou Foundation sont excellentes et ont grandement changé la façon dont les gens pensent au CSS. Cependant, dans la plupart des cas dans mon propre travail de projet, je n'ai tout simplement pas besoin de toutes ces fonctionnalités et composants de l'interface utilisateur comme les barres de progression ou la chapelure. Au lieu de cela, je préfère avoir quelque chose de plus universel. Je préfère quelque chose que je peux utiliser dans n'importe quel projet, sans avoir besoin de remplacer les classes CSS Framework.
Pour les raisons ci-dessus, dans Hocus-Pocus, vous pouvez modifier l'apparence de chaque composant avec des variables. Vous pouvez même désactiver certaines fonctionnalités ou définir une gamme d'aides. L'inconvénient de cette approche est que je ne peux pas fournir une version CSS compilée du cadre car il n'y a pas de moyen raisonnable d'utiliser Hocus-Pocus sans capacité à mettre à jour les variables.
Le cadre est disponible et facile à installer avec deux gestionnaires de packages différents: Bower et NPM. Il nécessite que la version SASS (la version minimale requise est 3.3.0) et l'autopréfixer à fonctionner. AutoPrefixer est utilisé pour ajouter les préfixes du fournisseur nécessaire au fichier CSS compilé final. Je ne m'inquiète pas trop de la compatibilité entre divers navigateurs de nos jours car je trouve personnellement que l'autoprefixage est suffisant. De plus, j'utilise SASS Linter (SCSS-lint), mais cela n'est pas nécessaire pour exécuter du hocus-pocus et faire les choses de la bonne façon. Hocus-Pocus fonctionnera sans lui.
Le principe suivant est important pour chaque cadre - la convention de dénomination. Je préfère les noms de classe réguliers de style Dash sans BEM. Je ne me plaindrai pas si vous êtes un fan de BEM et que vous préférez utiliser la convention de dénomination BEM, si cela fonctionne pour vous - allez-y. De mon point de vue, BEM ne résout pas tous les problèmes de responsabilité dans CSS. Je trouve également que j'approche de mon CSS en utilisant moins d'éléments de niveau de classe lorsque j'utilise BEM. L'ajout d'un nouvel élément à un bloc existant est tout simplement trop facile.
Enfin, je prête une attention particulière à la rédaction de la documentation et à la mise à jour du changelog Hocus-Pocus. La documentation n'a pas besoin d'être parfaite, surtout au début, mais j'essaie toujours de trouver le temps de l'améliorer. Cela aide les nouveaux arrivants à savoir comment fonctionne l'outil et me permet de suivre les fonctionnalités du cadre.
Les caractéristiques du cadre suivantes sont les plus caractéristiques du hocus-pocus à mon avis et donnent le meilleur aperçu de son objectif.
La plupart des cours de cadre sont inspirés des projets existants sur lesquels j'ai travaillé dans le passé. Vous pouvez également repérer certaines similitudes avec d'autres cadres CSS qui m'ont inspiré, en particulier mes favoris - amorce et inuitcss.
Les fonctionnalités du framework dans Hocus-Pocus incluent:
par exemple:
$<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>
Ensuite, dans CSS compilé, vous aurez accès à des classes comme .mobile-1/2, .Mobile-Hidden et .Mobile-Padding-Double.
Mon objectif est de faire de Hocus-Pocus un kit de démarrage SASS idéal, quelle que soit la complexité de vos projets. De cette façon, vous pouvez vous concentrer sur l'écriture de composants d'interface utilisateur spécifiques au projet et la définition de votre thème.
Je ne prévois pas de mettre en œuvre de nouvelles fonctionnalités majeures. Je pense que les fonctionnalités incluses sont une quantité raisonnable de fonctionnalités et sont probablement les dernières. Je vais probablement améliorer la syntaxe pour certains composants ou changer certains noms de classe unique, mais je ne prédis pas de modifications de rupture de la compatibilité par rapport à la version actuelle. Pour l'instant, je suis plus déterminé à corriger les bogues qui se produisent alors que de plus en plus de gens essaient du hocus-pooc.
Si vous pensez que le cadre Hocus-Pocus pourrait vous être utile dans un projet à venir, vous pouvez trouver une documentation complète sur hocus-pocus.io. Le code Hocus-Pocus est open source et tous disponibles sur GitHub. J'apprécie les commentaires, les commentaires et les informations sur les problèmes potentiels.
Un framework SASS (SyntaCtical Awesome Stylesheets) est une bibliothèque préparée qui est censée être utilisée comme base pour démarrer un projet . Il est important dans le développement Web car il aide à accélérer le processus de création de feuilles de style pour les sites Web. Il permet aux développeurs d'utiliser des variables, des règles imbriquées, des mixins et des fonctions, qui peuvent tous être très utiles pour maintenir CSS.
Un cadre SASS sans conception est différent d'un cadre SASS ordinaire en ce qu'il n'impose aucune décision de conception à l'utilisateur. Il fournit une ardoise propre pour les développeurs sur lesquels s'appuyer, leur permettant d'implémenter leurs propres choix de conception sans avoir à remplacer les styles préexistants.
L'utilisation d'un framework SASS sans conception offre plusieurs avantages. Il permet aux développeurs de maintenir une base de code propre et organisée, ce qui facilite la gestion et la mise à jour. Il fournit également une base solide sur laquelle s'appuyer sur, ce qui permet d'économiser du temps et des efforts dans les premiers stades de développement.
La construction d'un cadre SASS sans conception implique plusieurs étapes. Tout d'abord, vous devez configurer votre structure de projet. Ensuite, vous pouvez commencer à créer vos variables, mixins et fonctions. Après cela, vous pouvez commencer à construire vos styles de base et vos modules de mise en page. Enfin, vous pouvez compiler votre SASS dans CSS.
Pour créer un framework SASS sans conception, vous aurez besoin d'un Éditeur de texte, compilateur SASS et navigateur Web pour les tests. Vous pouvez également trouver utile d'utiliser un coureur de tâche comme Gulp ou Grunt pour automatiser votre flux de travail.
Oui, un Le cadre SASS sans conception peut être utilisé pour tout type de projet. Il est particulièrement utile pour les grands projets où le maintien d'une base de code propre et organisée est crucial.
Vous pouvez personnaliser un conception sans conception sans conception Framework SASS en modifiant les variables, les mixins et les fonctions en fonction de vos besoins. Vous pouvez également ajouter vos propres styles et modules de mise en page.
Quelques meilleures pratiques lorsque vous travaillez avec un cadre SASS sans conception sans design Incluez le maintien de votre code à sec (ne vous répétez pas), en utilisant des noms significatifs pour vos variables et vos mixins, et organiser votre code de manière logique et cohérente.
Oui, vous pouvez utiliser un framework SASS sans conception avec d'autres frameworks CSS. Cependant, vous devrez peut-être remplacer certains des styles par défaut de l'autre cadre pour vous assurer que vos choix de conception ne sont pas remplacés.
Il existe de nombreuses ressources en ligne disponibles pour en savoir plus sur la construction d'un cadre SASS sans conception. Certains bons endroits pour commencer comprennent la documentation officielle du SASS, les tutoriels en ligne et les forums de développement Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Qu'est-ce que la recherche Spotlight ?
Quelles sont les caractéristiques du LAN
emplacement.reload
Combien de temps faut-il pour que la recharge Douyin arrive ?
Requête blockchain du navigateur Ethereum
Puis-je récupérer une courte vidéo Douyin supprimée ?
Comment définir le texte supérieur sur WeChat
A quoi sert le commutateur KVM ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
