Pull to refresh

SCSS — новая порция глазури от Sass

CSS *
imageПоследнее время я практически не занимался версткой, и пропустил выход Sass3, в котором реализовано расширение SCSS (Sassy CSS). Это именно расширение для CSS без «искажения» синтаксиса — то есть любой валидный CSS документ является и полностью валидным SCSS документом. В посте я проведу сравнение с уже существующими препроцессорами такими как Sass и Less. О которых уже писалось на хабре: Sass, Less. Но та информация немного устарела: в частности изменился синтаксис Sass.

Список того о чем мечтали CSS дизайнеры, но боялись говорить в слух.
Total votes 54: ↑43 and ↓11 +32
Views 54K
Comments 37

Заметка ленивого верстальщика о SCSS и Compass Framework

Website development *
Sandbox
Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.

Не так давно я начал изучать Ruby on Rails 3 и нашел очень интересный плагин для него: Compass. По сути, этот CSS-фреймворк независим от Rails, им можно пользоваться и в других типах проектов.

Расскажу-ка я вам, как Compass облегчил мою жизнь.
Читать дальше →
Total votes 78: ↑73 and ↓5 +68
Views 31K
Comments 60

Краткий обзор отличий LESS от SASS

Website development *
Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.

Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.

Читать дальше →
Total votes 47: ↑37 and ↓10 +27
Views 61K
Comments 48

SCSS — немного практики, часть I

CSS *

image


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


Что такое SCSS


SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Читать дальше →
Total votes 45: ↑38 and ↓7 +31
Views 496K
Comments 24

SASS против LESS

Website development *CSS *HTML *
Translation
«Какой препроцессорный язык стоит использовать для CSS?» является очень актуальным вопросом в последнее время. Несколько раз меня спрашивали об этом лично, и казалось бы, каждые пару дней этот вопрос поднимался в сети. Очень приятно что беседа перешла из темы о плюсах и минусах препроцессинга к обсуждению какой же язык является лучшим. За дело!

Если быть кратким: SASS.

Немного развернутый ответ: SASS лучше по всем пунктам, но если вы уже счастливы с LESS — это круто, по крайней мере вы уже упростили себе жизнь используя препроцессинг.

Развернутый ответ: ниже
Читать дальше →
Total votes 62: ↑50 and ↓12 +38
Views 179K
Comments 72

Python-биндинги для libsass. Эксклюзивно для Хабра

Website development *CSS *Python *
В топике SASS против LESS хабраюзер morr упомянул интересный libsass — реализацию SASS на C++
На минувшем Railsconf 2012 был отдельный доклад про sass, где анонсировали фичи над которыми сейчас ведётся работа, и которые появятся в следующем релизе:
1. libsass — написанный на C компилятор sass в css, работающий быстрее на порядки нынешнего скрипта на руби. Для крупных проектов это очень существенно — большие объёмы стилей при деплое компилируются ну очень долго(полминуты и дольше). Так же это позволит написать биндинги для libsass к другим языкам, что означает более простое встраивание sass во фрейморки питона/ноды/дотнета/пхп.



А я взял и сделал для libsass биндинги для Python. Встречайте, любите и пользуйтесь python-sass

Total votes 44: ↑38 and ↓6 +32
Views 3.6K
Comments 28

Padrino для frontend разработчика

Website development *Ruby *
Видимо, только второй пост на хабре с участием Padrino за 2 года ;)



Используйте HAML для генерации HTML



Используйте SASS для генерации CSS



Используйте Coffee Script для генерации JS



Скачайте шаблонное приложение, установите инструментарий и начните разработку немедленно.

10 минут и все работает даже под Windows.

Ага! Вот чем я займусь в выходные!
Total votes 26: ↑16 and ↓10 +6
Views 4.5K
Comments 40

Sass для ASP.NET без Python на libsass

Website development *CSS *.NET *
Давно мучился отсутствием реализации Sass (что-то вроде препроцессора для CSS) для .Net.
Тут на Хабре пробегала информация о реализации компилятора Sass на C++ — libsass, быстрый и эффективный. Товарищ rushman сделал байндинг для Python, а я сделал для .Net.
Читать дальше →
Total votes 22: ↑19 and ↓3 +16
Views 3K
Comments 10

