Введение в Sass для дизайнеров тем в WordPress

В качестве новичка в дизайне темах WordPress, у вас бы быстро появятся проблемы сохранения длинных CSS файлов, которые необходимо организовывать, масштабировать и делать читабельными. Вы также узнаете, что многие дизайнеры и фронтальные разработчики рекомендуют использовать язык CSS препроцессора как Sass или LESS. Но что они из себя представляют? и как надо начинать работать с ними? Эта статья представляет собой введение в Sass для новых дизайнеров тем WordPress.Мы расскажем вам, что такое CSS препроцессор, почему вам это нужно, и как установить и начать использовать его сразу.

Что такое Sass?

CSS, который мы используем был разработан, чтобы быть простым в использовании языка таблиц стилей. Однако веб претерпела изменения, и поэтому потребность дизайнеров иметь язык таблицы стилей, который позволяет им делать больше с меньшими затратами сил и времени. Языки CSS препроцессора, как Sass, позволяют использовать функции, которые в настоящее время не доступны в CSS, такие как использование переменных, основные математические операторы, Верстка, Mixins и т.д.

Он очень похож на PHP, который является язык препроцессор, который выполняет сценарий на сервере и генерирует вывод HTML. Кроме того, Sass производит предварительную обработку файлов .scss для создания файлов CSS, которые могут быть использованы браузерами.

Начиная с версии 3.8 , WordPress стили в админки были портированы для использования Sass. Есть много WordPress тематических магазинов и разработчиков, которые уже используют Sass, чтобы ускорить процесс их развития.

Начало работы с Sass для развития тем WordPress

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

Первое , что вам нужно сделать, это установить Sass. Он может быть использован в качестве инструмента командной строки, но есть и некоторые интересные приложения с графическим интерфейсом , доступные для Sass. Мы рекомендуем использовать Koala, который является бесплатным приложением с открытым исходным кодом доступный для Mac, Windows и Linux.

Ради этой статьи, вам нужно будет создать пустую тему. Просто создайте новую папку в /wp-content/themes/. Вы можете назвать его ‘MyThemes’ или что — нибудь другое. Внутри вашей пустой папки темы создайте другую папку и назовите его style.

В папке стилей, вам нужно создать файл style.scss с помощью текстового редактора, такого как Блокнот.

Теперь вам нужно открыть Koala и нажать на иконку плюс, чтобы добавить новый проект. Затем найдите свой каталог темы и добавьте его в свой проект. Вы заметите, что Коала автоматически найдет файл Sass в каталоге стилей и отобразит его.

Щелкните правой кнопкой мыши на файле Sass и выберите вариант Set Output Path. Теперь выберите корень вашего каталога темы, например, /wp-content/themes/mythemes/и нажмите кнопку ввода. Koala сгенерирует выходной CSS файл в каталоге темы. Чтобы проверить это необходимо открыть файл style.scss в текстовом редакторе как Блокнот и добавить этот код:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
}

Теперь вам нужно сохранить изменения и вернуться к Koala. Щелкните правой кнопкой мыши на файле Sass, и боковая панель будет откроется справа.Для компиляции файла Sass просто нажмите на кнопку ‘Compile’. Вы можете увидеть результаты, открыв файл style.css в каталоге темы, и он будет иметь обработанный CSS следующим образом:

body {
  font-family: arial, verdana, sans-serif; }

Обратите внимание, что мы определили переменную $fonts в нашем файле Sass. Теперь, когда нам нужно добавить семейство шрифтов нам не нужно снова вводить имена всех шрифтов. Мы можем просто использовать $fonts.

Какие еще сверхспособности Sass приносит в CSS?

Sass является невероятно мощным, обратная совместимость, и очень проста в освоении. Как мы уже упоминали ранее, вы можете создавать переменные, nesting, mixins, импорт, математические и логические операторы и т.д. Теперь мы покажем вам несколько примеров, и вы можете попробовать их на вашей теме WordPress.

Управление несколькими таблицами стилей

