Så här installerar du SASS:

SASS eller Syntactically Awesome Stylesheets är en förlängning av CSS och hjälper oss att skriva mer flexibla stilar. Detta ger mer kraft till CSS-grundspråket. SASS är förbehandlingsspråk som kompileras till CSS och har olika tekniska syntaxer. Att skriva kod i SASS låter inte webbläsarna tolka koden så att det inte är korrekt CSS, i stället behöver vi en kompilator för att slutföra koden vi skriver till CSS för att webbläsarna ska tolka och förstå den. Variabler, mixins, kapslade regler, inlineimport etc. kan användas i SASS med kompatibel CSS-syntax. Med hjälp av kompassstilbibliotek håller Syntactically Awesome Stylesheets stora formatmallar välorganiserade och får små stilmallar igång på mycket kortare tid. Tillsammans med funktioner som helt CSS-kompatibel plattform och språkförlängningar som häckning, mixins, WTC ger det också funktioner som många viktiga funktioner för att manipulera färger och olika andra värden. Den har också andra avancerade funktioner som styrdirektiv för bibliotek, korrekt formaterad, anpassningsbar utgång och många andra.

Nedan finns systemkrav för Syntactically Awesome Stylesheets installation:

  • Operativsystem - Det kan vara vilket operativsystem som helst över plattformar.
  • Programmeringsspråk - Programmeringsspråket är Ruby.
  • Webbläsare - Det kan vara valfri webbläsare som Google Chrome, Internet Explorer, safari, Mozilla Firefox, opera, etc.

Steg för att installera SASS:

Nedan följer stegen för att installera Syntactically Awesome Stylesheets-paket i systemet som följer -

Steg 1:

Ladda ner den nuvarande stabila versionen av Ruby med länken nedan. Den laddar ner en zip-fil som måste packas upp för ytterligare installation. Winzip eller 7zip kan användas för att packa upp filen.

https://www.ruby-lang.org/en/downloads/

Steg 2:

När du har packat bort, installera Ruby i systemet enligt standardinstallationsproceduren.

Steg 3:

Lägg till mappen Ruby bin till en PATH-användarvariabel och systemvariabeln så att den kan fungera med gem-kommando.
Så här lägger du till PATH-variablerna:

  1. Högerklicka först på min datorikon på skrivbordet.
  2. Gå till egenskaper från rullgardinsmenyn.
  3. Efter det klickar du på den avancerade fliken och därefter klickar på miljövariabler.
  • Efter att miljövariabelfönstret öppnas dubbelklickar du på PATH under kolumnen variabler överst. Nedan visas skärmdumpen:

  • När du dubbelklickar på PATH öppnas fönstret för användarvariabel. Lägg till rubinfackväg i värdefältet för variabeln som C: \ Ruby \ bin. Om det finns andra sökvägar för andra filer, lägg bara en semikolon och lägg till rubinvägen. Nedan visas skärmdumpen:

  • Klicka på Ok-knappen för att slutföra uppgiften.

Ställa in systemvariabel:

  • Under systemet klickar den variabla fliken på den nya knappen.
  • Därefter öppnas det nya systemvariabelfönstret. Fyll i med RubyOpt i fältet för variabelnamn och RubyGems i fältet för variabelvärdet. Klicka sedan på OK-knappen för att avsluta uppgiften. Nedan visas skärmdumpen:

Steg 4:

I kommandoprompten för systemet kör kommandot gem installera Scss. Detta kommer att installera sass i systemet.

Steg 5:

När SASS installeras framgångsrikt kommer skärmen nedan att visas. Kontrollera det för att bekräftas.

Nedan visas ett exempel som visar en grundläggande implementering av SASS.


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day

Vi kommer att skapa ett fint exempel.css som liknar CSS förväntar sig att det kommer att sparas med .scss förlängning. Detta måste skapas i rubinmappen tillsammans med .htm-filerna. Valfritt kan filen scss-filen också sparas med mappvägen ruby ​​\ lib \ scss. Skapa mappsass i lib-mappen innan du skapar scss-filen.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

SASS kan instrueras att titta på filen och uppdatera CSS närhelst det ändras i SCSS-filen. Nedan är kommandot:

sass --watch C:\ruby\lib\sass\ example.scss: example.css

När du kör ovanstående kommando skapar det automatiskt en exempel.css-fil. När du ändrar scss-filen uppdateras filen exempel.css automatiskt.

När du kör ovanstående kommando skapas filen exempel.css med följande innehåll.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

Andra än ovanstående steg är de andra sätten att installera SASS:

Det finns många applikationer som erbjuder enkla och användarvänliga sätt att installera SASS. Dessa kan laddas ner från internet. Av dessa kommer få av dessa gratis medan andra betalas.

NPM kan också användas för att installera SASS i fall användaren använder node.js.

I ovanstående steg-för-steg-guide kan således SASS installeras framgångsrikt i ett system. Nedan är kommandot:

npm install -g sass

Men observera att denna installation kommer att installera ren javascriptimplementering av Syntactically Awesome Stylesheets, som är relativt långsammare än andra metoder som ges här, men fortfarande har samma gränssnitt för de andra metoderna. Således, i fall av långsamhet orsakar alla problem om det kommer att vara mycket lätt att byta till en annan implementering på ett senare tillfälle för att öka hastigheten.

Om någon användare kör Chocolatey-pakethanteraren för Windows kan dart SASS installeras. Nedan är kommandot:

choco install sass

Om någon användare använder Homebrew-pakethanteraren för Mac OS X kan dart SASS installeras. Nedan är kommandot:

brew install sass/sass/sass

Således, tillsammans med så många funktioner, erbjuder SASS eller Syntactically Awesome Stylesheets ett brett utbud av funktioner som används för att designa webbsidor med enklare funktion. SASS tillhandahåller olika CSS-tillägg som kapslade egenskaper, val av platshållare osv. Det stöder också SASS-skript som erbjuder interaktivt skal för programmering tillsammans med stöd för olika variabler, datatyper, drift, funktion, interpolering etc. Installationsprocessen är också så lätt att prestera. Lägga till alla dess funktioner SASS ger ett exceptionellt bra plattformsarbete med webbdesign och andra.

Rekommenderade artiklar

Detta har varit en guide för att installera SASS. Här diskuterade vi steg för steg-processen för att installera SASS. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -

  1. Komplett guide för att installera .NET
  2. Hur installerar PostgreSQL?
  3. Olika steg för att installera Typescript
  4. Hur du installerar Appium

Kategori:

Mjukvaruutveckling