Hoe SASS te installeren:

SASS of Syntactically Awesome Stylesheets is een uitbreiding van CSS en helpt ons om flexibelere stijlen te schrijven. Dit voegt meer kracht toe aan de basistaal van CSS. SASS is een voorbewerkingstaal die is gecompileerd in CSS en verschillende technische syntaxis heeft. Door code in SASS te schrijven, kunnen browsers de code niet zo interpreteren dat het geen CSS is. In plaats daarvan hebben we een compiler nodig om de code die we in CSS schrijven te voltooien zodat de browsers deze kunnen interpreteren en begrijpen. Variabelen, mixins, geneste regels, inline import, etc. kunnen worden gebruikt in SASS met compatibele CSS-syntaxis. Met behulp van een kompasstijlbibliotheek houdt Syntactically Awesome Stylesheets grote stijlbladen goed georganiseerd en krijgen kleine stijlbladen in minder tijd de tijd. Samen met functies zoals een volledig CSS compatibel platform en taalextensies zoals nesting, mixins, WTC biedt het ook functies zoals vele belangrijke functies om kleuren en verschillende andere waarden te manipuleren. Het heeft ook andere geavanceerde functies zoals besturingsrichtlijnen voor bibliotheken, correct geformatteerde, aanpasbare uitvoer en vele andere.

Hieronder staan ​​de systeemvereisten voor de installatie van Syntactically Awesome Stylesheets:

  • Besturingssysteem - Het kan elk platformonafhankelijk besturingssysteem zijn.
  • Programmeertaal - De programmeertaal is Ruby.
  • Browser - Het kan elke browser zijn, zoals Google Chrome, Internet Explorer, Safari, Mozilla Firefox, Opera, enz.

Stappen om SASS te installeren:

Hieronder zijn de stappen om het Syntactically Awesome Stylesheets-pakket in het systeem te installeren, als volgt -

Stap 1:

Download de huidige stabiele versie van Ruby via de onderstaande link. Het downloadt een zipbestand dat moet worden uitgepakt voor verdere installatie. Winzip of 7zip kan worden gebruikt om het bestand uit te pakken.

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

Stap 2:

Na het uitpakken, installeer Ruby in het systeem volgens de standaard installatieprocedure.

Stap 3:

Voeg de map Ruby bin toe aan een PATH-gebruikersvariabele en de systeemvariabele zodat deze kan werken met de opdracht Gem.
Om de PATH-variabelen toe te voegen:

  1. Klik eerst met de rechtermuisknop op mijn computerpictogram op het bureaublad.
  2. Ga naar eigenschappen in het vervolgkeuzemenu.
  3. Klik daarna op het tabblad Geavanceerd en klik vervolgens op omgevingsvariabelen.
  • Nadat het venster met omgevingsvariabelen is geopend, dubbelklikt u op het pad onder de kolom met variabelen bovenaan. Hieronder is de screenshot die het toont:

  • Als u dubbelklikt op PATH, wordt het venster Gebruikersvariabele bewerken geopend. Voeg ruby ​​bin-pad in het waardeveld voor de variabele toe als C: \ Ruby \ bin. Als er andere paden zijn ingesteld voor andere bestanden, plaats dan een puntkomma en voeg het robijnrode pad toe. Hieronder is de screenshot die het toont:

  • Klik op de knop OK om de taak te voltooien.

De systeemvariabele instellen:

  • Onder het systeem klikt het variabele tabblad op de nieuwe knop.
  • Daarna wordt het nieuwe venster met systeemvariabelen geopend. Vul in met RubyOpt in het veld voor variabelenaam en RubyGems in het veld voor de variabele waarde. Klik vervolgens op OK om de taak te voltooien. Hieronder is de screenshot die het toont:

Stap 4:

Voer in de opdrachtprompt van het systeem de opdracht gem install Scss uit. Hiermee wordt sass in het systeem geïnstalleerd.

Stap 5:

SASS bij het succesvol installeren zal het onderstaande scherm weergeven. Vink het aan om bevestigd te worden.

Hieronder ziet u een voorbeeld van een basisimplementatie van 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

We zullen een goed voorbeeld maken. Css dat vergelijkbaar is met CSS verwachten dat het wordt opgeslagen met de extensie .scss. Dit moet in de ruby-map worden gemaakt, samen met de .htm-bestanden. Optioneel kan het bestand scss-bestand ook worden opgeslagen met het mappad ruby ​​\ lib \ scss. Maak de map sass in de map lib voordat u het scss-bestand maakt.

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

SASS kan worden aangestuurd om het bestand te bekijken en de CSS bij te werken wanneer het SCSS-bestand wordt gewijzigd. Hieronder staat het commando:

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

Wanneer de bovenstaande opdracht wordt uitgevoerd, wordt automatisch een voorbeeld.css-bestand gemaakt. Wanneer het scss-bestand wordt gewijzigd, wordt het bestand example.css automatisch bijgewerkt.

Bij het uitvoeren van de bovenstaande opdracht wordt het bestand example.css gemaakt met de volgende inhoud.

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

Anders dan de bovenstaande stappen hieronder zijn de andere manieren om SASS te installeren:

Er zijn veel applicaties die eenvoudige en gebruiksvriendelijke manieren bieden om SASS te installeren. Deze kunnen worden gedownload van internet. Hiervan zijn er maar weinig gratis, terwijl andere worden betaald.

NPM kan ook worden gebruikt om SASS te installeren in het geval dat de gebruiker node.js. gebruikt.

In de bovenstaande stapsgewijze handleiding kan SASS dus met succes in een systeem worden geïnstalleerd. Hieronder staat het commando:

npm install -g sass

Maar houd er rekening mee dat deze installatie pure JavaScript-implementatie van Syntactically Awesome Stylesheets zal installeren, die relatief langzamer is dan andere methoden die hier worden gegeven, maar nog steeds dezelfde interface heeft als de andere methoden. Dus in geval van traagheid veroorzaakt dit problemen als het heel gemakkelijk is om op een later tijdstip over te schakelen naar een andere implementatie om de snelheid te verbeteren.

Als een gebruiker Chocolatey-pakketbeheer voor Windows uitvoert, kan dart SASS worden geïnstalleerd. Hieronder staat het commando:

choco install sass

In het geval dat een gebruiker Homebrew-pakketbeheer voor Mac OS X gebruikt, kan dart SASS worden geïnstalleerd. Hieronder staat het commando:

brew install sass/sass/sass

Dus, naast zoveel functies, biedt SASS of Syntactically Awesome Stylesheets een breed scala aan functies die worden gebruikt om webpagina's gemakkelijker te ontwerpen. SASS biedt verschillende CSS-extensies zoals geneste eigenschappen, selecties voor tijdelijke aanduiding, enz. Het ondersteunt ook SASS-scripts die interactieve shell bieden voor programmering, samen met ondersteuning voor verschillende variabelen, gegevenstypen, bewerking, functie, interpolatie, etc. Het installatieproces is ook zo eenvoudig om uitvoeren. Het toevoegen van alle functies SASS biedt een uitzonderlijk geweldig platform voor het werken met webdesign en anderen.

Aanbevolen artikelen

Dit is een handleiding voor het installeren van SASS geweest. Hier hebben we het stapsgewijze proces voor het installeren van SASS besproken. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -

  1. Volledige gids voor het installeren van .NET
  2. Hoe PostgreSQL installeren?
  3. Verschillende stappen om het typoscript te installeren
  4. Hoe Appium te installeren

Categorie:

Software ontwikkeling