Дурные примеры, несомненно, действуют сильнее хороших правил (Д. Локк).

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

7 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 4,50 из 5)
Загрузка...
21 октября 2016
Введение в 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 - CSS с cуперспособностями

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

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

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

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

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

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

Добавление проекта в Koala

Щелкните правой кнопкой мыши на файле 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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 71

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Размер шрифта

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close