Muokkaa CSS-malliasi selaimessa CSS George n kanssa

Oletko koskaan halunnut tee suoria muutoksia selaimessasi ilman CSS-tiedostoja? Yksi ratkaisu on Chrome Developer Tools, mutta jotkut kehittäjät mieluummin yksinkertaisempi työnkulku.

Siellä CSS George Tämä on ilmainen selaimen muokkaustyökalu teokset LESS: n päälle ja se on aloittanut a yksinkertainen JavaScript-tiedosto.

Useimmat kehittäjät suosivat a selainpohjainen editori koska kaikki eivät käytä LESS-esikompilaattoria. Mutta CSS George ei toimi LESS-ympäristössä joka voidaan asentaa nopeasti npm: n kautta.

Jos sinulla on npm asennettu, voit suorittaa tämän yksinkertaisen koodin lisää lähdetiedostot nykyiseen projektiisi:

 npm asenna --save-dev css-george 

Tai voit vedä George.js tiedosto GitHubista, jossa se on kaikkien muiden lähdetiedostojen vieressä. Koko projekti on ilmainen ja avoin lähdekoodi, joten voit lataa koko kopio GitHubista, jos et halua käyttää npm: ää.

Kanssa .js voit lisätä sivuston otsikkoon lisätyn tiedoston suorittaa George-toimintoja suoraan selaimesta. jotta avaa editori-ikkuna, Napsauta tilde-näppäintä, joka on käytettävissä useimpien näppäimistöjen vasemmassa yläkulmassa olevasta Shift +: sta. uusi ikkuna pitäisi näyttää siltä:

Tästä näytöstä voit muokkaa LESS-muuttujia käytetään kaikkea väreistä fonttikokoon tai kirjasinperheisiin.

Tässä on LESS-laajennus tulee välttämättömäksi koska sinun täytyy kertoa CSS Georgeille mitkä muuttujat sisällytetään. Kun he ovat perustaneet, voit vain avaa CSS George -selaimen editori ja mene kaupunkiin.

Toivon, että tämä työkalu on selvää ei pitäisi sisällytetään ajonaikaan. Ellet halua nimenomaan kävijöitä muokkaa sivun väriä ja tyyliä, joka ei yleensä ole hyvä idea. Mutta paikallinen testaus, CSS George on harvinainen työkalu, joka tarjoaa apuohjelman kaikille frontend-kehittäjille.

Sinä pystyt katso se elää CSS George demo -sivulla tai lataa koko kopio npm: n tai GitHub-repon kautta.