HTMLowy odpowiednik SASS/LESS

pytanie zadane 8 listopada 2017 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)
edycja 8 listopada 2017 przez Alex.Ironside

Witam. Czy jest cos takiego jak SASS dla HTML? W sensie przykladowo:

Pisze sb stronke i mam tam 10p jeden pod drugim. Uzywam Bootstrapa i zamiast pisac 10 razy p z odpowiednimi klasami, mozna by to wrzucic w petle a na wyrenderowanym htmlu dodac content. Ponadto jesli chcemy zmienic klase we wszystkich p mozna by to zrobic po prostu w petli.

Nie wiem w sumie jak praktyczne cos takiego by bylo ale podoba mi sie idea.

Wiem ze jest emmet i on ulatwia sprawe niesamowicie, ale mimo wszystko taki kod ktory bylby transpilowany i edytowalny bez musu ctrl-z-owania brzmi przydatnie.

Edit. Chodzi mi o cos w stylu:

html{ 
  head{ 
    title();
    meta();
  }
  body{
    header{
      h1{};
    }
    for(i=0;i<10;i++)
    {
      p{content/lorem}.col-md-4;
    }
  }
}

3 odpowiedzi

odpowiedź 8 listopada 2017 przez xmentor Nałogowiec (49,520 p.)
wybrane 15 listopada 2017 przez Alex.Ironside

Najlepsza

Może pug

komentarz 8 listopada 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Chodzilo mi bardziej o cos w stylu

html{ 
  head{ 
    title();
    meta();
  }
  body{
    header{
      h1{};
    }
    for(i=0;i<10;i++)
    {
      p{content/lorem}.col-md-4;
    }
  }
}

komentarz 8 listopada 2017 przez xmentor Nałogowiec (49,520 p.)

No przecież pug pozwala na wszystko co tu zrobiłeś.

komentarz 8 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Handlebars.js?

komentarz 10 listopada 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

xmentor moglbys rzucic jakims linkiem z przykladem? Jestem w tym kompletnie zielony

1	komentarz 10 listopada 2017 przez xmentor Nałogowiec (49,520 p.) https://pugjs.org/api/getting-started.html Po prawej masz menu

komentarz 15 listopada 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

O dokladnie o to mi chodzilo! Dzieki

odpowiedź 8 listopada 2017 przez marioosu Dyskutant (9,260 p.)

Jest coś takiego - Emmet

http://bedekodzic.pl/emmet-html-css/

Przykład ze strony:

wpisujesz: ul>li.item*5>a{CLICK HERE}

dostajesz:

<ul>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
</ul>

1	komentarz 8 listopada 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.) Przecież napisał, że wie o Emmet. Czytacie? :P

odpowiedź 8 listopada 2017 przez CzikaCarry Szeryf (75,340 p.)

Systemy szablonów typu Twig, smarty czy blade?

komentarz 8 listopada 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Wlasnie chodzilo mi o cos innego. Cos w stylu

html{ 
  head{ 
    title();
    meta();
  }
  body{
    header{
      h1{};
    }
    for(i=0;i<10;i++)
    {
      p{content/lorem}.col-md-4;
    }
  }
}

komentarz 8 listopada 2017 przez CzikaCarry Szeryf (75,340 p.)

No mówię, w systemach szablonów możesz tworzyć bloki kodu :)

https://twig.symfony.com/doc/2.x/templates.html

komentarz 10 listopada 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

O w morde. Teraz widze foreacha. Moge Cie troche pomeczyc pytaniami z tym Twigiem? W zyciu z tego nie kozystalem.

komentarz 10 listopada 2017 przez CzikaCarry Szeryf (75,340 p.)

Oczywiście. Twig jest to system szablonów. Jest wykorzystywany w backendowym frameworku Symfony, ale można go też używać jako oddzielną bibliotekę. Pamiętaj wtedy, że strona nie jest wtedy statycznym HTML'em, tylko potrzebujesz jakiegoś serwera obsługującego PHP (Apache czy coś innego), ponieważ Twig jest napisany w PHP'ie :)