Sådan installeres SASS:

SASS eller Syntactically Awesome Stylesheets er en udvidelse af CSS og hjælper os med at skrive mere fleksible stilarter. Dette tilføjer mere styrke til det grundlæggende sprog i CSS. SASS er forbehandlingssprog, der er samlet til CSS og har forskellige tekniske syntakser. At skrive kode i SASS tillader ikke browsere at fortolke koden som sådan, at det ikke er korrekt CSS, i stedet for har vi brug for en compiler til at udfylde koden, vi skriver til CSS, for at browsere kan fortolke og forstå den. Variabler, mixins, indlejrede regler, inlineimport osv. Kan bruges i SASS med kompatibel CSS-syntaks. Ved hjælp af kompasstilbibliotek holder Syntactically Awesome Stylesheets store stilark velorganiserede og får små stilark op og kører på meget kortere tid. Sammen med funktioner som fuldt ud CSS-kompatibel platform og sprogudvidelser som reden, mixins, WTC giver det også funktioner som mange vigtige funktioner til at manipulere farver og forskellige andre værdier. Det har også andre avancerede funktioner såsom kontroldirektiver for biblioteker, korrekt formateret, tilpassbar output og mange andre.

Nedenfor er systemkrav til Syntactically Awesome Stylesheets installation:

  • Operativsystem - Det kan være ethvert cross-platform operativsystem.
  • Programmeringssprog - Programmeringssproget er Ruby.
  • Browser - Det kan være enhver browser som Google Chrome, Internet Explorer, safari, Mozilla Firefox, opera osv.

Trin til installation af SASS:

Nedenfor er trinnene til at installere Syntactically Awesome Stylesheets-pakken i systemet som følger -

Trin 1:

Download den aktuelle stabile version af Ruby ved hjælp af nedenstående link. Det henter en zip-fil, som skal pakkes ud for yderligere installation. Winzip eller 7zip kan bruges til at pakke ud filen.

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

Trin 2:

Efter udpakning skal du installere Ruby i systemet efter standardinstallationsproceduren.

Trin 3:

Føj mappen Ruby bin til en PATH-brugervariabel og systemvariablen, så den kan arbejde med perle-kommando.
Sådan tilføjes PATH-variablerne:

  1. Højreklik først på mit computerikon på skrivebordet.
  2. Gå til egenskaber fra rullemenuen.
  3. Klik derefter på den avancerede fane og derefter klikke på miljøvariabler.
  • Efter vinduet med miljøvariabler åbnes dobbeltklik på kolonnen PATH under variabler øverst. Nedenfor er skærmbilledet, der viser det:

  • Når du dobbeltklikker på PATH, åbnes vinduet for at ændre brugervariablen. Tilføj ruby ​​bin-sti i værdifeltet for variablen som C: \ Ruby \ bin. I tilfælde af at der er andre stier, der er indstillet til andre filer, skal du bare sætte en semikolon og tilføje rubinstien. Nedenfor er skærmbilledet, der viser det:

  • Klik på OK-knappen for at afslutte opgaven.

Indstilling af systemvariabel:

  • Under systemet klikker variabelfanen på den nye knap.
  • Derefter åbnes det nye systemvariabelvindue. Udfyld med RubyOpt i feltet for variabelnavn og RubyGems i feltet for variabelværdien. Klik derefter på OK-knappen for at afslutte opgaven. Nedenfor er skærmbilledet, der viser det:

Trin 4:

I kommandoprompten til systemet skal du køre kommandoen perle installere Scss. Dette installerer sass i systemet.

Trin 5:

SASS, når det bliver installeret med succes, viser nedenstående skærm. Kontroller det for at blive bekræftet.

Nedenfor er et eksempel, der viser en grundlæggende implementering af 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 opretter et fint eksempler.css, der ligner CSS, forventer, at det gemmes med .scss-udvidelse. Dette skal oprettes i rubinmappen sammen med .htm-filerne. Valgfrit kan filen scss-filen også gemmes med mappestien ruby ​​\ lib \ scss. Opret mappen sass i lib-mappen, før du opretter scss-filen.

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

SASS kan henvises til at se filen og opdatere CSS, når der sker ændringer i SCSS-filen. Nedenfor er kommandoen:

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

Når du kører ovennævnte kommando, opretter den automatisk en eksempel.css-fil. Når du ændrer scss-filen, opdateres eksempelet.css-filen automatisk.

Når du kører ovennævnte kommando, oprettes filen eksempel.css med følgende indhold.

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

Bortset fra ovenstående trin er de andre måder at installere SASS på:

Der er mange applikationer, der tilbyder lette og brugervenlige måder at installere SASS på. Disse kan downloades fra internettet. Ud af disse kommer få af disse gratis, mens andre betales.

NPM kan også bruges til at installere SASS, hvis brugeren bruger node.js.

I ovenstående trin for trin kan SASS således installeres med succes i et system. Nedenfor er kommandoen:

npm install -g sass

Men vær opmærksom på, at denne installation vil installere ren javascriptimplementering af Syntactically Awesome Stylesheets, som er relativt langsommere end andre metoder, der er givet her, men stadig har den samme grænseflade af de andre metoder. I tilfælde af langsomhed forårsager således ethvert problem, hvis det vil være meget let at skifte til en anden implementering på et senere tidspunkt for at forbedre hastigheden.

Hvis en bruger kører Chocolatey-pakkehåndtering til Windows, kan dart SASS installeres. Nedenfor er kommandoen:

choco install sass

I tilfælde af en bruger, der bruger Homebrew-pakkehåndteringen til Mac OS X, kan dart SASS installeres. Nedenfor er kommandoen:

brew install sass/sass/sass

Sammen med så mange funktioner tilbyder SASS eller Syntactically Awesome Stylesheets således en lang række funktioner, der bruges til at designe websider med mere lethed. SASS leverer forskellige CSS-udvidelser som indlejrede egenskaber, valg af pladsholder osv. Det understøtter også SASS-scripts der tilbyder interaktiv shell til programmering sammen med understøttelse af forskellige variabler, datatyper, betjening, funktion, interpolering osv. Installationsprocessen er også så let at udføre. Tilføjelse af alle dets funktioner SASS giver et usædvanligt godt platform-arbejde med webdesign og andre.

Anbefalede artikler

Dette har været en guide til Installation af SASS. Her diskuterede vi trin for trin-processen til installation af SASS. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

  1. Komplet guide til installation af .NET
  2. Sådan installeres PostgreSQL?
  3. Forskellige trin til installation af typeskrift
  4. Sådan installeres Appium

Kategori:

Softwareudvikling