Создайте свою собственную тему Atom с помощью CSS

Наша начальная тема colors.less file

Наша тема colors.less файл после изменения

Что сейчас произошло?

Давайте глубже рассмотрим эти меньше файлов. index.less импорт base.less . Если мы откроем base.less , мы увидим, что он очень похож на CSS. Мы видим, что тема использует некоторые функции Less, такие как переменные. Переменные легко обнаружить, поскольку они начинаются с символа @ .

А сейчас давайте сосредоточимся на цвете фона редактора. Цвет определяется в первых нескольких строках.

 @import "syntax-variables"; atom-text-editor, :host { background-color: @syntax-background-color; 

Мы можем видеть, что background-color редактора установлен в переменную @syntax-background-color . Но где определяется @syntax-background-color ?

Мы можем видеть, что файл с именем syntax-variables был импортирован в первой строке. Давайте посмотрим внутри syntax-variables.less для определения @syntax-background-color .

 @import "colors"; // This defines all syntax variables that syntax themes must implement when they // include a syntax-variables.less file. // General colors @syntax-text-color: @very-light-gray; @syntax-cursor-color: white; @syntax-selection-color: lighten(@dark-gray, 10%); @syntax-background-color: @very-dark-gray; 

Мы находим, что @syntax-background-color имеет значение @very-dark-gray . Как вы уже догадались, @very-dark-gray определяется в colors.less . Вот почему мы открыли colors.less и изменили @very-dark-gray чтобы изменить цвет фона редактора.

Организация таблиц стилей

Как организовать переменные между таблицами стилей — дело вкуса. Atom предлагает через свой автоматически сгенерированный шаблон сгруппировать элементы, которые должны иметь одинаковые цвета, используя синтаксические переменные в base.less а затем назначить цвет каждой из этих переменных в syntax-variables.less . Но вы можете видеть, что это больше для нашего удобства, и во многих случаях цвета также напрямую определяются в base.less . Вооружившись этой информацией, в новой теме должно быть довольно легко изменить цвета! Поэкспериментируйте с совершенно новой палитрой и просмотрите результаты, перезагрузив окно Atom.

Расширенный стиль

Но что, если мы хотим изменить стиль для очень специфических случаев? Помимо переменных и импорта, есть несколько других функций Less, которые мы найдем полезными при чтении и изменении наших таблиц стилей. Вы можете пропустить следующие два подраздела, если вы уже знакомы с использованием Less.

1. Вложенные стили
2. Оператор &

Вложенные стили

Less поддерживает вложенные стили. Как они работают?

 <div class="container"> <a href="http://some-url.com">Click here!</a> <div class="red-block"> <a href="http://some-url.com">Click here!</a> <a href="http://some-url.com">Click here!</a> </div> <a href="http://some-url.com">Click here!</a> <a href="http://some-url.com">Click here!</a> </div> 

Допустим, мы хотели, чтобы все теги <a> внутри .red-block были красными, а не те, что снаружи. Мы бы написали таблицу стилей Less следующим образом:

 .container { .red-block { a { color: red; } } } 

Это так же, как:

 a.container.red-block { color: red; } 

В автоматически сгенерированных таблицах стилей широко используются вложенные стили, поскольку это обеспечивает совместное отображение связанных стилей.

Оператор &

Оператор & лучше всего объяснить на примере.

 .box { color: black; &-red { color: red; } &-blue { color: blue; } &:hover { color: gray; } } 

Это так же, как:

 .box { color: black; } .box-red { color: red; } .box-blue { color: blue; } .box:hover { color: gray; } 

Как видите, & — это сокращение для родительского селектора. Он используется довольно часто в base.less и теперь мы знаем, как это работает.

Синие имена переменных

Теперь давайте попробуем некоторые дополнительные изменения цвета. Давайте превратим все имена переменных в синий. Давайте также подчеркнем имя переменной, когда наведем на нее курсор.

Atom автоматически добавляет класс .variable ко всем переменным в редакторе кода. Итак, нам нужно изменить стиль для класса .variable .

 .variable { color: #336699; &:hover { text-decoration: underline; } ... 

Перезагрузите страницу и все имена переменных (начинающиеся с @ ) теперь должны быть синего цвета. И зависание на одном должно привести к подчеркиванию!

Текущий номер строки

Теперь давайте также сделаем номер текущей строки синим, чтобы он бросился в глаза. Если вы прочитаете base.less , вы найдете раздел с именем .gutter , внутри которого мы можем .line-number стиль .line-number .

В colors.less мы добавляем @deep-sky-blue: #009ACD; ,

Затем мы используем этот цвет в base.less . Вы могли заметить, что в таблице стилей есть два класса cursor-line — .cursor-line-no-selection и .cursor-line . Теперь, если какой-либо текст выделен в строке, мы можем сделать номер строки еще более заметным, сделав его светлее. Меньше имеет отличную функцию lighten которая позволяет нам сделать это легко.

 .gutter { background-color: @syntax-gutter-background-color; color: @syntax-gutter-text-color; .line-number { &.cursor-line { background-color: @syntax-gutter-background-color-selected; color: lighten(@deep-sky-blue, 10%); } &.cursor-line-no-selection { color: @deep-sky-blue; } 

Это изменение, если все сделано правильно, выглядит так:

Наша новая тема для текущего номера строки!

Вывод

Благодаря серии простых примеров и практическим знаниям CSS мы создали совершенно новую синтаксическую тему для Atom. Вы можете продолжать улучшать свою тему Atom, и если вам нравится то, что вы создали, вы можете поделиться ею со всем миром, используя Atom Package Manager (APM) . Счастливого взлома! Пожалуйста, поделитесь темами, которые вы создаете в комментариях.

Ресурсы

Вот список ресурсов, которые вы можете использовать, чтобы углубиться в некоторые идеи, представленные в этом руководстве:

1. Функции управления цветом в Less : Less имеет ряд интересных функций цвета, таких как «светлее» и «темнее».
2. Публикация вашей темы Atom . Инструкции по публикации пакета Atom.
3. Руководство по полету Atom : руководство «Приступая к работе» для всех вещей Atom.