“Руководство Sass”

Sass (Syntactically Awesome Style Sheets) — популярный язык сценариев препроцессора, который используется для расширения возможностей CSS. Он предоставляет такие функции, как переменные, вложение, примеси и многое другое, что делает код CSS более удобным в сопровождении и возможности повторного использования. Вот некоторые распространенные методы в Sass с примерами кода:

1. Переменные:
   Sass позволяет определять переменные для хранения повторно используемых значений. Например:

   $primary-color: #ff0000;
   
   .button {
    background-color: $primary-color;
   }

2. Вложенность:
   Sass обеспечивает поддержку вложенности для написания вложенных селекторов, что может улучшить читаемость. Например:

   .container {
    h1 {
      font-size: 24px;
      color: #333;
    }
   
    p {
      color: #777;
    }
   }

3. Миксины.
   Миксины позволяют определять повторно используемые блоки кода. Например:

   @mixin button($bg-color) {
    background-color: $bg-color;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
   }
   
   .primary-button {
    @include button(#ff0000);
   }

4. Частики и импорт:
   Sass позволяет разбивать стили на более мелкие файлы, называемые партиалами, и импортировать их при необходимости. Например:

   // _variables.scss
   $primary-color: #ff0000;
   
   // main.scss
   @import 'variables';
   
   .button {
    background-color: $primary-color;
   }

5. Расширение/Наследование:
   Sass предоставляет возможность расширять стили от одного селектора к другому. Например:

   .error {
    color: #ff0000;
    font-weight: bold;
   }
   
   .warning {
    @extend .error;
    text-decoration: underline;
   }

Это всего лишь несколько примеров того, что можно сделать с помощью Sass. Используя эти функции, вы сможете писать более эффективный и удобный в сопровождении код CSS.