wiki:ReDesign/sass

Libsass Maven Plugin

Do systémů byl implementován Sass preprocesor, který pomáhá udržovat styly dobře organizované. Sass preprocesor je tovřen knihovnou Libsaas a "wrapperem", který je potřeba pro kompilaci stylů v daném jazyku. Rezervační systém a webový video archiv jsou Java projekty typu Maven. Proto byl použit Libsass Maven Plugin [citace], který s využitím Libsass kompiluje SCSS souborů do CSS.

Maven plugin se přidá do projektu vložením konfigurace do souboru pom.xml. Maven se při sestavování kódu postará o stažení potřebných souborů. Dle konfigurace je provedena kompilace SCSS souborů do CSS, minifikace a uložení výsledného CSS souboru do složky, odkud je následné CSS styl načítán do HTML.

V konfiguraci jsou nadefinovány cesty k SCSS souborům, metoda kopmpilace a místo pro uložení výsledného CSS souboru. Při sestavování kódu je automaticky provedena kompilace SCSS.

1. Konfigurace Libsass Maven plugin

<plugin>
  <groupId>com.github.warmuuh</groupId>
  <artifactId>libsass-maven-plugin</artifactId>
  <version>0.2.10-libsass_3.5.3</version>
   <executions>
     <execution>
       <phase>generate-resources</phase>
       <goals>
         <goal>compile</goal>
       </goals>
     </execution>
  </executions>
  <configuration>
    <inputPath>${basedir}/src/main/sass/</inputPath>
    <outputPath>${basedir}/target/RS-1.0-SNAPSHOT/css</outputPath>
    <includePath>${basedir}/src/main/sass/plugins/</includePath>
    <outputStyle>compressed</outputStyle>
    <sourceMapOutputPath>${basedir}/target/RS-1.0-SNAPSHOT/css</sourceMapOutputPath>
  </configuration>
</plugin>

2. Adresářová struktura saas

Všechny doplňkové SCSS styly, které nejsou součástí MUNI frameworku, jsou v projektu umístěny do v adresáři modules.

https://lemma.ics.muni.cz/trac/lemma/raw-attachment/wiki/ReDesign/sass/Sn%C3%ADmek%20obrazovky%202019-04-12%20v%C2%A014.28.58.png

3. main.scss

V adresáři sass je soubor main.scss, kde se definuje použití daného stylu. Definice stylu má následující formu:

/* Reservation calendar windows */
@import './plugins/calendar/calendar';
Last modified 19 months ago Last modified on 04/12/19 14:30:11

Attachments (1)

Download all attachments as: .zip