0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>Содержание</h2>
1
<h2>Содержание</h2>
2
<ul><li><a>Затем берём микроскоп и отправляемся читать документацию.</a></li>
2
<ul><li><a>Затем берём микроскоп и отправляемся читать документацию.</a></li>
3
<li><a>Постановка вопроса</a></li>
3
<li><a>Постановка вопроса</a></li>
4
</ul><h2>Затем берём микроскоп и отправляемся читать документацию.</h2>
4
</ul><h2>Затем берём микроскоп и отправляемся читать документацию.</h2>
5
<p>Мой соученик Вячеслав задал пару дней назад вопрос, который меня заинтересовал. Разобралась, написала ответ в комментариях. Никита посоветовал опубликовать статью в блоге.</p>
5
<p>Мой соученик Вячеслав задал пару дней назад вопрос, который меня заинтересовал. Разобралась, написала ответ в комментариях. Никита посоветовал опубликовать статью в блоге.</p>
6
<p><strong>Предупреждение 1.</strong>Прочитала только часть документации и на один из вопросов всё ещё ответить не могу. Интернет тоже затаился и на эту тему общаться со мной не хочет ... Но я его со временем разговорю :-)</p>
6
<p><strong>Предупреждение 1.</strong>Прочитала только часть документации и на один из вопросов всё ещё ответить не могу. Интернет тоже затаился и на эту тему общаться со мной не хочет ... Но я его со временем разговорю :-)</p>
7
<p><strong>Предупреждение 2.</strong>Цитата из Hexlet: "Пишите о том, в чём вы разбираетесь, с чем работаете, на чём съели собаку".</p>
7
<p><strong>Предупреждение 2.</strong>Цитата из Hexlet: "Пишите о том, в чём вы разбираетесь, с чем работаете, на чём съели собаку".</p>
8
<p>Я как-то ни собак, ни недожаренных китайских летучих мышей в принципе не ем :-)</p>
8
<p>Я как-то ни собак, ни недожаренных китайских летучих мышей в принципе не ем :-)</p>
9
<p>Так что попробую. Первый подход к снаряду, Sass глазами новичка.</p>
9
<p>Так что попробую. Первый подход к снаряду, Sass глазами новичка.</p>
10
<h2>Постановка вопроса</h2>
10
<h2>Постановка вопроса</h2>
11
<p><strong>Вячеслав:</strong>Вопрос по интерполяции и конкатенации.</p>
11
<p><strong>Вячеслав:</strong>Вопрос по интерполяции и конкатенации.</p>
12
<p>Я обнаружил, что если в примере</p>
12
<p>Я обнаружил, что если в примере</p>
13
<p>вместо _px _поставить %, компилятор будет ругаться и выдавать ошибку. Почему? Процент для него не система исчисления?</p>
13
<p>вместо _px _поставить %, компилятор будет ругаться и выдавать ошибку. Почему? Процент для него не система исчисления?</p>
14
<p>Дальше ещё интереснее, в поисках правильной записи, я обнаружил, что:</p>
14
<p>Дальше ещё интереснее, в поисках правильной записи, я обнаружил, что:</p>
15
<p>Следовательно последняя запись дает мне правильное значение по итогу. Но почему без интерполяции всё выражение помещается под "", если изначально в выражении только % в кавычках?</p>
15
<p>Следовательно последняя запись дает мне правильное значение по итогу. Но почему без интерполяции всё выражение помещается под "", если изначально в выражении только % в кавычках?</p>
16
<h3>Начинаем разбираться в теме</h3>
16
<h3>Начинаем разбираться в теме</h3>
17
<p><em>Quote</em></p>
17
<p><em>Quote</em></p>
18
<p>You should especially avoid using interpolation like #{$number}px. This doesn’t actually create a number! It creates an unquoted string that looks like a number, but won’t work with any number operations or functions. Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.<a>https://sass-lang.com/documentation/operators/numeric</a></p>
18
<p>You should especially avoid using interpolation like #{$number}px. This doesn’t actually create a number! It creates an unquoted string that looks like a number, but won’t work with any number operations or functions. Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.<a>https://sass-lang.com/documentation/operators/numeric</a></p>
19
<p><em>Quote end</em></p>
19
<p><em>Quote end</em></p>
20
<p>Ну да. В Sass строка (string) может стоять без кавычек, в одинарных или в двойных кавычках. Например<strong>5</strong>- это ещё число или уже строка? По природе вещей - число. Но если его нечаянно преобразовать в string (а в Sass это происходит слишком легко и этого можно не заметить) - то неприятностей не оберёшься.</p>
20
<p>Ну да. В Sass строка (string) может стоять без кавычек, в одинарных или в двойных кавычках. Например<strong>5</strong>- это ещё число или уже строка? По природе вещей - число. Но если его нечаянно преобразовать в string (а в Sass это происходит слишком легко и этого можно не заметить) - то неприятностей не оберёшься.</p>
21
<p>Предположим, у нас есть 5 и 2. И это почему-то уже не числа. Где-то мы их по ходу дела незаметно для себя преобразовали в string. Мы хотим их сложить (5 + 2) и получить 7. А не получается. Ответ - 52. Можно, конечно, перепроверить тип. А можно и голову сломать ...</p>
21
<p>Предположим, у нас есть 5 и 2. И это почему-то уже не числа. Где-то мы их по ходу дела незаметно для себя преобразовали в string. Мы хотим их сложить (5 + 2) и получить 7. А не получается. Ответ - 52. Можно, конечно, перепроверить тип. А можно и голову сломать ...</p>
22
<p><strong>Чтобы не рисковать головой, можно написать так:</strong></p>
22
<p><strong>Чтобы не рисковать головой, можно написать так:</strong></p>
23
<p>Или так:</p>
23
<p>Или так:</p>
24
<p><strong>Интересно, какой способ лучше?</strong>(Своего мнения по этому поводу пока нет, так как ещё не было практики.)</p>
24
<p><strong>Интересно, какой способ лучше?</strong>(Своего мнения по этому поводу пока нет, так как ещё не было практики.)</p>
25
<ul><li><p><a>https://css-tricks.com/snippets/sass/correctly-adding-unit-number/</a>Здесь есть вдобавок к методу замечание, что умножение для компьютера сложнее, чем сложение. Поэтому рекомендуют сложение с нулём.</p>
25
<ul><li><p><a>https://css-tricks.com/snippets/sass/correctly-adding-unit-number/</a>Здесь есть вдобавок к методу замечание, что умножение для компьютера сложнее, чем сложение. Поэтому рекомендуют сложение с нулём.</p>
26
</li>
26
</li>
27
<li><p>Где-то встретилось замечание, что употребление нуля нежелательно оттого, что при чтении кода могут возникнуть затруднения с пониманием. Согласна. 0% выглядит странно и такой код хочется почистить.</p>
27
<li><p>Где-то встретилось замечание, что употребление нуля нежелательно оттого, что при чтении кода могут возникнуть затруднения с пониманием. Согласна. 0% выглядит странно и такой код хочется почистить.</p>
28
</li>
28
</li>
29
<li><p>В документации советуют умножение.</p>
29
<li><p>В документации советуют умножение.</p>
30
</li>
30
</li>
31
</ul><p>Кстати, 5px, например - это в Sass тоже number по определению.<strong>То есть можно было бы написать и так:</strong></p>
31
</ul><p>Кстати, 5px, например - это в Sass тоже number по определению.<strong>То есть можно было бы написать и так:</strong></p>
32
<p><em>Quote</em></p>
32
<p><em>Quote</em></p>
33
<p>Numbers in Sass have two components: the number itself, and its units. For example, in 16px the number is 16 and the unit is px. Numbers can have no units, and they can have complex units.<a>https://sass-lang.com/documentation/values/numbers</a></p>
33
<p>Numbers in Sass have two components: the number itself, and its units. For example, in 16px the number is 16 and the unit is px. Numbers can have no units, and they can have complex units.<a>https://sass-lang.com/documentation/values/numbers</a></p>
34
<p><em>Quote end</em></p>
34
<p><em>Quote end</em></p>
35
<h3>К первому вопросу:</h3>
35
<h3>К первому вопросу:</h3>
36
<p>Компилятор выдаёт ошибку в случае width: #{$size}%</p>
36
<p>Компилятор выдаёт ошибку в случае width: #{$size}%</p>
37
<p><strong>Причина</strong>% такой же оператор, как + - / * % выдаёт остаток деления.</p>
37
<p><strong>Причина</strong>% такой же оператор, как + - / * % выдаёт остаток деления.</p>
38
<p>Пример:</p>
38
<p>Пример:</p>
39
<p><strong>#{}+ Так писать код никто бы не стал, так как ошибка очевидна. А с #{}% здесь всё то же самое и так же не работает:</strong></p>
39
<p><strong>#{}+ Так писать код никто бы не стал, так как ошибка очевидна. А с #{}% здесь всё то же самое и так же не работает:</strong></p>
40
<p>В этом месте Никита меня дополнил:</p>
40
<p>В этом месте Никита меня дополнил:</p>
41
<p><em>Quote</em></p>
41
<p><em>Quote</em></p>
42
<p>"Тут действительно основная проблема в использовании символа, который является математической операцией (а ещё и символом шаблонного селектора)".</p>
42
<p>"Тут действительно основная проблема в использовании символа, который является математической операцией (а ещё и символом шаблонного селектора)".</p>
43
<p><em>Quote end</em></p>
43
<p><em>Quote end</em></p>
44
<h3>Конечное решение Вячеслава:</h3>
44
<h3>Конечное решение Вячеслава:</h3>
45
<p><strong>Этот пример</strong>объясняю себе таким образом: здесь происходит конкатенация двух строк. ("Interpolation returns unquoted strings …"<a>https://sass-lang.com/documentation/interpolation</a>).</p>
45
<p><strong>Этот пример</strong>объясняю себе таким образом: здесь происходит конкатенация двух строк. ("Interpolation returns unquoted strings …"<a>https://sass-lang.com/documentation/interpolation</a>).</p>
46
<p>Первая строка (слева, это важно) без кавычек, вторая в кавычках. В таком случае и результат будет без кавычек. То есть на выходе у нас снова строка, прикинувшаяся числом. За что нас уже ругали в документации.</p>
46
<p>Первая строка (слева, это важно) без кавычек, вторая в кавычках. В таком случае и результат будет без кавычек. То есть на выходе у нас снова строка, прикинувшаяся числом. За что нас уже ругали в документации.</p>
47
<p><strong>Из документации:</strong>При конкатенации двух строк обращаем внимание на ту, что стоит на первом месте, перед знаком +.</p>
47
<p><strong>Из документации:</strong>При конкатенации двух строк обращаем внимание на ту, что стоит на первом месте, перед знаком +.</p>
48
<p>Если на первом месте строка без кавычек, то и результат будет без кавычек.</p>
48
<p>Если на первом месте строка без кавычек, то и результат будет без кавычек.</p>
49
<p>Если на первом месте строка в кавычках, то и результат будет в кавычках.</p>
49
<p>Если на первом месте строка в кавычках, то и результат будет в кавычках.</p>
50
<p><a>https://sass-scss.ru/documentation/sassscript/strokovie_operatsii/</a></p>
50
<p><a>https://sass-scss.ru/documentation/sassscript/strokovie_operatsii/</a></p>
51
<h3>Under constructions …</h3>
51
<h3>Under constructions …</h3>
52
<p>А вот по поводу основного вопроса с кавычками надо ещё дальше документацию смотреть. Там много неочевидных правил и все эти "мелочи" играют роль при преобразовании типов, расстановке кавычек и так далее ...</p>
52
<p>А вот по поводу основного вопроса с кавычками надо ещё дальше документацию смотреть. Там много неочевидных правил и все эти "мелочи" играют роль при преобразовании типов, расстановке кавычек и так далее ...</p>
53
<p><strong>По поводу "мелочей".</strong>Копирую пример из документации:</p>
53
<p><strong>По поводу "мелочей".</strong>Копирую пример из документации:</p>
54
<p><a>https://sass-lang.com/documentation/operators/numeric</a></p>
54
<p><a>https://sass-lang.com/documentation/operators/numeric</a></p>
55
<p>И это если только немножечко поскрести документацию. Там на самом деле ещё очень много забавных вещей. Они сами некоторые места так и помечают: "Fun fact".</p>
55
<p>И это если только немножечко поскрести документацию. Там на самом деле ещё очень много забавных вещей. Они сами некоторые места так и помечают: "Fun fact".</p>
56
<p>К сожалению, добавить можно ещё то, что в разных версиях Sass конкатенация производится по разному. (И не только она ...)</p>
56
<p>К сожалению, добавить можно ещё то, что в разных версиях Sass конкатенация производится по разному. (И не только она ...)</p>
57
<h3>Разная компиляция в разных версиях Sass</h3>
57
<h3>Разная компиляция в разных версиях Sass</h3>
58
<p>Меня сначала очень смутило то обстоятельство, что результат у Вячеслава и у меня различались в корне.</p>
58
<p>Меня сначала очень смутило то обстоятельство, что результат у Вячеслава и у меня различались в корне.</p>
59
<p>Пример, приведённый Вячеславом:</p>
59
<p>Пример, приведённый Вячеславом:</p>
60
<p>Его результат:</p>
60
<p>Его результат:</p>
61
<p>Мой (изначальный) результат:</p>
61
<p>Мой (изначальный) результат:</p>
62
<p>Поняла, что у нас, вероятно, какие-то разные версии Sass. Кое-что перенастроила. Попробовала компилировать через разные версии - да, результаты отличаются. Так что спасибо Вячеславу за его эксперименты и вопросы - они мне помогли кое-что понять :-)</p>
62
<p>Поняла, что у нас, вероятно, какие-то разные версии Sass. Кое-что перенастроила. Попробовала компилировать через разные версии - да, результаты отличаются. Так что спасибо Вячеславу за его эксперименты и вопросы - они мне помогли кое-что понять :-)</p>
63
<p>Кстати, тут тоже можно попробовать разные версии Sass (просто переключайтесь в третьем пункте меню с одной версии на другую):<a>https://www.sassmeister.com/</a></p>
63
<p>Кстати, тут тоже можно попробовать разные версии Sass (просто переключайтесь в третьем пункте меню с одной версии на другую):<a>https://www.sassmeister.com/</a></p>
64
<p>Но ... кажется тут проблемы только и начинаются и для описания я лучше открою новый топик. Иначе моим текстом, если его распечатать, можно будет обернуть Землю по экватору.</p>
64
<p>Но ... кажется тут проблемы только и начинаются и для описания я лучше открою новый топик. Иначе моим текстом, если его распечатать, можно будет обернуть Землю по экватору.</p>