Tag: css

Сразу отмечу, что я не имею никакого отношения к миру ruby. Изредка пишу простые скриптики для небольших личных нужд, не углубляясь ни в дебри языка, ни в его окружение. В очередной раз обновив с нуля систему, я снова столкнулся с задачей установки compass-а. И в очередной раз все стандартные способы надо мною надругались. Казалось бы, linuxmint ― это просто разновидность ubuntu, самого популярного репозитория, а значит установка популярной либы не должна быть проблемой. Но нет…

Установить compass можно как-минимум двумя способами. Первый это привычный нам aptitude: sudo aptitude install ruby-compass. Программа устанавливается без ошибок, и даже позволяет узнать её версию. Но вот работать отказывается на отрез, ругаясь на отсутствие какого fssm. Быстрый поиск решения проблемы результатов не дал. Выполнив sudo aptitude purge ruby-compass, я решил воспользоваться стандартным механизмом для ruby ― gem. Итак: gem install compass выбрасывает мне ошибку доступа. Дескать в /usr/… ему недостучаться, и он просит root-а. Такое поведение мне кажется странным, но ладно, ок, установим из под root-а. Установка проходит успешно, но вот сам compass после этого запускаться отказывается. Нужен root. Вот это уже действительно странно. 

В конечном счёте я нагуглил установку с таким вот ключём gem install --user-install compass. Установка прошла успешно. Но вот никаких удобных ссылок для запуска программы не было создано. Пришлось руками лепить ссылку к ~/.gem/ruby/1.9.1/gems/compass-1.0.1/bin/compass. Теперь всё работает. 

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

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

В CSS3 появилось замечательно свойство box-sizing. Это свойство объясняет браузеру каким образом следует толковать значения height и width. В обычном состоянии (box-sizing: content-box) эти величины влияют только на размеры содержимого блока, но если задать значение border-box, то при рассчёте также будут учитываться padding и border. Чрезвычайно нужное свойство, которое, к сожалению, не поддерживается в IE6-7. Для Firefox следует использовать -moz-box-sizing, а для старых webkit-ов -webkit-box-sizing. А теперь две ложки дёгтя, которые сильно ограничивают применение этого свойства в некоторых ситуациях:

• Mozilla Firefox && min-height. Если текущее значение height-а задаётся свойством min-height, а не height (т.е. height не задан вовсе, либо он меньше, чем min-height), то огнелис напрочь забывает про -moz-box-sizing. Полагаю, что это баг, который в будущем починят.
• Google Chrome && display: table-cell. Блоки имеющие display: table-* и им подобные не используют box-sizing. Т.е. таблицы и блоки с вертикальным выравниванием “пролетают”.

Наткнулся на полезнейшую вещь - таблицу соответствий единиц измерений шрифта (pt, px, em, %). На всякий случай скопипастил на сайт, для долговечности :) (источник).