Начинаем использовать Sass для разработки WordPress темы. Часть 2

Опубликовано: ADv Дата 07.09.2014 в рубрике Своя тема Комментировать

Продолжение. Начало статьи смотрите по ссылке Начинаем использовать Sass для разработки WordPress темы. Часть 1

Вложенные правила в Sass

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

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

После обработки он будет выглядеть в CSS вот так:

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

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

Используем примеси в Sass

Иногда вам может понадобиться возможность неоднократного использования некоторого CSS кода в вашей таблице стилей. В этом случае вы можете использовать примеси. Давайте добавим такую примесь в ваш файл style.scss:

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

Данная примесь скрывает некоторый текст от вывода на экран. Ниже пример того, как вы можете использовать эту примесь для скрытия текста для логотипа:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

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

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Примеси также очень полезны при использовании префиксов. При добавлении значений прозрачности или border radius, использование примесей позволит сэкономить ваше время. Посмотрите на пример, где мы добавили примесь для добавления border radius.

@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(10px); }
.smallbutton { @include border-radius(5px); }

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

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

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

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