Het toevoegen van SASS aan een .NET MVC project ?>

Het toevoegen van SASS aan een .NET MVC project

Als je een langere tijd met een project bezig bent, kan de CSS soms onoverzichtelijk en erg lang worden. Ook kan CSS erg limiterend zijn, zo kan je bijvoorbeeld geen nesting gebruiken en geen variabelen. Soms heb je ook dubbele code, omdat je misschien meerdere objecten dezelfde styling wilt geven, maar bij één van de objecten nog een property extra.

Een goede oplossing hiervoor is SASS. SASS voegt meerdere functies toe aan CSS, maar is toch net zo eenvoudig. Ik gebruik SASS daarom in al mijn projecten binnen Refine IT. Ik zal hieronder uitleggen hoe je ondersteuning voor SASS toevoegt aan je project in Visual Studio 2017.

Web compiler installeren

  • Als eerst moet je de plugin ‘Web Compiler’ installeren. Ga hiervoor in Visual studio naar Tools > Extensions and Updates.
  • Zoek naar ‘Web Compiler’.
  • Klik bij web compiler op ‘Install’.

webcompiler

  • Herstart vervolgens Visual Studio.

Je bestand compilen

  1. Als je een bestaand CSS bestand wilt omzetten, klik dan met je rechtermuisknop op het bestand en klik op ‘Rename’.
  2. Verander ‘css’ in ‘scss’.

scss

3. Sla het vervolgens op en klik bij de onderstaande melding op ‘Yes’.

error

4. Klik vervolgens met de rechtermuisknop op het bestand en klik op ‘Compile file’.

compilefile

Er wordt nu een configuratiebestand aangemaakt in de root van je project, genaamd ‘compilerconfig.json’. Iedere keer dat je het scss bestand aanpast wordt het bestand opnieuw gecompiled.

Je kunt eenvoudig de instellingen aanpassen door met de rechtermuisknop op het configuratiebestand te klikken. Je kunt daar ook aanzetten dat je scss bestanden bij elke build worden gecompiled. Bij aanpassingen aan je ‘scss’ compiled ‘Web Compiler’ je bestand ook opnieuw.

settings

 

SASS gebruiken

Je huidige CSS werkt zonder aanpassingen prima, maar het is handiger om het helemaal om te zetten. Hiervoor zijn handige tools zoals css2sass.
De SASS site heeft een erg handige pagina die de basics goed kan uitleggen. Heb je zelf nog vragen of opmerkingen over SASS of loop je ergens tegenaan? Laat mij het weten in de reacties.

Klik hier om naar onze site te gaan

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *