SASS для дизайнеров

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style
# here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via
# compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the
# original location of your selectors. Uncomment:
# line_comments = false

preferred_syntax = :sass

Теперь, когда вы закончили создание проекта, вам не нужно будет снова вводить «compass create», пока вы не захотите создать совершенно новый проект. Или, если вы похожи на меня — вы можете настроить свои недавно созданные файлы проекта и сохранить их для последующего использования в качестве отправной точки для новых проектов. После чего все, что вам нужно сделать, это …

Компас Смотреть

Теперь, когда каталог «my_project» существует, перейдите в него…

cd ~/desktop/my_project

Затем скажите Compass следить за изменениями в ваших * .sass (или * .scss) файлах …

compass watch

При обнаружении изменений в вашем * .sass (или * .scss) новые файлы * .css будут скомпилированы на лету. Как только вы будете удовлетворены тем, как все сложилось, вы можете нажать Ctrl-C, чтобы остановить наблюдателя, и приступить к развертыванию вашего плоского CSS .

Синтаксис

Вы можете использовать синтаксис Sass или SCSS и даже иметь файлы * .sass и * .scss в одном проекте, если вы не смешиваете синтаксис в одном файле. Вы также можете импортировать плоские файлы * .css в файлы * .sass или * .scss. Все это красиво компилируется в плоский файл * .css.

Sass и SCSS отличаются только тем, что синтаксис SCSS является «супер-набором» CSS3 — просто причудливый термин, означающий, что все обычные CSS по- прежнему прекрасно работают внутри SCSS — а фигурные скобки и точки с запятой все еще действительны и необходимы.

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

По сути, синтаксис Sass можно рассматривать как простой CSS без {,} или;. Фактически, если вы выполните поиск и замену, заменяя эти символы «ничто», вы будете готовы начать преобразование плоских CSS- файлов в Sass.

В качестве примера, здесь приведен один и тот же код в SCSS и Sass, и как он будет выглядеть скомпилированным (или написанным от руки) в CSS …

SCSS :

// This comment is not output to CSS.

/* This comment is output to CSS */

#foo {
  font: {
    size: 13px;
    family: 'Helvetica Neue', Arial, sans-serif;
  }
  .bar,
  .baz {
    border-width: 1px;
  }
  .bar {
    border: {
      style: solid;
      color: #369;
    }
  }
  .baz {
     border: {
      style: dotted;
      color: #693;
    }
  }
}

Sass:

// This comment is not output to CSS.

/* This comment is output to CSS */

#foo
  font:
    size: 13px
    family: 'Helvetica Neue', Arial, sans-serif

  .bar,
  .baz
    border-width: 1px

  .bar
    border:
      style: solid
      color: #369

  .baz
    border:
      style: dotted
      color: #693

CSS :

/* This comment is output to CSS */

/* line 5, ../sass/screen.sass */
#foo {
  font-size: 13px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* line 10, ../sass/screen.sass */
#foo .bar,
#foo .baz {
  border-width: 1px;
}

/* line 14, ../sass/screen.sass */
#foo .bar {
  border-style: solid;
  border-color: #336699;
}

/* line 19, ../sass/screen.sass */
#foo .baz {
  border-style: dotted;
  border-color: #669933;
}

компрессия

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

При развертывании на рабочем месте, когда все прочно, эти комментарии практически не нужны (без отступов и разрывов строк), поскольку браузеры будут отображать код с ними или без них. К счастью, все, что нужно, это установить одну опцию в вашем файле config.rb, и все будет автоматически уменьшено …

output_style = :compressed

Это дает код, который трудно читать для людей, но он идеально оптимизирован для сохранения ценных байтов и отлично разбирается любым браузером…

#foo{font-size:13px;font-family:"Helvetica Neue",Arial,sans-serif}#foo .bar,#foo .baz{border-width:1px}#foo .bar{border-style:solid;border-color:#369}#foo .baz{border-style:dotted;border-color:#693}

Вы даже заметите, что каждый экземпляр «;}» был заменен на «}», потому что CSS не требует точки с запятой в последнем правиле каждого блока. Такие мелочи складываются, что может привести к значительному уменьшению общего размера файла. Это означает более быструю загрузку страниц, что, как мы все знаем, очень важно .

Компас

Даже если бы вышеупомянутые функции были все, на что способен Sass, это стоило бы изучить. С риском походить на рекламного продавца … Но подождите, это еще не все! Там, где остановился Sass, Compass переходит на следующий уровень.

Крис Эванс как Капитан Америка

Градиенты

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

Именно здесь Compass действительно сияет, предоставляя миксины, которые выводят этот код для вас. С Sass, большую часть этого вы пишете сами, но Compass отлично справляется с первоклассным CSS3, для которого ни один человек не должен помнить синтаксис.

Это краткий, логичный код Sass / Compass:

@import compass/css3

