A site for Joomla! documentation

Joomla 4 User Manual

Manual Index

SCSS en Sass

De meeste standaard stylesheet van Joomla 4.x zijn geschreven met behulp van SCSS en worden vervolgens gecompileerd om de CSS bestanden genereren.

Waar vind je de .scss stylesheets en compiler?

De core .scss bestanden staan in verschillende mappen. Dit zijn met name deze bestandenː

  • templates/cassiopeia/scss/template.scss
  • administrator/templates/atum/scss/bootstrap.scss
  • administrator/templates/atum/scss/font-awesome.scss
  • administrator/templates/atum/scss/template.scss
  • administrator/templates/atum/scss/template-rtl.scss
  • media/plg_installer_webinstaller/scss/client.scss

Het script dat de CSS genereert, de SCSS compiler, en andere vergelijkbare bouw hulpmiddelen kunt u vinden in de build map van de Joomla! source op GitHub GitHub. Zie Git voor Programmeurs voor meer informatie over het gebruik van GitHub. De build map is alleen beschikbaar vanuit de Joomla! source, het is geen onderdeel van de officiële Joomla versie.

Voorwaarden

Voor het compileren van uw eigen SCSS bestanden met de Joomla! core moet Node.js op uw locale machine geïnstalleerd zijn. Om Node.js te installeren gaat u naar Node.js, de officiële website, download de juiste setup voor uw besturingssysteem en installeer het met behulp van de installatie wizard. NPM (Node Package Manager) wordt gebruikt om de JavaScript testomgeving in te richten en te managen.

Dependencies (pakketten) installeren

Open een command line en navigeer naar de root map van Joomla 4.x

Execute command npm install

$ npm install
...
added 1354 packages in 193.687s
$

Dit zal de dependencies installeren in de map /node_modules. Als er geen map /nod_modules bestaat zal deze gemaakt worden door npm. Het is niet erg als uw een aantal waarschuwingen ziet, maar u zou geen foutmeldingen moet tegenkomen.

Opnieuw de CSS stylesheet genereren

Om alle CSS-bestanden van een Joomlaǃ-core distributie opnieuw te genereren, moet u de generatiescripts uitvoeren als een CLI-toepassing.

Alle Joomla! core scss bestanden

U kunt alle Joomlaǃ core css-bestanden compileren met de opdracht node build --compile css. Bijvoorbeeld:

$ npm run build:css
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.
Prefixing for:  last 1 version
template-rtl.css was updated.
Prefixing for:  last 1 version
font-awesome.css was updated.
Prefixing for:  last 1 version
client.css was updated.
Prefixing for:  last 1 version
bootstrap.css was updated.
Prefixing for:  last 1 version
template.css was updated.
$

Alle bestanden in een map

U kunt alle bestanden in één map compileren met de opdracht node build --compile-css path-to-directory. Bijvoorbeeldː node build --compile-css templates/cassiopeia/scss.

$ node build --compile-css templates/cassiopeia/scss
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.

Een specifiek bestand

U kunt één bestand compileren met de opdracht node build --compile-css pathtofile. Bijvoorbeeldː node build --compile-css templates/cassiopeia/scss/template.scss.

$ node build --compile-css templates/cassiopeia/scss/template.scss
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.

Opmerking:

  • De bestandsextensie .scss moet in kleine letters zijn.
  • Het css bestand moet worden gemaakt.

Compileren van uw eigen SCSS bestanden voor uw template

Om scss-bestanden voor uw eigen template te compileren, moet u een kopie van het script JOOMLA4/build/build-modules-js/compilecescss.js gebruiken en aanpassen aan uw omgeving.

Als alternatief kunt u een SCSS Compiler-plug-in gebruiken die uw .scss -bestanden automatisch compileert bij het opnieuw laden van de pagina. In de Joomlaǃ Extension Directory JED vindt u hiervoor een plug-inː Joomla! Extension Directory

Meer alternatieven en hulpmiddelen kunt u vinden op http://sass-lang.com/install

De SCSS compiler die gebruikt is voor Joomla! 4.x core is node-sass. In de Joomlaǃ core kunt u hem vinden in de map JOOMLA4/node_modules/node-sass.

Verschil tussen CSS, SCSS en Sass

SCSS of Sass vereenvoudigt CSS-notatie en definieert variabelen. Dit zorgt voor een duidelijkere presentatie, minder code en een eenvoudiger revisie door het gebruik van variabelen.

CSS

Met CSS wordt code geschreven zoals hieronder, in volledige lengteː

    #header {
      margin: 0;
      border: 1px solid blue;
    }
    #header p {
      font-size: 14px;
      color: blue;
    }
    #header a {
      text-decoration: none;
    }

