0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Перед тем, как погрузиться в тему препроцессоров, необходимо понять, какие проблемы они призваны решить. CSS - достаточно сложный язык, так как в нем отсутствуют вложенности селекторов друг в друга, невозможно наследовать стили между различными селекторами, когда-то в нем не существовало даже переменных. И если с переменными вопрос уже решен, то отсутствие вложенности, функций, наследования делает CSS-код трудночитаемым и неоправданно объемным.</p>
1
<p>Перед тем, как погрузиться в тему препроцессоров, необходимо понять, какие проблемы они призваны решить. CSS - достаточно сложный язык, так как в нем отсутствуют вложенности селекторов друг в друга, невозможно наследовать стили между различными селекторами, когда-то в нем не существовало даже переменных. И если с переменными вопрос уже решен, то отсутствие вложенности, функций, наследования делает CSS-код трудночитаемым и неоправданно объемным.</p>
2
<p>Для решения этих проблем были созданы препроцессоры, которые являются надстройками над CSS. Это важно, потому что сами по себе препроцессоры не дадут сделать того, чего нельзя сделать в CSS. В конце концов файлы с кодом препроцессора будут преобразованы в обычный файл с расширением<em>.css</em>.</p>
2
<p>Для решения этих проблем были созданы препроцессоры, которые являются надстройками над CSS. Это важно, потому что сами по себе препроцессоры не дадут сделать того, чего нельзя сделать в CSS. В конце концов файлы с кодом препроцессора будут преобразованы в обычный файл с расширением<em>.css</em>.</p>
3
<p>В этом курсе мы изучим популярный препроцессор SASS, с помощью которого научимся:</p>
3
<p>В этом курсе мы изучим популярный препроцессор SASS, с помощью которого научимся:</p>
4
<ul><li>Не дублировать код.</li>
4
<ul><li>Не дублировать код.</li>
5
<li>Использовать шаблоны.</li>
5
<li>Использовать шаблоны.</li>
6
<li>Создавать свои функции.</li>
6
<li>Создавать свои функции.</li>
7
<li>Генерировать стили.</li>
7
<li>Генерировать стили.</li>
8
<li>Использовать наглядную вложенность.</li>
8
<li>Использовать наглядную вложенность.</li>
9
<li>Работать с условными конструкциями.</li>
9
<li>Работать с условными конструкциями.</li>
10
</ul><p>Все это позволит писать поддерживаемый код, который будет автоматически переводиться в обычный<em>CSS</em>.</p>
10
</ul><p>Все это позволит писать поддерживаемый код, который будет автоматически переводиться в обычный<em>CSS</em>.</p>
11
<h2>SASS или SCSS</h2>
11
<h2>SASS или SCSS</h2>
12
<p>Если вы пойдете искать информацию про SASS, то обязательно увидите, что есть SASS, а есть SCSS. Они даже выглядят по-разному, но называются SASS. Это путает. На самом деле, когда речь идет о препроцессоре, то он называется SASS, а вот писать на нем можно, используя один из двух синтаксисов:</p>
12
<p>Если вы пойдете искать информацию про SASS, то обязательно увидите, что есть SASS, а есть SCSS. Они даже выглядят по-разному, но называются SASS. Это путает. На самом деле, когда речь идет о препроцессоре, то он называется SASS, а вот писать на нем можно, используя один из двух синтаксисов:</p>
13
<ul><li><strong>Sass</strong>. Этот синтаксис не использует фигурные скобки и точки с запятой. Есть еще отличия, но о них можно подробнее узнать в документации.</li>
13
<ul><li><strong>Sass</strong>. Этот синтаксис не использует фигурные скобки и точки с запятой. Есть еще отличия, но о них можно подробнее узнать в документации.</li>
14
<li><strong>SCSS</strong>. Этот синтаксис в большей своей части копирует синтаксис обычного CSS.</li>
14
<li><strong>SCSS</strong>. Этот синтаксис в большей своей части копирует синтаксис обычного CSS.</li>
15
</ul><p>Сравните два кода:</p>
15
</ul><p>Сравните два кода:</p>
16
<p><strong>Sass</strong></p>
16
<p><strong>Sass</strong></p>
17
<p><strong>SCSS</strong></p>
17
<p><strong>SCSS</strong></p>
18
<p>Оба этих варианта скомпилируют один и тот же код:</p>
18
<p>Оба этих варианта скомпилируют один и тот же код:</p>
19
<p>В этом курсе мы будем использовать синтаксис<em>SCSS</em>, который более приближен к обычному синтаксису<em>CSS</em>. Он позволит меньше путаться на первых шагах вашего изучения препроцессора<em>SASS</em>.</p>
19
<p>В этом курсе мы будем использовать синтаксис<em>SCSS</em>, который более приближен к обычному синтаксису<em>CSS</em>. Он позволит меньше путаться на первых шагах вашего изучения препроцессора<em>SASS</em>.</p>
20
<h2>Практика</h2>
20
<h2>Практика</h2>
21
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
21
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
22
<p>В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях.</p>
22
<p>В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях.</p>
23
<h2>CodePen</h2>
23
<h2>CodePen</h2>
24
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>и в настройках<em>CSS</em>указать использование препроцессора<em>SASS</em>.</p>
24
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>и в настройках<em>CSS</em>указать использование препроцессора<em>SASS</em>.</p>