Вышел WebStorm 5 — станьте еще продуктивнее

JetBrains corporate blog JavaScript *
Картинка стоит тысячи слов — мы же предлагаем взлянуть на скринкаст:



Засветились:
  • LiveEdit — обновляет фрагменты страницы без перезагрузки, включая javascript
  • ZenCoding — мгновенная генерация сложных конструкций из соответствующих CSS-селекторов
  • AceJump — навигация по видимому участку кода

Разумеется мы умеем гораздо больше
Загрузить последнюю версию для вашей платформы
Total votes 87: ↑80 and ↓7 +73
Views 28K
Comments 79

Вышел PhpStorm 5 — еще больше умных полезных штук

JetBrains corporate blog Website development *PHP *
phpstorm

Продолжая делать упор на анализ и качество кода, мы наконец добрались и до фреймворков. Работа над IDE уже продолжается, а прямо сейчас мы предлагаем попробовать:

  • Новый анализатор типов — меньше неверных предупреждений без дополнительных аннотаций
  • Больше предупреждений о runtime errors прямо в редакторе
  • Больше подсветки не используемого кода и конструкций
  • Панель сущностей MVC-фреймворков — пока Symfony 2 и yii, остальные по мере готовности
  • Прозрачная поддержка PHAR
  • Поддержка callbacks в литералах (call_user_func, etc) — включая поиск использования и рефакторинг
  • Серезные улучшения консоли БД — для всех баз данных — рефакторинг, экспорт, процедуры
  • Форматирование кода по стандартам PSR1/2, Symfony, Drupal
  • LiveEdit — редактирование PHP/HTML/CSS/JS видно в браузере в реальном времени без перезагрузки страницы
  • Серьезно улучшена поддержка CSS/SASS/SCSS/LESS — анализ, дополнение, форматирование
  • Поддержка шаблонов Jade

Читать дальше →
Total votes 74: ↑69 and ↓5 +64
Views 32K
Comments 238

SCSS: пара полезных техник

Website development *CSS *
Sandbox
CSS – препроцессоры все популярнее среди веб – разработчиков. Почему?
Потому что они позволяют:
  • Сэкономить время
  • Применять принцип DRY в CSS
  • Сделать код более читаемым

На данный момент наиболее популярными препроцессорами являются SASS и LESS.

О том, почему SASS лучше LESS, можно почитать в этой статье. Лучше ли — вопрос спорный, однако, я перешел с LESS на SCSS хотя бы потому, что тут есть:
  • Циклы
  • Условные операторы
  • Списки

О сравнении синтаксиса SCSS и SASS, можно почитать в этой статье. Лично я выбрал SCSS по причине обратной совместимости с CSS и, как следствие, возможности быстро включать старые CSS файлы в проект посредством директивы import. Для этого им надо изменить расширение на .scss.

Об основах SCSS уже писали faiwer1 и AbleBoy2, здесь же я хочу описать пару техник, которые мне действительно помогли.
Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Views 30K
Comments 21

Определение поддержки background-position-XY

Website development *jQuery *
Недавно встала задача определить поддержку background-position-x(y) в браузере.
Для чего? Для того, чтобы применить css transition там,
где браузер не поддерживает анимацию background по определенной оси.

Вот сниппет для jQuery:
(function($){
    // Проверяем поддержку background-position-x
    var bgx = (function(el){
        return typeof el.css('backgroundPositionX') !== 'undefined';
    }(/* Ваш элемент */));
}(jQuery));

Читать дальше →
Total votes 9: ↑5 and ↓4 +1
Views 5.4K
Comments 4

Фронт-энд Островка изнутри

Ostrovok.ru corporate blog Website development *JavaScript *
Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.
Читать дальше →
Total votes 79: ↑61 and ↓18 +43
Views 26K
Comments 62

Вышел Bundle Transformer 1.6.10

