Komma igång med Sass – Lär dig grunderna och dess installation

Du kanske redan har hört talas om Sass (Syntactically Awesome StyleSheets) och du är intresserad av det, men har ingen aning om hur du ska ställa in det eller införliva det i ditt projekt. I den mest grundläggande formen är Sass känd som CCS-processorn, vilket gör det möjligt för CCS-skrivningen att bli mer skicklig och snabbare. Vi kommer att gå igenom grunderna och installationerna av Sass för både Mac och Windows.

Grundläggande lärande om Sass

Det finns några inlärningskurvor när det kommer till användning och installation av Sass. För att du ska gå vidare med Sass-projektet behöver du ha minst grundläggande kunskaper i HTML och CSS. Du måste vara skicklig eller kompetent med CSS innan du försöker lära dig CSS-processor, vilket är Sass.

Om du någonsin har ändrat färgerna i din stilmall mycket tid eller önskat att det finns ett bättre sätt, eller redan hade din stilmall täckt med leverantörsprefix, eller hade märkt att dina stilmallar var längre och är svåra att underhålla, kanske de anledningarna räckte för att erbjuda att studera Sass. Jag kommer att sammanfatta några av termerna för att du kan förstå grunderna i Sass.

• Variabel – det är en lagringsbehållare för CSS-värdet som siffror och färger. Syntaxen skrevs som "$variable". Denna kod kan användas i hela stilmallen efter att du definierat den.
• Häckande – det minskar upprepningen i koden och det har förmågan att göra CSS-skrivningen enklare och snabbare.
• Partier – det här är CSS-filerna som börjar med understrecket "_partial.scss" och de är inte kompilerade på sina egna CSS-filer utan importeras till huvudfilen.
• Importera – använd "@import" för att kompilera alla partialer i en enda fil.
• Mixins – använd "@mixin" för den upprepade CSS, som när leverantörsprefixen krävdes.
• Förlänga – använd "@extend" för att ändra några aspekter av nyckeln för andra delar av samma identitet, till exempel en grupp knappar med olika färger.
• Operatörer – detta tillåter användaren att använda matematiska beräkningar i CSS, som att definiera bredden på olika delar av layouterna.

Installera Sass i Mac och Windows

Sass körs på Rubys programmeringsspråk, så Ruby måste installeras på din dator. För Mac-användare är Ruby redan förinstallerad på OSX. Kontrollera för att säkerställa att du kör uppdaterad version genom att skriva "ruby - v". Om siffran är lägre än 2.0.0, skriv sedan "do gem install ruby" för att uppdatera. Nu kan du börja installera Sass.

Men i Windows är installationen lite knepigare eftersom den inte har någon Ruby installerad. Om du kör en 64-bitarsversion av Windows 7, välj Ruby 2.1.7 (x54). Samma sak måste också göras för Windows 8 och 10. Se till att välja "Lägg till Ruby körbar i din PATH" och fortsätt sedan. När Ruby är installerad, öppna kommandotolken och bekräfta sedan att Ruby har installerats. Sedan kan du installera Sass genom att skriva "gem install sass” och du är klar.

RailsCarma har arbetat på Ruby on Rails ramverk från början och har hanterat över 250 RoR-projekt. Kolla in vår portfölj att förstå hur vi hjälper till att förändra formen på mjukvaruindustrin genom att tillhandahålla Ruby on Rails utvecklare. Kontakta oss nu!