A css preprocesszor szerkesztése a google krómban
Mint már tárgyaltunk korábbi kiadványainkkal. A css-preprocesszorok lehetővé teszik a fejlesztőknek CSS kód létrehozását változók és függvények használatával. Ez az egyik oka annak, hogy sok fejlesztő inkább kézzel írt helyett CSS előfeldolgozókat szeretne használni.
A Google bevezette a kísérleti funkciót - a Google Chrome 29-vel kezdődően -, amely javítja a fejlesztői környezetet a CSS előfeldolgozó hibakeresése és szerkesztése során. Lássuk, hogyan működik ez a tulajdonság.
Először is telepíteni kell a Sass 3.3-ot, amelyen a Chrome támogatja ezt a funkciót.
A számítógépre telepített Sass verziójának ellenőrzéséhez futtassa a következő parancsot a terminálon:
Ebben az esetben, ahogy az alábbiakban látható, a Sass 3.2.7-et használjuk.
![Szerkesszük a css-előfeldolgozót a google chrome-ben (a debug szerkesztés képessége) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-94ed50d1.jpg)
A Sass 3.3 telepítéséhez futtassa a következő parancsot: gem install sass -v '> 3.3.0alpha' --pre.
![Szerkesszük a css-előfeldolgozót a google chrome (sass) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-ea67ba62.jpg)
Ezután navigáljon a projekt könyvtárba, és futtassa Sass --watch --sourcemap SCSS / styles.scss: styles.css, hogy van-e változás a fájlt, és hozzon létre egy térképet forrásokból. amely a Chrome a kötődni Sass-fájlt.
![Szerkesszük a css-előfeldolgozót a google chrome-ben (a debug szerkesztés képessége) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-1ac8060c.jpg)
Ne felejtsük el kicserélni a könyvtárat és a fájlnevet a sajátjával.
Csatlakoztasson egy CSS forrástérképet
![Szerkesszük a css-előfeldolgozót a google chrome-ben (a debug szerkesztés képessége) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-75dde5c2.jpg)
Ezután lépjen a DevTool beállításokra. Az Általános lapon jelölje be a CSS forrástérkép engedélyezése és az Automatikus újratöltés generált CSS opciókat az alábbiak szerint:
![Szerkesszük a css előfeldolgozót a google chrome-ben (css-preprocessor) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-dc374eea.jpg)
Munkaterület hozzáadása
Akkor mi kell hozzá a könyvtár a projekt Chrome Wordspace, a böngésző képes volt hallgatni, és frissíti a fájlt, amikor olyan döntéseket, és mentse a kódot DevTool beállítások.
![Szerkesszük a css-előfeldolgozót a google chrome (sass) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-1f95a1cb.jpg)
Nyissa meg a projektet a Chrome. Ebben a szakaszban, akkor veszi észre, hogy az említett ezen pontján DevTools stíluslap fájlt .scss méret helyett .css, és elviszi a panel Source, ha rákattintunk.
![Szerkesszük a css-előfeldolgozót a google chrome (sass) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-b944511e.jpg)
Az utolsó lépés az, hogy meg kell kötnünk a forrást a Wordspace-hez hozzárendelthez. Ehhez kattintson a jobb egérgombbal, és válassza ki a Térkép a fájlrendszeri erőforráshoz lehetőséget.
![Szerkesszük a css-előfeldolgozót a google chrome (sass) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-fb4e73d3.jpg)
Ezután adja meg a forrás Sass fájlt.
![Szerkesszük a css-előfeldolgozót a google chrome-ben (a debug szerkesztés képessége) A css preprocesszor szerkesztése a google krómban](https://images-on-off.com/images/201/redaktiruemcsspreprotsessorvgooglechrome-2e85770c.jpg)
Most már képes lesz hibakeresésre és szerkesztésre a Sass Google Chrome-on keresztül. Mentse el a változtatásokat, és az eredmény nem lesz sokáig, ahogyan az alábbi GIF animációból látható. A változások hatással vannak mind a Sass / SCSS, mind a CSS fájlra.
Ennek a hozzáadott függvénynek köszönhetően most már képesek vagyunk hibakeresésre és szerkesztésre a Sass-ot anélkül, hogy ki kellene lépnünk a böngészőből. Jelenleg azonban két fő dolog felosztására van szükség: