Share
In dit artikel zullen we bekijken hoe we Chrome DevTools beter kunnen integreren in onze Sass-ontwikkelingsworkflow.
Hier is een voorproefje van wat we in deze zelfstudie doen via een geanimeerde GIF:
Aan de linkerkant is een terminal en de Sublime-teksteditor en aan de rechterkant is Chrome. Wijzigingen in de .SCSS bestand wordt op schijf bewaard. Dit wordt weerspiegeld in Sublime en de opdracht Sass watch genereert een nieuwe versie van een CSS-bestand wanneer het wijzigingen in het Sass-bestand detecteert, die op hun beurt worden opgehaald door DevTools en op de pagina worden gereflecteerd.
Dus wat proberen we hier op te lossen? Waarom zouden we een betere workflow willen? Laten we een voorbeeld bekijken van het debuggen van een aantal door Sass gegenereerde CSS, gegeven het volgende .SCSS bestand, dat bevat:
$ myColor: groen; body .box color: $ myColor;
En nu ziet de CSS, die wordt gegenereerd door het bovenstaande Sass-bestand er als volgt uit:
body .box kleur: groen;
Nu hebben we gewoon een beetje HTML nodig om onze styling toe te passen op:
Hallo
Ok, tot nu toe zo goed. Nu willen we beginnen met het ontwerpen en ontwikkelen van onze pagina met Chrome DevTools. Eerst inspecteren we de div met een klasse van doos door er met de rechtermuisknop op te klikken en te selecteren Inspecteer Element. Dan kunnen we het deelvenster met stijlen bekijken, dat een groene waarde voor de kleur eigenschap, een opmerking over de bestandsnaam waarin deze zich bevindt, samen met het regelnummer waarop de selector staat. Dit is het probleem, de verwerkte CSS volgt niet, regel voor regel, wat de bron is .SCSS bestand ziet eruit als, wat een negatieve impact kan hebben op onze ontwikkelingsworkflow.
In de afbeelding hierboven toont het linkerdeelvenster een bron .SCSS bestand en de rechterkant toont de verwerkte versie. (Opmerking: ik gebruik de SCSS-bundel voor syntax highlighting in Sublime-tekst)
DevTools biedt vervolgens een koppeling naar het bestand en regelnummer van de selector, gemarkeerd in rood hierboven, wat niet verwonderlijk linken naar het verwerkte bestand (afbeelding hieronder). Dit werkt nu als een beperking voor het bewerken van het bestand binnen DevTools, omdat we niet kunnen profiteren van het opslaan van bestanden. Als we bijvoorbeeld wijzigingen in het verwerkte bestand doorvoeren, worden ze gewoon overschreven wanneer Sass vervolgens wordt uitgevoerd.
In feite hebben we zelfs geen duidelijke indicatie van wat het corresponderende regelnummer is - in de praktijk is ons bovenstaande voorbeeld erg eenvoudig en kunnen we heel snel begrijpen welke lijnmappen datgene zijn, door naar de code te kijken. Maar in een groter .SCSS bestand kunnen dingen lastiger worden.
Zoals je hierboven kunt zien, heeft DevTools geen inzicht in ons .SCSS bestand kunnen we dit echter aanpakken door gebruik te maken van een DevTools- en Sass-workflow, wat we in deze tutorial zullen bekijken. Samenvattend kan een gebrek aan Sass-ondersteuning in de DevTools betekenen:
Accentsconagua
.SCSS Het bestand in het bronnenpaneel is moeilijk omdat DevTools de extensie niet herkent als een extensie die moet worden bekeken.Belangrijk: Sass-ondersteuning is een experimentele functie. Houd er rekening mee dat, hoewel het al een tijdje bestaat, er dingen kunnen veranderen. Als ze dat doen, doen we ons best om dit artikel dienovereenkomstig bij te werken.
Laten we nu gaan naar about: vlaggen in de omnibox, zoek dan Experten voor ontwikkelaarstools inschakelen, schakel het in en start Chrome opnieuw.
De afbeelding hieronder toont een experimentenpaneel. U kunt dit bereiken door op het tandwiel in de rechteronderhoek van DevTools te klikken en te klikken op 'experimenten', vink het hokje aan voor Ondersteuning voor Sass.
Na het sluiten en openen van DevTools, kunt u nu naar de Algemeen menu-item in de linkerzijbalk van de instellingen venster en navigeer naar de bronnen sectie, van daar, vink 'Schakel bronkaarten in'en'CSS automatisch opnieuw laden na opslaan van Sass'. De time-out kan worden overgelaten aan de standaardwaarde.
Deze tutorial maakt gebruik van de nieuwste versie van Sass (3.3.0 op het moment van schrijven) omdat er enige initiële ondersteuning is voor bronkaarten. Hier leest u hoe u Sass kunt installeren met Rubygems:
gem installeer sass --pre
We moeten nu Sass vertellen om onze te compileren .SCSS bestanden, met behulp van de volgende opdracht:
sass --watch --scss --sourcemap styles.scss: styles.css
Van bovenaf, de styles.scss is uw bronbestand en de styles.css is het verwerkte bestand dat uw HTML-pagina zou gebruiken. Hier is hoe je zou linken in de verwerkte .css het dossier:
Als je iets ziet dat lijkt op de afbeelding hieronder in je terminal:
... en je ziet een gegenereerde .kaart bestand dan gefeliciteerd: Sass debugging werkt! Dit is wat de andere opdrachtopties doen met de vorige compileeropdracht:
--kijk maar: Zal kijken naar wijzigingen in de bron .SCSS bestand en compileer het zodra het een verandering heeft gedetecteerd.--SCSS: Laat zien welke stijl van Sass we gebruiken.--sourcemap: Genereert overeenkomstige bronkaartbestanden.Nu is het hebben van inzicht in bronkaarten niet essentieel om mee te volgen, maar het is zeker iets dat het lezen waard is, omdat het bedoeld is om het ontwikkelingsproces te helpen. Zie hieronder voor een paar bronnen op bronkaarten:
Ervan uitgaande dat alles goed ging, zou het openen van uw pagina waar Sass-ondersteuning is ingeschakeld in DevTools Sass-foutopsporing mogelijk moeten maken. Het eerste ding om op te merken is dat de bestandsnaam de corresponderende zal tonen .SCSS bronbestand, wat handig is, daarnaast geeft het regelnummer correct het regelnummer weer in ons bronbestand.
Als u op de bestandsnaam klikt, gaat u rechts naar het bronpaneel met de lijn die overeenkomt met de betreffende selector gemarkeerd.
Opmerking: je hebt nu een zichtbaar Sass-bestand in je browser met syntaxisaccentuering!
Ok, dus het vinden van de overeenkomstige CSS-kiezer in het Elements-paneel is cool, maar hoe zit het met CSS-eigenschappen?
In de onderstaande schermafbeelding is de bronnen panel heeft gewezen op de CSS-eigenschap waarin ik geïnteresseerd was, om daar te komen die ik had Command-Aangeklikte op het eigendom vanuit de Elements paneel. Het feit dat het me naar de regel heeft gebracht waar de waarde is gedefinieerd (in plaats van de regel: eigenschap: $ waarde;) is erg krachtig!
Notitie: Navigeren naar een CSS-eigenschap in het bronvenster vanaf een opdracht die op de eigenschap klikt in het paneel Elementen is niet specifiek voor Sass, maar kan ook worden bereikt met reguliere CSS.
Het bewerken van een Sass-bestand is niet veel anders dan het bewerken van een standaard CSS-bestand, een ding dat we echter moeten doen is zorgen dat DevTools weet waar de .SCSS bestand bevindt zich op in het bestandssysteem. Van binnenuit bronnen paneel, de linkerzijbalk moet een bronnen deelvenster dat de .SCSS bestand, klik er met de rechtermuisknop op en kies Opslaan als, overschrijf dan het bestaande .SCSS bron bestand.
Omdat we hebben gecontroleerd 'CSS automatisch opnieuw laden na opslaan van Sassen omdat Sass in de terminal loopt met de kijk maar vlag, veranderingen worden vrij snel aangebracht en de DevTools kunnen ons die veranderingen laten zien.
Zelfs mixins werken zoals verwacht en plakken het volgende in een bijna lege ruimte .SCSS bestand binnen de bronnen panel resulteert in het genereren van de juiste CSS, die DevTools binnen een seconde kan herladen.
@mixin-knop border: 2px effen groen; weergave: inline-block; opvulling: 10px; grensradius: 4px; .box @ opnemen knop;
Zoals u in de bovenstaande afbeelding kunt zien, ziet u aan de linkerkant het .SCSS bronbestand, dat is wat we zouden veranderen, de rechterkant toont de gegenereerde .css bestand dat DevTools heeft opgehaald verandert (bijna onmiddellijk dankzij de kijk maar vlag in de terminal)
Paul Irish gaf een goed gesprek op Fluent met veel sappige informatie over de Chrome DevTools, maar ook met het gebruik van Sass. Ga vooruit naar 05:30 voor de Sass-informatie.
Laten we enkele van de belangrijkste punten bespreken die in deze tutorial worden besproken:
.SCSS bestand, toekomstige opslaan (Command + S) moet het bestand overschrijven.Zoals je ziet, is de ontwikkelworkflow met Sass niet perfect, maar het is absoluut veel beter dan wat het vroeger was. Naarmate de tijd vordert, zal DevTools zorgen voor een meer gestroomlijnde workflow voor het bewerken van CSS-bestanden en zullen fouten worden verholpen! Alle problemen die u tegenkomt, kunnen als een bug worden opgeworpen op crbug.com.
Bedankt voor het lezen van dit artikel!
Vind je het leuk wat je hebt geleerd? Meer informatie over Chrome DevTools!
