Как сверстать превьюшки на jade?

На самом деле, существует несколько способов сверстать превьюшки с использованием Pug (ранее известного как Jade). Давайте рассмотрим несколько опций.

1. Использование HTML и CSS:
С помощью Pug, вы можете генерировать HTML-разметку для превьюшек. Затем, вы можете использовать CSS для стилизации.

Пример Pug-кода:

   .preview
     img(src="path/to/image.jpg")
     h3 Preview Title
     p Preview description

CSS-код для стилизации:

   .preview {
     border: 1px solid #ccc;
     padding: 10px;
     text-align: center;
   }
   
   .preview img {
     max-width: 100%;
     height: auto;
   }
   
   .preview h3 {
     font-size: 16px;
     margin-top: 10px;
   }
   
   .preview p {
     font-size: 14px;
     color: #666;
   }

В этом примере, превьюшка представляет собой блок .preview, внутри которого содержится изображение, заголовок и описание. CSS-код устанавливает границы и стили текста.

2. Использование Pug и CSS-препроцессора:
Если вы используете CSS-препроцессор, например Sass или Less, вы можете использовать его в сочетании с Pug для еще большей гибкости и удобства. Ниже приведен пример с использованием Sass вместе с Pug.

Пример Pug-кода:

   .preview
     img(src="path/to/image.jpg")
     h3 Preview Title
     p Preview description

Sass-код для стилизации:

   .preview {
     border: 1px solid #ccc;
     padding: 10px;
     text-align: center;
     
     img {
       max-width: 100%;
       height: auto;
     }
     
     h3 {
       font-size: 16px;
       margin-top: 10px;
     }
     
     p {
       font-size: 14px;
       color: #666;
     }
   }

В этом примере Sass используется в блоке .preview для определения стилей для изображения, заголовка и описания.

3. Использование Pug и CSS-фреймворка:
Если вы используете CSS-фреймворк, например Bootstrap или Foundation, вы можете использовать его классы вместе с Pug для создания превьюшек.

Пример Pug-кода с использованием Bootstrap:

   .preview.card
     img.card-img-top(src="path/to/image.jpg")
     .card-body
       h3.card-title Preview Title
       p.card-text Preview description

В этом примере, .preview использует классы card из Bootstrap, которые определяют структуру и стили превьюшки. Внутри .preview находятся изображение с классом card-img-top, а текст заголовка и описания находятся в блоке .card-body с классами card-title и card-text соответственно.

Надеюсь, что эти примеры помогут вам сверстать превьюшки с использованием Pug. Вы можете адаптировать их под свои нужды, добавлять или изменять классы и стили, чтобы достичь желаемого внешнего вида и функциональности.