#foo
  +background(linear-gradient(#fff, #ccc))

Превращается в этот смешной ассортимент:

/* line 3, ../sass/screen.sass */
#foo {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
  background: -webkit-linear-gradient(#ffffff, #cccccc);
  background: -moz-linear-gradient(#ffffff, #cccccc);
  background: -o-linear-gradient(#ffffff, #cccccc);
  background: -ms-linear-gradient(#ffffff, #cccccc);
  background: linear-gradient(#ffffff, #cccccc);
}

Экспериментальный SVG

Вы даже можете установить «экспериментальный» флаг, чтобы компас выводил SVG для вас. Это отлично подходит для браузеров, таких как IE9 и более старых версий Opera, которые понимают, как отображать встроенное изображение в кодировке base64, но не могут рисовать градиенты CSS3. Простая переменная со значением «true» выводит необходимый код.

Если вы установите $ экспериментально-поддерживаемую-svg: true …

@import compass/css3

$experimental-support-for-svg: true

#foo
  +background(linear-gradient(#fff, #ccc))

Строка SVG в кодировке base64 выводится…

/* line 5, ../sass/screen.sass */
#foo {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
  background: -webkit-linear-gradient(#ffffff, #cccccc);
  background: -moz-linear-gradient(#ffffff, #cccccc);
  background: -o-linear-gradient(#ffffff, #cccccc);
  background: -ms-linear-gradient(#ffffff, #cccccc);
  background: linear-gradient(#ffffff, #cccccc);
}

Это может потенциально добавить размер файла и, как таковое, является (разумно) опциональной возможностью, потому что флаг $ экспериментально-поддерживаемого-для-svg по умолчанию имеет значение false, если вы специально не включили его. Тем не менее, довольно круто знать, что это там.

Пограничный радиус

Не рассуждая о том, насколько крут Compass, позвольте мне показать еще один пример CSS3. Добавление радиуса границы достаточно тривиально, поскольку синтаксис несколько схож (кроме префиксов вендоров), но что, если вы хотите округлить только три из четырех углов элемента? Это становится немного сложнее, потому что браузеры различаются: «… верхний правый радиус» и «… радиусный верхний» и т. Д. Компас на помощь!

Вы просто печатаете это …

@import compass/css3

#foo
  +border-top-left-radius(4px)
  +border-top-right-radius(4px)
  +border-bottom-left-radius(4px)

Компас делает тяжелую работу …

/* line 3, ../sass/screen.sass */
#foo {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  -ms-border-top-left-radius: 4px;
  -khtml-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  -o-border-top-right-radius: 4px;
  -ms-border-top-right-radius: 4px;
  -khtml-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -khtml-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

Жесткое надувательство

Что это, чемпион? Вы уже запомнили весь этот модный синтаксис CSS3? Верно … Готов поспорить, что вы делаете. Продолжай говорить себе это. Если серьезно, даже если вы знаете все эти нажатия клавиш, кто в здравом уме хочет все это напечатать?

В порядке прекрасно. Я буду до ставки. Компас также имеет поддержку спрайтов изображений . Вы знаете, что файл PSD или PNG, который вы поддерживаете, содержит множество маленьких иконок, где вы умело подсчитываете количество пикселей, каждое из которых смещено от верхнего левого угла документа? Вы можете выйти из этого, и вместо этого иметь несколько отдельных файлов, которые Compass объединит в один HTTP- запрос.

Sass также имеет множество цветовых функций, которые могут воздействовать на цвета, так что вам не придется тщательно перекрашивать объекты в Photoshop и получать шестнадцатеричные значения с помощью пипетки. Если вы хотите затемнить что-то на 10%, просто сделайте это …

#foo
  color: darken(#369, 10%)

Который дает…

/* line 1, ../sass/screen.sass */
#foo {
  color: #264c73;
}

О, и получите это … Sass поддерживает математику, а Compass добавляет перечисление . Это означает, что вы можете создавать циклы, которые выдают численно увеличенный код, идеально подходящий для создания пользовательских вертикальных измерений сетки. Например, плагин 960 .

Существует даже плагин для создания базовой горизонтальной сетки, называемой вертикальным ритмом , позволяющей вам достичь (часто востребованной, редко реализуемой) цели — равномерной высоты строки по всей странице. Это не автоматический режим, но он определенно продвинет вас дальше, чем вы могли бы вручную настроить поля и отступы.

Программы

В настоящее время есть два приложения, которые можно использовать для имитации «наблюдения за компасом» для проверки изменений в файлах * .sass и / или * .scss и преобразования их в CSS . Кроме того, я знаю, по крайней мере, еще одно приложение, которое находится в стадии разработки и в настоящее время проходит закрытое бета-тестирование. Сегодня доступны два приложения:

• Compass.app
  — встроенный: JRuby
  — с открытым исходным кодом, на GitHub
  — стоимость: $ 7,00 скомпилировано
• Scout
  — встроено: JRuby + Adobe AIR
  — с открытым исходным кодом, на GitHub
  — стоимость: бесплатно

Готово

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

Просто думайте о Sass (и Compass) как о «jQuery из CSS ». Те, кто понимает основы CSS , всегда будут иметь преимущество перед дизайнерами, которые вообще не пишут код. Надежный инструмент, такой как Compass, в руках мастера CSS, только делает его / ее еще более эффективным, еще больше увеличивая разрыв.

Источник: http://sonspring.com/journal/sass-for-designers