Одна общая проблема, с которой вы столкнетесь при разработки темы в WordPress, это большие таблицы стилей с большим количеством секций. Вы, вероятно, будете много прокручивать вверх и вниз, чтобы исправить вещи во время работы на вашей теме. Используя Sass, вы можете импортировать несколько файлов в основной таблице стилей и вывода одного файла CSS для вашей темы.

Как насчет CSS @import?

Проблема с использованием @import в файле CSS является то, что каждый раз, когда вы добавляете @import, файл CSS делает еще один запрос HTTP на сервер. Это влияет на ваше время загрузки страницы, которая не подходит для вашего проекта. С другой стороны, когда вы используете @import в Sass, он будет включать в себя файлы в файле Sass и обслуживать их все в одном файле CSS для браузеров.

Чтобы узнать, как использовать @import в Sass, сначала нужно создать файл reset.scss в директории стилей вашей темы и вставьте этот код в него.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 1;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 дисплей сброс для старых браузеров */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Теперь вам нужно открыть свой основной файл style.scss и добавить эту строку, где вы хотите вставить файл для импорта:

@import 'reset';

Обратите внимание на то, что вам не нужно вводить полное имя файла. Для компиляции этого вам необходимо открыть Koala и нажать на кнопку компиляции снова. Теперь откройте главный файл style.css в вашей теме, и вы увидите ваш файл  reset CSS включен в него.

Nestin в Sass

В отличие от HTML, CSS не является вложенным языком. Sass позволяет создавать вложенные файлы, которыми легко управлять и работать. Например, вы можете вложить все элементы для раздела <article> под селектором статьи. Для дизайнеров тем в WordPress, это позволяет легко работать на разных разделах и стиля каждого элемента. Чтобы увидеть Nestin в действии, добавьте это в ваш файл style.scss:

.entry-content { 
p { 
font-size:14px;
line-height:140%;  
} 
ul { 
line-height:140%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6613;
} 
}

После обработки он выведет следующий CSS:

.entry-content p {
  font-size: 14px;
  line-height: 140%; }
.entry-content ul {
  line-height: 140%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6613; }

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

Использование Mixins в Sass

Иногда вам нужно будет повторно использовать некоторые CSS вне вашего проекта, даже если правила стиля будет таким же, потому что вы будете использовать их для разных селекторов и классов. Вот где Mixins пригодится. Он позволяет добавить mixin в файл style.scss:

@mixin hide-texts{
    overflow: hidden;
    text-indent: -8000px;
    display: block;
}

Это в основном Mixin скрывает некоторый текст для отображения. Вот пример того, как можно использовать Mixins, чтобы скрыть текст для вашего логотипа:

.logo{
    background: url("my-logo.png");
    height:150px;
    width:250px;
    @include hide-texts;
}

Обратите внимание на то, что вам нужно использовать @include для добавления Mixins. После обработки он будет генерировать следующий CSS:

.logo {
  background: url("my-logo.png");
  height: 150px;
  width: 250px;
  overflow: hidden;
  text-indent: -8000px;
  display: block; }

Mixins также очень полезен с префиксами. При добавлении значения непрозрачности или радиус границы, используя Mixins вы можете сэкономить много времени. Посмотрите на этот пример, где мы добавили радиус границы.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.largebutton { @include border-radius(11px); }
.smallbutton { @include border-radius(6px); }

После компиляции, он сгенерирует следующий CSS:

.largebutton {
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -ms-border-radius: 11px;
  -o-border-radius: 11px;
  border-radius: 11px; }

.smallbutton {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px; }

Мы надеемся, что эта статья помогла понять важность применения Sass для развития тем в WordPress. Многие дизайнеры тем WordPress уже используют его. Некоторые считают, что в будущем CSS станет препроцессором. Дайте нам знать, что вы думаете об использовании языка CSS препроцессора как Sass для развития темы WordPress, оставив комментарий ниже.

(Пока оценок нет)

Загрузка...