CSS

Struktur

Webcerts olika css-filer finns i common/web och intygstyper:

CSS-filer i common/web

• inera-certificate
• inera-webcert
• print

CSS-filer i Intygstyper

• fk7263
• ts-bas
• ts-diabetes

Generering av css i bygg-processen

När en mavenmodul innehållande en scssfil byggs kommer en cssfil att genereras utifrån scssfilen innehåll. Den genererade cssfilen hamnar i targetkatalogen med samma sökväg som den har i källkodsträdet. Scssfilen exkluderas i bygget.

Laddordning av css-filer

I index.jsp i Webcert/web anges den ordningen som css-filer läses in i browsern. I vilken ordning som cssfilerna laddas påverkar hur css-regler appliceras då filer som laddas senare kan skriva över css-regler som laddats tidigare i kedjan. Detta innebär att cssfiler med generell applikation laddas först och specifika regler/anpassningar av generella regler laddas sist.

I dag ser laddordningen ut som följer:

1. Bootstrap
2. Bootstrap-theme
3. Inera-webcert
4. Inera-certificate
5. Intygstypernas css:er (dessa verkar laddas i vilken ordning som helst, vilket görs i app.js)

Sass

Nedan följer några exempel på hur sass har använts/kan användas i webcert.

Generellt

Valid css är valid sass, observera att vi använder oss av den nya scss-syntaxen, och det går alldeles utmärkt att mixa vanlig css med sass om man så vill. Fördelerna med sass är att det ger ett hierarkiskt sätt att uttrycka css selektorer som bättre följer hur den faktiska html:en ser ut. Man får också många hjälpmedel såsom variabler, moduler, mixins och andra sätt att återanvända css genom. I detta dokumentet redovisas bara ett urval av de vanligast sätten att använda sass, se sass dokumentationen för utförligare exempel.

Några vanliga exempel

Nedan följer några vanliga exempel hur sass förbättrar tydligheten.

Nästling av selektorer

.foo .bar {
    margin: 20px;
}

uttrycks i sass på följande sätt:

.foo {
  .bar {
    margin: 20px;
  }
}

Selektorer som berör samma DOM element, i detta fallet två klasser som båda ska finnas på ett givet DOM element.

//Html
<p class="foo bar">...</p>

//Css
.foo.bar {
    margin: 20px;
}

uttrycks i sass genom ett & tecken:

.foo {
  &.bar {
   margin: 20px; 
  }
}

Följande css där en selektor för ett a element kan betraktas som en förälderselektor kan uttryckas på ett mer kompakt sätt i sass:

a {
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

body.firefox a {
    font-weight: normal;
}

Uttrycks sass på följande vis:

a {
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
  body.firefox & {
    font-weight: normal;
  }
}

Variabler

För saker och ting som förekommer ofta, exempelvis färger, kan man införa variabler. $ tecken används före ett variabelnamn för att markera att det är just en variabel.

Exempel på variabler

//Colors
$mercury: #e5e5e5;

//urls
$url-avatar: url('/img/avatar.png');

//fonts
$font-0: Helvetica Neue;

Extends

@extend ger möjligheten att uttöka en css-selektor med stylingregler från en annan css-selektor. Läs mer om @extend. I följande exempel, som är hämtat från webcert, används en css-klass kallade font-common för att uttöka både html och body elementen med stylingregler. Observera att font-common inte är en konkret selektor, dvs. den har ingen konkret representation i den utgenererade css:en.

%font-common {
  font-size: 14px;
  font-family: $font-0, $font-1, $font-2, $font-3;
  text-align: left;
}

html {
  @extend %font-common;
}

body {
  @extend %font-common;
  &.start {
    background-color: $color_java_approx;
  }
}

Generera CSS

Om man vill testa att generera CSS utanför ett bygge görs detta på kommandoraden med:

grunt sass

Sass lint

Lintning av scss-filer görs genom kommandot:

grunt sasslint