Podstawowe arithmatic w GWT CssResource

Question

Szukam sposobu, aby zrobić coś takiego:

// style.css 
@def borderSize '2px'; 

.style { 
    width: borderSize + 2; 
    height: borderSize + 2; 
} 

gdzie szerokość i wysokość atrybuty by w końcu o wartości 4px.

Answer 1

Czasami używam następujące:

@eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */ 

dziwne, to działa tylko, jeśli nie było żadnych spacji między operatorem + i argumentów. Ponadto w @eval nie można używać stałych, które zostały wcześniej zdefiniowane przez @def. Można jednak używać stałych, które są zdefiniowane jako pola statyczne w jednej z klas Java:

@eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px"; 

Albo można pozwolić obliczenia wykonywane całkowicie Java:

@eval WIDTH com.example.MyCssCalculations.width(); /* static function, 
                 no parameters! */ 
@eval HEIGHT com.example.MyCssCalculations.height(); 
.style { 
    width: WIDTH; 
    height: HEIGHT; 
} 

Ale to, co faktycznie jak jest bardzo podobny do twojej sugestii:

@def BORDER_SIZE 2; 
.style { 
    width: value(BORDER_SIZE + 2, 'px'); /* not possible */ 
    height: value(BORDER_SIZE + 3, 'px'); 
} 

Nie sądzę, że jest to możliwe w GWT 2.0. Może znajdziesz lepsze rozwiązanie - oto strona Dev Guide na ten temat.

Answer 2

Uwielbiam też coś takiego, ale nie jest to możliwe. Nawet w CSS 3 ich nic takiego nie jest zaplanowane.

Jeśli naprawdę chcesz coś takiego zrobić, jedną z możliwości jest użycie php i skonfigurowanie serwera sieciowego tak, aby pliki .css były przetwarzane przez php.

Więc można zrobić coś takiego

<? 
    $borderSize = 2; 
?> 

.style { 
    width: <? borderSize+2 ?>px; 
    height: <? borderSize+2 ?>px; 
} 

Ale to nie jest „standardowy” sposób, myślę, że lepiej tego nie robić.

Answer 3

Mozilla nie odpowiada za pomocą funkcji CSS calc().

Przykład ten bezczelnie skradziony (z przypisania!) Od Ajaxian

/* 
* Two divs aligned, split up by a 1em margin 
*/ 
#a { 
    width:75%; 
    margin-right: 1em; 
} 
#b { 
    width: -moz-calc(25% - 1em); 
} 

To nie jest cross-browser, i to chyba tylko ledwo poparte nawet wersji krwawienie-krawędziowych Firefox, ale tam przynajmniej jest postęp poczyniony w tym kierunku.

Answer 4

Można również obliczyć w sposób dostawcy, jeśli umieścisz parametr w funkcji:

@eval baseFontSize com.myexample.CssSettingsProvider.getBaseFontSize(0)+"pt"; 

@eval baseFontSize_plus_1 com.myexample.CssSettingsProvider.getBaseFontSize(1)+"pt"; 

com.myexample.CssSettingsProvider będzie wyglądać następująco:

public static int getBaseFontSize(int sizeToAdd) { 
    if (true) { 
     return 9 + sizeToAdd; 
    } 
    return baseFontSize; 
}