Это то же самое, что использование переменных на любом языке. Вы можете просто изменить их, когда захотите.
Теперь вы можете думать - они никогда не изменятся, но в будущем вы можете внести некоторые изменения. Вы даже можете переместить CSS в другой проект, где вы решите внести некоторые изменения. Используя переменные, вы сделаете это за минуту.
Другой пример. Давайте предположим, что у вас есть следующий код в CSS:
#page {
width: 800px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
теперь вы решили изменить #page ширину 780px
SO изменить его:
#page {
width: 780px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
и теперь у вас есть проблема - вы нужно посмотреть во всем файле, что не так (в реальном файле это будет не так просто, как в примере выше).
Используя переменные, которые вы могли бы иметь:
@page-width: 800px
@content-width: 600px;
@sidebar-width: @page-width - @content-width;
так без проблем вы можете изменить значение или сделать небольшие изменения в этих 3-х линий.
Однако в примере из вопроса я думаю, что это не было сделано так, как должно.Если вы определяете:
@Margin-10: 10px;
@Margin-12: 12px;
@Margin-19: 19px;
вы ожидаете, что Margin-10 10 Маржа блок, но вы можете решить, чтобы изменить значение, скажем, 11, и вы можете иметь:
@Margin-10: 11px;
@Margin-12: 15px;
@Margin-19: 24px;
Это сделает вас полностью беспорядок, потому что на самом деле, даже если вы посмотрите на этот файл, вы теперь не знаете, что такое переменная Margin-10 и какова ее цель. Он имеет даже другую ценность, чем его название, поэтому вы не знаете, чего ожидать, и вам снова нужно взглянуть на весь источник CSS.
Так что переменные полезны, но они должны иметь имена, которые вы легко можете запомнить и узнать, какова их цель. Вы никогда не должны связывать имя переменной с переменным значением, потому что значение может измениться, и вы получите бесполезное имя.
Однако это также возможно в приведенном выше примере, что кто-то определить эти поля даже не менять их значения, но изменить их единицы, например, для использования EM:
@Margin-10: 10em;
@Margin-12: 12em;
@Margin-19: 19em;
Однако я до сих пор считаю, что это не самое лучшее решение потому что это ограничивает повторное использование этого файла
Для первого набора, я согласен с ответом Даррена. Это выглядит очень странно. Для второго набора не видно никакой необходимости в переменной. Переменные лучше использовать в тех местах, где вы знаете, что одинаковое значение требуется для нескольких свойств в разных селекторах, и хотите иметь одно общее место для их обслуживания, чтобы облегчить их изменение в будущем. Наконец, я также думаю, что этот вопрос может привлечь ответы на основе мнения. – Harry
Я согласен, что на этом может быть много вещей, основанных на мнениях! Однако я хочу добавить, что второй набор такой же, как и первый. В обоих случаях специфика определения вылилась в имя переменной, не делая желаемого по той же причине :) –