Installera Stylus i ArchLinux utan att dö i försöket

Skrivstiftet är en kodförprocessor CSS, vilket gör att vi kan arbeta enklare i vår textredigerare och sedan förklarar jag orsakerna till mitt uttalande.

Skrivstiftet

Jag låtsas inte lära mig hur det fungerar Skrivstiftet, men visa några exempel och installationsmetoden

Detta är ett stilark som vi känner till det:

kropp {font: 12px Helvetica, Arial, sans-serif; } a.knapp {-webkit-border-radius: 5px; -moz-border-radius: 5px; gränsradie: 5 pixlar; }

Och detta skulle vara samma formatmall som skapats med Nål:

kroppstyp 12px Helvetica, Arial, sans-serif a. knapp -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px

Var är nycklarna? Var gick semikolonna, kolon? Glömt, Skrivstiftet gör det för oss.

Om du börjar med CSS y html det rekommenderas inte att använda Skrivstiftet för det enkla faktum att du kan glömma hur saker verkligen fungerar, men om du redan har tid i den här världen och vill spara dig själv kod och arbete .. fortsätt.

Programmerare Python kommer att hitta i Skrivstiftet något som liknar det de är anpassade till, eftersom du bara behöver göra en indragning korrekt för att magin ska kunna göras.

installation

För Skrivstiftet arbete vi måste installera node.js som finns inom gemenskapsgrenen, så vi fortsätter att göra det:

$ sudo pacman -S nodejs

Och senare installerar vi Stylus. Det traditionella sättet skulle vara:

$ npm install -g stylus

Det installerar bra, men det fungerar inte för mig, så det är mycket lättare att installera från AUR:

$ yaourt -S nodejs-stylus

Hur man använder Stylus

Okej, vi har redan installerat node.js och vi har installerat Skrivstiftet.. Hur använder vi det? Det är enkelt. Låt oss säga att vi har en katalog med följande filer:

- dir - index.html - style.css

Vad vi måste göra är att skapa filen stil. stil, som är den vi ska arbeta med. I den filen kan vi ha något som:

kroppsbakgrundsfärg #ffff fontstorlek 12px a. knappfärg röd stoppning 10px

Om vi ​​sparar eller gör några ändringar händer ingenting eftersom vi inte "kompilerar" vår fil. För att kompilera det, vad vi gör är att öppna en terminal i vår katalog (där filen stil. stil) och utför:

stylus -c style.styl

Men varje gång vi sparar filen stil. stil vi skulle behöva köra koden, men lyckligtvis är det inte nödvändigt, eftersom om vi kör samma kommando, men lägger till parametern -w (se) följande händer:

stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watch style.styl compiled style.css compiled style.css

Med andra ord kompileras filen automatiskt. Skulle resultatet bli?

body {background-color: #fff; font-size: 12px} a.knapp {color: # f00; padding: 10px}

Som du kan se skapar inte bara vår kod oss CSS, men eliminerar onödiga utrymmen så att vårt stilark väger mindre 😀

Inte bara det, Skrivstiftet Det gör att vi kan skicka CSS-filer till deras format och hur vi kan använda deras syntax är mycket varierat. Och det här är bara en förhandsvisning. Så jag uppmuntrar dig om du är intresserad av att veta lite mer om Skrivstiftet


Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   cyberalejo17 sade

    Det är med:

    $ sudo npm installera -g stylus

    1.    livlig sade

      Men varför? Om jag bara vill använda den under min session .. men ja, om problemet är det .. 🙂

      1.    nano sade

        Inledningsvis är det bra, men Stylus används med olika plugins när du går, till exempel Nib eller Stylus auto prefixer.

        Jag tror att när du installerar den med Yaourt sparas den inte i / usr / local / lib / node_modules och om du försökte importera och använda något av biblioteken skulle du knulla xD

        Det händer att som jag sa till dig i forumet är Stylus baserad på att använda bibliotek transparent från terminalen, det är kärnan i denna förprocessor, den gör saker som:

        stylus -u jeet -u rupture -u typografisk -u nib -w style.styl

        För att säga något (du kan ha ett alias eller en funktion eller använda gulp eller grunt, eller vad som helst: 3). Det intressanta med det här är att det inte präglar css ur lådan när du kompilerar, men det fyller det "dynamiskt" när du kallar respektive biblioteks funktioner och mixins i din kod.

        I själva verket kommer det att placera platt kod som deklareras (återställs, clearfixes, etc.) men det kommer inte att få dig att röka till exempel span () -funktionerna för jeet om du inte kallar dem och det är ren kärlek x3

        Det är en hel värld och det är därför jag säger till dig, installerar det på det sättet, jag vet inte vilka filer det hamnar i och jag tror inte att du kan använda tilläggen så enkelt för att när du använder kommandoraden, använd flaggan kommer att se inuti mappen för stylusinstallation, med nod är det node_modules och det förblir där jag sa ovan, med Yaourt, NPI xD

  2.   låt oss använda Linux sade

    intressant!

  3.   Usuario sade

    Jag föreslår att du gör en uppdaterad handledning om hur du använder ett SIP-nummer för att ringa mobiltelefoner från datorn ... gratis