créer en utilisant brindille

Question

css

lecture symfony documentation about templating J'ai trouvé mention à propos de brindille pouvoir fichiers css de sortie.

comment est-ce utilisé? est-il possible de générer des css dynamiques de la même façon que je génère du HTML?

par exemple quand je veux afficher un certain modèle html, je crée une action de contrôleur et à l'intérieur, je rends le fichier .html.twig qui passe peut-il certains paramètres.

je peux rendre .css.twig même? où serait ce fichier stocké et comment pourrais-je l'inclure dans un autre modèle html.

Je voudrais garder tous les styles dans des fichiers séparés, mais certains de ces styles changent dans certaines conditions. par exemple, en ce moment je règle la hauteur de certains divs selon les calculs dans le contrôleur et je passe la hauteur du résultat comme paramètre au modèle. mais je ne me sens pas comme c'est très MVC, ayant une partie de la logique de représentation dans le contrôleur (ou même le modèle).

Answer 1

C'est certainement possible. Vous feriez la plupart des choses exactement la même chose que si vous le feriez pour le modèle html.

1. Créer un fichier, par exemple:

   /* src/Acme/MyBundle/Resources/views/somefile.css.twig */ 
   
   .someclasss { 
       background-color: {{ backgroundColor }}; 
   } 
   

2. action Créer contrôleur

   // src/Acme/MyBundle/Controller/MyStyleController.php 
   
   // ... 
   public function styleAction() 
   { 
       // Fetch it from service or whatever strategy you have 
       $backgroundColor = '#ff0000'; 
   
       return $this->render(
        'AcmeMyBundle::somefile.css.twig', 
        ['backgroundColor' => $backgroundColor], 
        ['Content-Type' => 'text/css'] 
       ); 
   } 
   
   // ... 
   

3. Créer un itinéraire pour cette action

   # src/Acme/MyBundle/Resources/config/routing.yml 
   
       css_route: 
        path: /some/path 
        defaults: { _controller AcmeMyBundle:MyStyleController:style } 
        methods: [GET] 
   

4. utilisation t chapeau dans css votre mise en page

   {# src/AcmeMyBundle/Resources/views/mypage.html.twig #} 
   
       {# ... #} 
       <link href="{{ path('css_route') }}" rel="stylesheet"> 
       {# ... #} 
   

Maintenant, si cela est une bonne idée devrait être une question distincte. Il y a certainement des cas où cette approche est parfaitement valable, mais il y a des cas où vous pouvez éviter cela. Gardez à l'esprit que servir un fichier CSS comme celui-ci est beaucoup plus cher que de servir un fichier CSS statique. De plus, puisqu'il s'agit d'un fichier CSS et qu'il se trouve dans la section HEAD de votre réponse, il ralentira le chargement de la page car il devra récupérer le fichier CSS avant de rendre le corps lui-même.

Si vous décidez de le faire assurez-vous de vérifier les possibilités de mise en cache, vous devez en faire aussi vite que possible.

Answer 2

En fait

public function styleAction() 
{ 
    // Fetch it from service or whatever strategy you have 
    $backgroundColor = '#ff0000'; 

    return $this->render(
     'AcmeMyBundle::somefile.css.twig', 
     ['backgroundColor' => $backgroundColor], 
     ['Content-Type' => 'text/css'] 
    ); 
} 

devrait être plus comme celui-ci

/** 
    * @Route("/css/style", name="style") 
    * @param Request $request 
    * @return Response 
    */ 
    public function styleAction(Request $request) 
    { 
     $firstColor = 'rgba(130, 30, 30, 0.9)'; 

     /** @var Response $response */ 
     $response = $this->render(':css:style.css.twig', [ 
      'firstColor' => $firstColor, 
     ]); 

     $response->headers->set('Content-Type', 'text/css'); 

     return $response; 
    } 

Notez que j'ai des annotations parce que j'utilise Symfony 3. Mais la chose importante dans mon exemple de code est que pour la réponse que je mets Content-Type à 'text/css'.