Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie zmiennych w LESS
Forum PHP.pl > Forum > Po stronie przeglądarki
eKodzik
Witam,

Najlepiej by opisać całość pokażę Wam fragment kodu i powiem w czym jest problem:

  1.  
  2. /********************************************************************************
    *************
  3. 1. Width Container Grid ... - 400px
  4. ********************************************************************************
    *************/
  5. @media screen and (max-width: 400px) {
  6. @WidthConGrid
  7. }
  8. /********************************************************************************
    *************
  9. 2. Width Container Grid 401px - 500px
  10. ********************************************************************************
    *************/
  11. @media screen and (min-width: 500px) {
  12. @WidthConGrid : 500px;
  13. }
  14. /********************************************************************************
    *************
  15. 3. Width Container Grid 501px - 750px
  16. ********************************************************************************
    *************/
  17. @media screen and (min-width: 750px) {
  18. @WidthConGrid : 750px;
  19. }
  20. /********************************************************************************
    *************
  21. 4. Width Container Grid 751px - 1000px
  22. ********************************************************************************
    *************/
  23. @media screen and (min-width: 1000px) {
  24. @WidthConGrid : 1000px;
  25. }
  26. /********************************************************************************
    *************
  27. 5. Width Container Grid 1001px - 750px
  28. ********************************************************************************
    *************/
  29. @media screen and (min-width: 1200px) {
  30.  
  31. @WidthConGrid : 1200px;
  32.  
  33. }
  34.  
  35. @widthCol01 : @WidthConGrid/12;
  36. @widthCol02 : @WidthConGrid/11;
  37. @widthCol03 : @WidthConGrid/10;
  38. @widthCol04 : @WidthConGrid/9;
  39. @widthCol05 : @WidthConGrid/8;
  40. @widthCol06 : @WidthConGrid/7;
  41. @widthCol07 : @WidthConGrid/6;
  42. @widthCol08 : @WidthConGrid/5;
  43. @widthCol09 : @WidthConGrid/4;
  44. @widthCol10 : @WidthConGrid/3;
  45. @widthCol11 : @WidthConGrid/2;
  46. @widthCol12 : @WidthConGrid/1;
  47.  
  48.  
  49. .body {
  50. >.wrapper{
  51. width: @widthCol12 ;
  52. margin: auto;
  53. height: 200px;
  54. background-color: black;
  55. }
  56. }


chodzi mi dokładnie o część:
  1. @media screen and (min-width: ----px) {
  2.  
  3. @WidthConGrid : ----px;
  4.  


Less nie uznaje zapisu takiego typu, gdzie nie tworzy zmiennej czy raczej nie działa poprawnie gdy tworzę zmienną do przekazania dalej. Inaczej wygląda taki zapis:
  1. @media screen and (min-width: ----px) {
  2.  
  3. @WidthConGrid : ----px;
  4. .styl{
  5. width: @WidthConGrid;
  6. }


Czyli zmienna istnieje ale nie da się jej wyciągnąć na zewnątrz by ją wykorzystać, czy wiecie w czym jest dokładniejszy problem?
Comandeer
Problem jest w tym, że LESS ma określony zakres zmiennych i zmienne wewnątrz deklaracji są lokalne.

Inna rzecz, że nie bardzo widzę sens w Twoim obecnym kodzie. LESS ma z założenia być parsowany przed tym, jak przeglądarka zacznie renderować stronę. Tym samym nie ma niczego, co pozwoliłoby rozwiązać media queries z Twojego kodu. Tym samym nawet jeśli dana zmienna nie byłaby lokalna, to i tak nic by Ci to nie dało, bo kod nie miałby jak wybrać odpowiedniego bloku. Proponuję po prostu zrobić sobie mixina do tworzenia grida i odpalać go w poszczególnych media queries.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.