Sass

Sass is een CSS preprocessor met syntax verbeteringen. Style sheets in de uitgebreide syntaxis worden verwerkt door de preprocessor en omgezet in gewone CSS-style sheets.

Er zijn twee syntaxis beschikbaar voor Sass: SCSS en Sass.

SCSS

SCSS wordt gebruikt in de Joomlaǃ core. SCSS is een uitbreiding van de syntax van CSS.

    $color:    blue;
    #header {
      margin: 0;
      border: 1px solid $color;
      p {
        color: $colorRed;
        font: {
          size: 14px;
        }
      }
      a {
        text-decoration: none;
      }
    }

Sass

De oudere Sass syntax biedt een meer beknopte manier om CSS te schrijven.

    $color:    blue
    #header
      margin: 0
      border: 1px solid $color
      p
        color: $colorRed
        font:
          size: 14px
      a
        text-decoration: none

U kunt meer informatie vinden in de Sass Documentatie.

Van bestaande CSS naar SCSS / CSS-bestanden importeren

Misschien wilt u uw bestaande CSS-bestanden en classes toevoegen aan uw op SCSS gebaseerde Cassiopeia template of beginnen met wat u hebt. Alle CSS declarations zijn compatibel met SCSS, dus u kunt uw .css bestanden gewoon hernoemen naar .scss en u kunt ze compileren en gebruiken. U kunt vervolgens stap voor stap gebruikmaken van de functies die SCSS te bieden heeft:

  • Taal extensies zoals variabelen, nesting en mixins
  • Veel nuttige functies voor het manipuleren van kleuren en andere waarden
  • Geavanceerde functies zoals besturingsrichtlijnen voor bibliotheken
  • Goed opgemaakte, aanpasbare uitvoer

Zie https://sass-lang.com/

Opmerking: Wanneer u de Cassiopeia template wilt aanpassen is het een goed om een kopie van de template te maken en deze aan te passen - hierdoor zal Joomla! uw aanpassingen niet overschrijven bij een update.

Importeer uw .css als .scss bestanden

Laten we nu aannemen dat u uw aangepaste bestanden wilt opnemen en ze wilt laten verwerken door de SCSS-compiler - u hoeft uw .css NIET naar SCSS te herschrijven omdat gewone .css ook werkt. Het enige dat u hoeft te doen is

  • uw .css bestanden hernoemen naar .scss en
  • een _ voor de naam zetten en
  • een @import statement toevoegen boven de genoemde hoofd templates/cassiopeia/scss/template.scss

We gaan er vanuit dat u uw aangepaste mystyles.css bestand hernoemd hebt naar _mystyles.scss in de map /templates/cassiopeia/scss. Open nu /templates/cassiopeia/scss/template.scss en plaatst de verwijzing naar uw _mystyles.scss bestand onder aan in het bestand zodat het eerdere declaraties overschrijft.

// Bootstrap functions
@import "../../../media/vendor/bootstrap/scss/functions";


// Variables
@import "variables";

// Flying Focus
@import "../../../media/vendor/flying-focus-a11y/scss/flying-focus";

// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";

// FontAwesome
@import "../../../media/vendor/font-awesome/scss/font-awesome";

// B/C for Icomoon
@import "../../../media/system/scss/icomoon";

// Alert
@import "../../../media/system/scss/jalert";

// Blocks
@import "blocks/global"; // Leave this first
@import "blocks/alerts";
@import "blocks/banner";
@import "blocks/demo-styling";
@import "blocks/footer";
@import "blocks/form";
@import "blocks/frontend-edit";
@import "blocks/header";
@import "blocks/icons";
@import "blocks/iframe";
@import "blocks/layout";
@import "blocks/modals";
@import "blocks/modifiers";
@import "blocks/utilities";
@import "blocks/css-grid"; // Last to allow fallback

// Vendor overrides
@import "vendor/awesomplete";
@import "vendor/bootstrap/buttons";
@import "vendor/bootstrap/card";
@import "vendor/bootstrap/custom-forms";
@import "vendor/bootstrap/collapse";
@import "vendor/bootstrap/dropdown";
@import "vendor/bootstrap/lists";
@import "vendor/bootstrap/modal";
@import "vendor/bootstrap/nav";
@import "vendor/bootstrap/pagination";
@import "vendor/bootstrap/table";
@import "vendor/chosen";
@import "vendor/dragula";
@import "vendor/minicolors";
@import "vendor/tinymce";

@import "mystyles";

Wanneer u nu uw hoof template.scss bestand compileert houdt u één hoofd template.css bestand over, geoptimaliseerd en verkleind. Hierdoor reduceert u ook de http requests waardoor de site sneller zal laden.