Client optimization *.NET *ASP *
Логотипы библиотек Bundle Transformer, в которые были внесены изменения в версии 1.6.10
Новая версия Bundle Transformer характеризуется следующими изменениями: большая часть сборок теперь подписана; в ядре, были исправлены ошибки, возникавшие при обработке путей; были обновлены некоторые модули (BundleTransformer.SassAndScss, BundleTransformer.CoffeeScript, BundleTransformer.TypeScript, BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.UglifyJs, BundleTransformer.Csso и BundleTransformer.WG) и создана новая версия демонстрационного сайта ASP.NET Web Pages.

Рассмотрим основные нововведения данной версии:
Читать дальше →
Total votes 9: ↑6 and ↓3 +3
Views 4.7K
Comments 4

SCSS и кросплатформенный градиент (ну почти)

Website development *CSS *
Sandbox
Всем доброго времени суток.
Хочу поделиться одной наработкой с использованием SCSS. Нужно было мне (кстати не однократно, но как то руки не доходили сделать как надо) сделать универсальную генерацию градиента. Универсальную, это возможность задавать несколько градиентов подряд, и должны были поддерживаться префиксы для браузеров (делать так делать).
Поиск подобного рода решения по хабру и гуглу результата не дал, поэтому пришлось справляться своими силами. Далее подробнее по делу.
Читать дальше →
Total votes 5: ↑3 and ↓2 +1
Views 4.4K
Comments 9

Курс по Sass на Code School и мировозрение после него на примере (смотрим на .less, .scss и .sass)

CSS *Programming *
Tutorial
Recovery mode
В сентябре я прошел курс на Code School по Sass, называется Assembling Sass и вел его Nick Walsh, гуру в css и sass. Курс полностью бесплатный. Пройдя его я задумался на чем бы себя испробовать. Мой друг недавно написал на Less «Punches» — имея background и foreground и наложением сверху CSS мы получаем следующий эффект «дырок». (Если интересно запустить этот код могу дать ссылку на github).


image
Читать дальше →
Total votes 22: ↑8 and ↓14 -6
Views 12K
Comments 9

Prepros: open-source компилятор файлов для front-end разработки

Website development *CSS *JavaScript *


Здравствуйте, уважаемые Хабражители.

Данная статья посвящена фантастическому, на мой взгляд, open-source приложению Prepros, которое может облегчить рабочий процесс многим фронт-энд разработчикам.

Prepros умеет компилировать файлы LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml и Markdown, минифицировать и объединять в один JavaScript-файлы и это еще не все.

Под катом — более подробный обзор приложения.

Читать дальше →
Total votes 49: ↑41 and ↓8 +33
Views 50K
Comments 23

Shade: длинные тени трендового плоского дизайна на CSS

Website development *CSS *HTML *
Доброго времени суток уважаемые хабражители. Недавно я нашел очень интересный пример на SCSS и решил реализовать его на LESS да я люблю LESS больше:

lessshade
Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.

 .shade(@type, @color, @depth, @angle, @long, @fade);

  • type: значения box/text — box-shadow/text-shadow
  • color: цвет тени
  • depth:длина тени
  • angle: угол наклона
  • long: boolean, по умолчанию true — длинные Flat тени
  • fade: boolean, по умолчания false — затухание

Читать дальше →
Total votes 34: ↑29 and ↓5 +24
Views 18K
Comments 13

Несколько советов less-разработчику

Website development *CSS *
Tutorial
Зачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.
Я хочу писать правильный код!
Total votes 22: ↑16 and ↓6 +10
Views 20K
Comments 14

Shortest Common Superstring Problem

Java *Algorithms *
Sandbox
Проблема кратчайшей общей надстроки формулируется следующим образом: найти кратчайшую строку, такую, что каждая строка из заданного набора являлась бы её подстрокой. Эта проблема имеет место как в биоинформатике (задача сборки генома в общем случае) так и в сжатии данных (вместо данных хранить их надстроку и последовательность пар, вида (индекс вхождения, длина)).

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

Осторожно, 4 мегабайта!
Читать дальше →
Total votes 32: ↑30 and ↓2 +28
Views 10K
Comments 5