Мир SASS

Логическим способом SASS, можно улучшить код CSS. SASS — это увлекательный мир новых кодов front-end.

SASS увлекательный мир кодов css

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

к меню ↑

Синтаксис Sass

Синтаксис SASS без скобок и точки с запятой, отступ используется для определения блока.

#main
  color: blue
  font-size: 0.3em
  a
    font:
      weight: bold
      family: serif
    &:hover
      background-color: #eee

Если вы хотите использовать точку с запятой в отдельных свойствах, делайте новую строку как показано ниже:

#main {
  color: blue;
  font-size: 0.3em;
  a {
    font: {
      weight: bold;
      family: serif;
    }
    &:hover {
      background-color: #eee;
    }
  }
}
к меню ↑

Вложения

Рассмотрим следующие два примера.
Хорошие вложения:

#navbar {
  width: 80%;
  height: 23px;
  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

Плохие вложения:

div#main {
  #sidebar {
    #navbar {
      width: 80%;
      height: 23px;
      aside {
        div {
          ul {
            list-style-type: none;
            li {
              float: left;
              a {
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}

Причина, по которой пример 2 плохой, потому что нет конкретных селекторов.

div#main #sidebar #navbar {}
div#main #sidebar #navbar aside div ul {}
div#main #sidebar #navbar aside div ul li {}
div#main #sidebar #navbar aside div ul li a {}

Давайте по порядку, что не так.

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

Существует правило в котором написано, что вложений не должно быть более четырех селекторов.

к меню ↑

Переменные

$site_max_width: 960px;
$font_color: $333;
$link_color: $00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);
body {
  color: $font_color;
  font {
    size: $font_size;
    family: $font_family;
  }
  line-height: $line_height;
}
#main {
  width: 100%;
  max-width: $site_max_width;
}

Мы все знакомы с переменными в JavaScript и PHP. Это точно такая же идея, но только в CSS.

к меню ↑

Функции и Операторы

Как и в любом другом языке программирования у SASS есть набор стандартных функций и операторов, смотрите документацию.

к меню ↑

Миксины

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

Например, одной обработкой префиксы:

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

Или для скрытия текста (часто используется с методами замены изображения):

@mixin hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Само собой разумеется что вы будете тратить много времени придумывать свой личный арсенал Миксинов для всех проектов.

к меню ↑

Проект SASS

Прелесть в использовании SASS является то, что можно сделать много маленьких файлов .scss, сколько вам нужно, они будут объединены в один CSS во время предварительной обработки. Рассмотрим следующий файлы стиля .scss:

@import "global/mixins";
@import "global/variables";
@import "global/normalize";
@import "content/links";
@import "content/lists";
@import "content/mediaObjects";
@import "content/panels";
@import "content/spacingOverrides";
@import "content/typography";
@import "content/textUtilities";
@import "layout/border";
@import "layout/grid";
@import "layout/scaffolding";
@import "navigation/breadcrumbs";
@import "navigation/master";
@import "navigation/leftnav";
@import "navigation/topnav";
@import "navigation/pagination";
@import "navigation/tabs";
@import "navigation/footer";
@import "forms/buttons";
@import "forms/forms";
@import "tables/tables";
@import "tables/forum";

Каждый из этих @import подключает новый файл .scss. При назначении имен этих компонентов файлов .scss, убедитесь, что вы используйте символ подчеркивания _ в начале имени файла. Например: _variables.scss, _normalize.scss. В Sass компилятор будет интерпретировать эти файлы как фрагменты, и не будет первично обрабатывать их отдельно. Соответственно файлы без подчеркивания будут обрабатываться как отдельные, например, style.scss, специальные страницы override.scss.

к меню ↑

Расширения SASS

Есть множество отличных дополнений и фреймворков созданных для Sass. Например Compass.

к меню ↑

Компас

Компас полнофункциональный фреймворк созданный для Sass, который включает разнообразные модели, генератор спрайтов, типографские ритмы и все CSS3 Mixins которые когда-нибудь могут понадобится.

Начало работы с Компас простой процесс. Создайте файл в корневом каталоге вашего веб-проекта с названием config.rb, этот файл будет говорить о том что подключен Компас для вашего проекта.

Пример:

# Каких-либо дополнительные плагины.
# Установка в корневой каталог вашего проекта при развертывании:
http_path = "/"
css_dir = "css"
sass_dir = .scss"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :expanded
environment = :development

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

Следующий шаг — это импорт Компас в ваш основной файл стилей. Если нужно, можно импортировать всё.

@import "compass";
@import "global/mixins";
[...]

или

@import "compass/utilities";
@import "compass/css3";
@import "compass/typography/vertical_rhythm";
@import "global/mixins";
[...]
к меню ↑

Генератор спрайтов

Спрайты быстро стали стандартом для размещения изображений на веб-страницы с помощью CSS. Если вы не знакомы со спрайтами, читайте. Они прекрасно подходят для веб, но они могут стать геморроем после обновления проекта, спрайты становится рутиной, и нужно обновить CSS (и возможно, HTML тоже).

Основная идея в том, что вы должны создать отдельные изображения как было раньше. Главное сохранить ваши изображения в папках, как показано ниже на скрине.

Скриншот размещения папок с изображениями
Снимок размещения папок с изображениями

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

// подключить сompass
@import "compass/utilities/sprites";
// импорт изображений
// Примечание: сompass уже знает что изображения в /images/folder
@import "icons/*.png";
// автоматически генерирует имена классов
@include all-icons-sprites;

Теперь подробно. Сначала импорт utils-спрайт compass. Дальше указать путь для compass где изображения, которые вы хотите использовать в качестве спрайта. Эта строка будет автоматически генерировать кучу имен классов используя названия папки, изображения и названия PNG’s в нем. Смотрите CSS ниже:

.icons-actions-add-mini,
.icons-actions-delete-mini,
[...]
.icons-multimedia-camera {
  background: url('/images/icons-s34fe0604ab.png') no-repeat;
}
.icons-actions-add-mini {background-position: 0 0;}
.icons-actions-delete-mini {background-position: 0 -16px;}
[...]
.icons-multimedia-camera { background-position: 0 -96; }

После этого можно было бы с класть руки, классы генерируются сами, там где нужно. Дело сделано. Спасибочки compass!

Но опыт показывает, что на основе вложенных элементов нужно добавить свои собственные имена-классов. Не беспокойтесь, компас разрешает это сделать.

В следующих примерах параметр передается в icons-sprite-*() utils имена.png файлы в вашу папку images/icons.

@import "icons/*.png";
.actions {
  .add    { @include icons-sprite(actions-add-mini); }
  .delete { @include icons-sprite(actions-delete-mini); }
}
.contact {
  .mail  { @include icons-sprite(contact-mail); }
  .phone { @include icons-sprite(contact-phone); }
}
.some-random-class-name { @include icons-sprite(hardware-television); }

Существует еще много других настроек Compass.

.icon-giant-killer-bear {
  $width: icons-sprite-width(giant-killer-bear);
  $height: icons-sprite-height(giant-killer-bear);
  @include icons-sprite(giant-killer-bear);
  @include size($width, $height);
  margin: 0 4px 0 0;
  vertical-align: text-bottom;
}

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

Я не копал слишком глубоко во все utils-спрайты, но я уверен если изучать Compass можно узнать другие потрясающие вещи.

к меню ↑

Заключение

Используйте SASS сейчас! Это сделает ваш код более эффективным и с ним гораздо легче писать CSS. Я не эксперт, когда речь идет о SASS, все еще учусь, много новых вещей читаю каждый день, поэтому если вы обнаружите какие-либо ошибки или упущения, пожалуйста дайте мне знать в комментариях.