{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7sji1"},{"data":{"image":{"id":"5ad43586bce67e1d4810563c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ap9fo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"SCSS — это специализированный метаязык, созданный на основе языка SASS, который позволяет расширить возможности обычных каскадных таблиц стилей. Он добавляет в CSS такие важные инструменты как переменные, наследование, логические операции, математические функции, разделение на модули. В дальнейшем код написанный на SCSS транслируется в обычный CSS для дальнейшего использования. Это позволяет упростить и увеличить скорость разработки. Особенно это актуально, если разработка ведется сразу несколькими людьми.","type":"unstyled","key":"ciucr"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":46,"offset":27}],"inlineStyleRanges":[],"text":"Предыдущая статья из серии Создание Core.NET 2.0 веб-приложения на Vue.js","type":"unstyled","key":"frt8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Переменные (variable) SCSS","type":"header-three","key":"ejv4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":313,"style":"BOLD"}],"text":"Благодаря использованию переменных у нас появляется возможность задавать имена для любых используемых данных, таких как цвета, шрифты, числовые значения и другие, а в дальнейшем использовать в любом месте. Задание переменной осуществляется с помощью символа $. Давайте рассмотрим пример.В папке App создадим файл variables.scss со следующим содержимым.","type":"unstyled","key":"8jmk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$blue: #4682B4;","type":"blockquote","key":"dcelv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":92,"style":"BOLD"}],"text":"Здесь мы объявили переменную с именем blue и хранимым значением #4682B4.Теперь изменим файл App.vue, добавив в него немного стилей.","type":"unstyled","key":"7kik2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"c6mu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы видите в блоке стилей мы сначала импортировали данные созданного ранее файла с переменными, а потом использовали переменную для установки цвета заголовка. Обратите внимание, что у нас уже включено отслеживание изменений файлов. Это означает, что если во время выполнения приложения, мы изменим какое-либо значение, то нам не придется пересобирать его. Достаточно просто сохранить файл и все изменения отобразятся на экране. В худшем случае придется обновить страницу. Это очень упрощает процесс разработки, потому что не приходится ждать компиляции после каждого изменения.В итоге получаем следующий результат: ","type":"unstyled","key":"94p8d"},{"data":{"image":{"id":"5ad4348d00b3dd0ec800fec0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"civ1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Вложенности SCSS","type":"unstyled","key":"dtgcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML существует четкая вложенность элементов. Благодаря этому, структура данных визуально воспринимается значительно легче. В обычном же CSS вложенность реализуется отдельными блоками, что не очень удобно.","type":"unstyled","key":"23t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nav ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\nnav li {\n display: inline-block;\n}","type":"blockquote","key":"3dm13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменим главную страницу добавив стили для списков внутри навигации. Обратите внимание, что благодаря вложенности, мы указываем стили для конкретной иерархии элементов. Благодаря этому, два идентичных списка буду выглядеть по-разному, в зависимости от родительского тега.","type":"unstyled","key":"c9bu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"c1pvo"},{"data":{"image":{"id":"5ad434b948c85ec068eea4eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1cbo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Фрагментирование (partial) SCSS","type":"unstyled","key":"4amnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть возможность создавать именованные фрагменты разметки, сохраненные в отдельные файлы для дальнейшего использования в нескольких местах. Обратите внимание, что имя файла фрагмента обязательно должно начинаться с символа подчеркивания. Это позволяет компилятору пропускать эти файлы и не добавлять их отдельно в результирующий CSS. Для подключения фрагмента используется команда @import.Создадим фрагмент _h2partial.scss","type":"unstyled","key":"eit21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h2 {\n color: darkorange;\n}","type":"blockquote","key":"cvamc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И теперь добавим этот фрагмент","type":"unstyled","key":"53obo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"2ors5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Импорт (import) SCSS","type":"header-three","key":"6shig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Импортирование позволяет разделить большой файл на несколько отдельных частей, которые будут более удобными в поддержке и обслуживании. Мы уже использовали импортирование подключив файл с переменными","type":"unstyled","key":"2qd2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@import './variables.scss';","type":"blockquote","key":"es0og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что задавать импортированный файл можно как по полному пути, так и только по его имени.","type":"unstyled","key":"2kb9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@import 'variables';","type":"blockquote","key":"95hal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Миксины (mixin) SCSS","type":"header-three","key":"khkl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При настройке стилей довольно часто встречаются куски однотипного кода, которые используются в разных компонентах. Например, это использование вендорных префиксов (стили для конкретных браузеров). Для упрощения работы с ними используются так называемые миксины, или примеси. Они позволяют создавать конкретные группы свойств.","type":"unstyled","key":"66iuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"cp6rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы видите, мы успешно добавили рамочку со скругленными углами с помощью миксин. ","type":"unstyled","key":"dltes"},{"data":{"image":{"id":"5ad434f348c85ec068eea4ee"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8np2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Наследование (extend) SCSS","type":"unstyled","key":"7c4mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наследование позволяет расширять ранее определенные наборы свойств, путем добавления новых. Мы можем определять базовые наборы, и создавать их узкоспециализированные реализации. Примером может служить сообщение. Сначала мы определяем общие свойства, характерные для всех типов сообщений, а потом расширяем добавляя специализированные.","type":"unstyled","key":"86sg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"9srhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Математические операторы (math) SCSS","type":"header-three","key":"89u15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование математических операторов очень упрощает процесс разработки стилей. Мы можем применять базовые операции, такие как сложение (+), вычитание (-), умножение (*), деление (/), процент (%).","type":"unstyled","key":"e2l2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"794b3"},{"data":{"image":{"id":"5ad4351dbce67e1d48105638"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dkgfb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Условный оператор (if) SCSS","type":"header-three","key":"2fnep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Условный оператор позволяет динамически изменять стили в зависимости от некоторых условий. Например возможна проверка значения какой-либо переменной и установка стиля только при определенном условии.","type":"unstyled","key":"fqv3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"drkh1"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":21,"offset":168}],"inlineStyleRanges":[],"text":"Это далеко не все возможности SCSS. Здесь я рассмотрел только основные, наиболее часто используемые возможности. За дополнительной информацией можно обратиться на сайт https://sass-scss.ru/. Подписывайтесь, чтобы не пропустить новые выпуски.","type":"unstyled","key":"fou4i"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":9,"offset":10}],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Источник: CODE BLOG","type":"header-two","key":"621jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"fndeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"iL0fKjpCjK7z5jwYdfc3"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/5a290483168a91eacced425b/sozdanie-corenet-20-vebprilojeniia-na-vuejs-5ad1a27d3dceb74b285da94f"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://sass-scss.ru/","url":"https://sass-scss.ru/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://shwanoff.ru/scss/","url":"https://shwanoff.ru/scss/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Hello World!

Hello World!

Hello World!

Привет, мир!