Pinned Loading

1. .prettierrc.json .prettierrc.json

   1

   {

   2

     "printWidth": 100,

   3

     "tabWidth": 2,

   4

     "useTabs": false,

   5

     "semi": true,

2. visually-hidden visually-hidden

   1

   .visually-hidden { 

   2

     position: absolute; 

   3

     width: 1px; 

   4

     height: 1px; 

   5

     margin: -1px; 

3. Глобальне скидання стилів тегів Глобальне скидання стилів тегів

   1

   li { list-style: none; }

   2

   a { text-decoration: none; }

   3

   4

   /* Вказуємо box sizing */

   5

   *,

4. міксін з функцією перерахунку значен... міксін з функцією перерахунку значення line-height

   1

   @mixin btn {

   2

     padding: 12px 20px;

   3

     max-width: 200px;

   4

     min-width: 160px;

   5

     min-height: 40px;

5. Ретінізація фонових зображень Ретінізація фонових зображень

   1

   .price {

   2

     background-image: url(../images/price/bg-price_sm.png),

   3

       linear-gradient(to bottom, #191c26, #191c26);

   4

     background-image: -webkit-image-set(url(../images/price/bg-price_sm.webp) 1x),

   5

       linear-gradient(to bottom, #191c26, #191c26);

6. mixin для button mixin для button

   1

   @mixin main-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color)

   2

    {

   3

    display:inline-block;

   4

    text-decoration:none;

   5

    text-transform:uppercase;