2017-02-21 2 views
2

Я только начал работать с МЕНЬШЕ, и до сих пор все было в порядке. Однако я встретил своеобразную ситуацию, когда фон был выделен цветом (# 03A9F4 - 100). Моя интуиция в сочетании с моим пониманием шестнадцатеричных чисел, от небольшого IT, полученного во время колледжа (я не из CS-фона), явно привел бы к мысли, что итоговый (CSS) цветовой код будет # 03A8F4. Тем не менее, это было не в документе, который я использовал. В результате получилось # 004590.Было странное наблюдение/результат шестнадцатеричной математики в МЕНЬШЕ. Почему это так?

Итак, что я не получаю?

Less Код

@div-width: 100px; 
@color: #03A9F4; 

#left{ 
    width: @div-width; 
    background-color: @color - 100; 
} 

Результирующая CSS код

#left { 
    width: 100px; 
    background-color: #004590; 
} 
+0

Не могли бы вы добавить фрагмент кода с проблемой? –

+0

@SergeyDenisov У вас есть это. –

ответ

2

Я не точно уверены в математике, что происходит за кадром, но это легко выводится.

Короткий ответ:

МЕНЬШЕ преобразует число в десятичной системе, на канал, чтобы выполнить вычитание, а затем вновь преобразуется обратно в шестнадцатеричном.

Длинный ответ:

Если вы измените 100 на :

background-color: #03A9F4 - #100 

выход

background-color: #00a9f4; 

представляет собой сокращенную здесь #110000, поэтому только красный канала.

Теперь, когда вычитание номера вместо цвета, LESS лечит это немного по-разному. На этот раз сломаем его по каналу.

Оригинальный цвет: #03A9F4, выход: #004590

Красный03 -> 00

СинийA9 -> 45

ЗеленыйF4 -> 90

Поскольку красный канал не говорит нам много, мы посмотрим на другие каналы.

Для синего, A9 в десятичной форме 169. Вычитание 100 дает нам листья 69. Что такое 69 (десятичный) в гексагоне? Это 45.

Для зеленых, F4 в десятичной форме является 244. Вычитание 100 листов 144, которое равно 90 в гексагоне.

+0

Спасибо за объяснение. Это, безусловно, имеет смысл. –

Смежные вопросы