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

[@lolmaus]

Спасибо за прекрасную статью.

Код на SCSS гораздо более читаем. :) Не хотите выпустить Compass Extension?

[@ilusha_sergeevich]

Спасибо, рад быть полезным. То, что на SCSS более читаем — не спорю. Про Compass — врядли.

[@lolmaus]

А оно, собственно, уже есть: github.com/Team-Sass/sassytextshadow И позволяет творить совершенно адские вещи.

[@ilusha_sergeevich]

Мне кажется это уже перебор…

[@lolmaus]

Если ограничиться однородной тенью, уходящей в правый-нижний угол, можно выкинуть всю математику. Код сводится к нескольким понятным строчкам (пример на SASS):

@mixin long-shade($color: red, $length: 100)            
  $shadow: () 
  
  @for $i from 1 through $length
    $shadow: $shadow, $i*1px $i*1px 0 $color
    
  text-shadow: $shadow

Наклепал демо: sassbin.com/gist/6522344/

[@ssh0]

Тоже недавно эксперементировал с тенями, пробовал сделать мягкую тень (sass) codepen.io/ssh/pen/FgeCx

[@SerafimArts]

Небольшой оффтоп:

Я раньше тоже любил Less, почему? Ну просто «потому» — это почти аналогично «да я люблю Less больше». А потом одним вечерним днём меня под пытками заставили мне захотелось изучить что-то другое. Честно говоря — не жалею. Есть множество подобных примеров — Scss vs Less, Less vs Css, Coffee vs JS и даже «процедурное программирование» vs. ООП. Что бы понять что лучше — надо использовать и то, и другое, хотя бы в соотношении 2 (то, что новое) к 3 (то, что любимое).

Всё это я веду к тому, что попробуйте всё же Scss чуть более чем «просто посмотреть», пусть в нём дикий синтаксис импорта примесей (безусловно в Less он лучше), но по моему личному мнению, да и думаю по мнению большинства участников, всё же Scss зачастую более элегантный и мощный в данном подспорье. Взять хотя бы Compass, на Less такого фреймворка не реализуешь.

[@ilusha_sergeevich]

Взять хотя бы Compass, на Less такого фреймворка не реализуешь.

— я готов поспорить… Весомый аргумент через несколько месяцев будет в ленте хабра… В LESS круть это JavaScript.

[@SerafimArts]

ну вот пример:
@include transition(transform .3s ease);

конвертируется в:
-webkit-transition:-webkit-transform 0.3s ease; -moz-transition:-moz-transform 0.3s ease; -o-transition:-o-transform 0.3s ease; transition:background 0.3s ease

в заначке у меня ещё функция преобразования градусов в «то-что-понимает-ИЕ» в его filter: progid:DXImageTransform.Microsoft.Matrix

[@SerafimArts]

А на счёт JS — это очень плохо. Подобный DSL, критичный для всего ресурса, стоит обрабатывать на сервере, а никак не на клиенте.

[@lolmaus]

LESS, как и все его аналоги, для продакшна прекомпилируется в статичный CSS. На клиенте LESS используется только в девелопменте.

[@ilusha_sergeevich]

Да я вкурсе… Знаю про Compass, а про JS на клиенте и речи не было…

[@SerafimArts]

Одна строка на html, вставляющий JS скрипт, против одной строки на PHP\Ruby\etc, делающей всё то же самое на сервере. В чём тогда «круть»? Ну разве что можно не писать rails c -s 8080 или php -S localhost:8080 дабы запустить сервер =) Тут да — несомненный плюс.