Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 60
О! Как раз то, о чём я писала! Это прекрасно!
Синтаксис интересный, но что-то бегло просмотрел доки и не понял на каком уровне он работает, если, например, использовать его с php-фреймворком. Сам обрабатывает запросы сервера и транслирует на лету, трансляцию надо запускать ручками, ещё как-то?
Если использовать не с руби-фреймворком, то компилировать SCSS в CSS придется ручками:
$ compass compile
$ compass compile
Сотрите на code.google.com/p/phamlp/
*Смотрите
О, благодарю, пробую разобраться.
что то он ничего толком не компилирует
У этой реализации есть один большой недостаток — автор не особо открыт к общению.
Имеются несколько багов, которые обнаружить довольно сложно, например: code.google.com/p/phamlp/issues/detail?id=54
Я-бы им рискнул пользоваться только если он будет генерировать абсолютно идентичный вывод с compass (Sass)
Имеются несколько багов, которые обнаружить довольно сложно, например: code.google.com/p/phamlp/issues/detail?id=54
Я-бы им рискнул пользоваться только если он будет генерировать абсолютно идентичный вывод с compass (Sass)
За что ж все так верстку не любят? :)
Наверное из-за того что некоторые браузеры любят воспринимать результат верстания по-своему, а не так как запланировал автор.
А также потому что 80% верстки в разных проектах повторяется, а копипастить не получится
Просто я, как дизайнер, сначала рисую макет в ФШ, а потом мне же его еще и, как верстальщику, заново в html «рисовать» надо :) А людям не очень нравится повторяться. А если уж требуется, то хотелось бы это сделать по-быстрее.
Вопрос к знающим людям. Есть ли возможность включения подобного функционала в сам CSS?
Да да, это замечательная штука. Для .NET, кому интересно, тоже есть решение: dotlesscss.org
Так и не понял что куда прописать в проект чтобы файл .less при компиляции превращался в .css
В reference добавил dll.
В web.config добавил
В коде писал и
бесполезно. (
В reference добавил dll.
В web.config добавил
<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*" />
В коде писал и
<link href="~/Content/Site.less" rel="stylesheet" type="text/css" />и
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
бесполезно. (
Почти все верно. Надо подключать в html .less файл. А серверу надо сперва указать, что он должен *.less расширение как-то обрабатывать. Этим занимаются ISAPI-модули/расширения.
iis6: Идем в настройки сервера -> выбираем закладку, где физический путь к приложению, там ниже будет кнопка дополнительно -> добавляем ISAPI расширение: .less, а путь к выполняемому файлу тот же что и, к примеру, у расширения .ascx.
Галочка возле "Скриптовый модуль", а галочка возле "Проверять или файл существует" снята. И теперь должен этот .less файл грузиться в браузере, так как в web.config вы уже прописали нужный handler.
iis7(integrated mode): Все проще — в web.config добавляем —
Ну и потом сново вступает в действие указаный handler и возвращает нам обработаный .less файл.
У движка этого есть еще одна классная фича — он умеет минимизировать css код. Удачи в использовании!
iis6: Идем в настройки сервера -> выбираем закладку, где физический путь к приложению, там ниже будет кнопка дополнительно -> добавляем ISAPI расширение: .less, а путь к выполняемому файлу тот же что и, к примеру, у расширения .ascx.
Галочка возле "Скриптовый модуль", а галочка возле "Проверять или файл существует" снята. И теперь должен этот .less файл грузиться в браузере, так как в web.config вы уже прописали нужный handler.
iis7(integrated mode): Все проще — в web.config добавляем —
<handlers>
<add name="LessModule" path="*.less" verb="*" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Read" preCondition="classicMode,runtimeVersionv2.0,bitness32" />Ну и потом сново вступает в действие указаный handler и возвращает нам обработаный .less файл.
У движка этого есть еще одна классная фича — он умеет минимизировать css код. Удачи в использовании!
Автору, спасибо за упоминание.
Оба Framework-а поддерживаются в Drupal в виде модулей: sass, compass
Оба Framework-а поддерживаются в Drupal в виде модулей: sass, compass
А так что бы отдельно — есть библиотечки для компиляции?
Посмотрите github.com/bzick/php-sass
Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.
Вот вам самое интересное решение — наймите квалифицированного верстальщика.
Квалифицированного — это фрилансера с портфелем?
Не ради смеха спрашиваю, мне действительно интересно, где это можно пройти квалификацию?
Не ради смеха спрашиваю, мне действительно интересно, где это можно пройти квалификацию?
мне, как верстальщику, интересно:
1) насколько чистый код на выходе получается (нету ли там неиспользуемых стилей, как это часто бывает при использовании фреймворков)
2) я не сильно разбираюсь, поэтому объясните сам процесс компиляции, он происходит один раз и выкладывается на сервак, например, или каждый раз стили компиляться заново серваком?
Я бы поковырялся в документации, но нет времени((
1) насколько чистый код на выходе получается (нету ли там неиспользуемых стилей, как это часто бывает при использовании фреймворков)
2) я не сильно разбираюсь, поэтому объясните сам процесс компиляции, он происходит один раз и выкладывается на сервак, например, или каждый раз стили компиляться заново серваком?
Я бы поковырялся в документации, но нет времени((
1. ну как сказать. если использовать blueprint/semantic то довольно много повторяющихся стилей в разных селекторах, но никто не мешает после компилирования прогнать через оптимизатор (уменьшает раза в два иногда и больше)
2. скомпилировал — выложил — поправил — скомпилировал — выложил (надоело, написал скрипт, который сам все это делает :) )
2. скомпилировал — выложил — поправил — скомпилировал — выложил (надоело, написал скрипт, который сам все это делает :) )
спасибо
1. ощущаю себя отставшим от жизни. это сейчас модно — сначала использовать излишне навороченные фреймворки, а потом прогонять через оптимизатор?
последние проекты верстал руками без фреймворков — почувствовал себя гораздо свободнее.
2. компилировать исходники для интерпретируемых (html, css) данных — that's kinky! ;)
последние проекты верстал руками без фреймворков — почувствовал себя гораздо свободнее.
2. компилировать исходники для интерпретируемых (html, css) данных — that's kinky! ;)
1. руками оно конечно чище выходит. но с фреймворками проще как-то. особенно всякие красивости. нужна кнопка чтобы всякие там ховеры и прочее сразу — @include button-button(). все. и там вещи уже оттестированы и точно будут везде работать. так что тут спорный вопрос что лучше. если со стороны выходного кода то ручной код (да и то не факт). а если со стороны скорости разработки то фреймворк.
2. ну haml/sass приятнее пользовать, кто виновать что браузер их не понимает :) вот и приходиться компилировать.
2. ну haml/sass приятнее пользовать, кто виновать что браузер их не понимает :) вот и приходиться компилировать.
1. Это стало модно, как появились языки высокого уровня
2. Программы на ассемблере/С/Java/C#/… никогда не компилировали? А ведь это тоже самое — компилируете исходники для интерпретируемых данных (машкоды, байткоды)
2. Программы на ассемблере/С/Java/C#/… никогда не компилировали? А ведь это тоже самое — компилируете исходники для интерпретируемых данных (машкоды, байткоды)
Насчет второго: с третьей версии можно просто:
sass --watch и забить.
Этот язык дает верстальщику 4 сверхспособности:… «Вложение»… и «Наследование селекторов»facepalm.jpg
ооо
тоже версстаю сайты) такого не хватает действительно, особенно переменных
тоже версстаю сайты) такого не хватает действительно, особенно переменных
Было бы прикольно, если бы стандарт CSS расширялся бы в эту же сторону. :)
Чем-то, кстати, напоминает, запланированные (но так и не реализованные фактически никем) изменения в стандарте.
Например, CSS variables:
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
Чем-то, кстати, напоминает, запланированные (но так и не реализованные фактически никем) изменения в стандарте.
Например, CSS variables:
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
1. ваш редактор не поддерживает замену подстроки во всём файле? о_0"
2. ага, свойства вперемешку с селекторами — оочень улучшает читабельность х) у меня редкий селектор имеет больше 2 членов.
3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
итого — код, который легко писать, но тяжело поддерживать. для «под ключ» конечно сойдёт ._.
2. ага, свойства вперемешку с селекторами — оочень улучшает читабельность х) у меня редкий селектор имеет больше 2 членов.
3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
итого — код, который легко писать, но тяжело поддерживать. для «под ключ» конечно сойдёт ._.
1. Ситуация — сначала какие-то элементы были одного цыета, потом решили часть элементов сделать потемнее, а часть оставить как есть… писать регулярку, разбирающую селекторы, причём со всеми особенностями синтаксиса css?
1. Замену подстроки врядли назовешь «гибким» решением.
2. Лично мне было очень удобно пользоваться вложениями SCSS, опять же потому, что не люблю повторяться в коде :)
3. примеси для градиентов есть в Compass'е — значит, все реализуемо ;)
4. Если честно, то наследование я сам крайне редко использую. Для этого надо хорошо понимать, зачем оно нужно именно в этом месте. Пример, приведенный мною в тексте, вполне-таки себе показательный.
2. Лично мне было очень удобно пользоваться вложениями SCSS, опять же потому, что не люблю повторяться в коде :)
3. примеси для градиентов есть в Compass'е — значит, все реализуемо ;)
4. Если честно, то наследование я сам крайне редко использую. Для этого надо хорошо понимать, зачем оно нужно именно в этом месте. Пример, приведенный мною в тексте, вполне-таки себе показательный.
1. а что в нём не гибкого?
2. лучше каскад уменьши, а не городи селекторы на всю строку
3. ага, умеет только вертикальный, горизонтальный и радиальный градиенты и не работает ни в опере, ни в ие.
4. этот показательный пример гораздо лучше сделать так:
.notification {
border: 1px solid;
margin: 0 auto;
}
.error.notification {
background-color: #f11;
color: #fff;
}
и будет работать без всяких препроцессоров
2. лучше каскад уменьши, а не городи селекторы на всю строку
3. ага, умеет только вертикальный, горизонтальный и радиальный градиенты и не работает ни в опере, ни в ие.
4. этот показательный пример гораздо лучше сделать так:
.notification {
border: 1px solid;
margin: 0 auto;
}
.error.notification {
background-color: #f11;
color: #fff;
}
и будет работать без всяких препроцессоров
у тебя есть какое-нибудь универсальное решение для градиентов на цссе, которое работает в опере и ие? если да, то яви его миру, а то народ как-то не в курсе.
есть, но оно пока не отчуждаемо от фреймворка. можешь поковырять исходники если интересно:
code.google.com/p/ninjin/source/browse/web-components/wc/wc-button/wc-button.css
ninjin.freeoda.com/web-components/wc.external/wc-button/wc-button.html
code.google.com/p/ninjin/source/browse/web-components/wc/wc-button/wc-button.css
ninjin.freeoda.com/web-components/wc.external/wc-button/wc-button.html
> 3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
compass-style.org/docs/reference/compass/css3/gradient/
> 4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
обычно как раз и нужно, чтобы все дочерние селекторы изменялись при изменении селектора предка. иначе им нет смысла быть дочерними. у тебя есть возможность поменять один селектор предка и получить все дочерние подхватившими это изменение, а не менять пятьсот селекторов руками
compass-style.org/docs/reference/compass/css3/gradient/
> 4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
обычно как раз и нужно, чтобы все дочерние селекторы изменялись при изменении селектора предка. иначе им нет смысла быть дочерними. у тебя есть возможность поменять один селектор предка и получить все дочерние подхватившими это изменение, а не менять пятьсот селекторов руками
Градиент в compass тоже есть, только он для Webkit, Mozilla
В IE есть возможность поддержки с помощью фильтра, но это линейный градиент с 2-мя точками (начала и конца) с возможностью горизонтальной и вертикальной ориентации.
Кому интересно, вот моя реализация простого линейного градиента pastebin.com/sTD9CQLR
В довесок потребуется функция на Ruby, которая будет генерировать запись RGBA цвета в принятой IE форме pastebin.com/87vUAd0Z
Только вот такой градиент не советую ставить в качестве фона для элемента внутри которого будет текст (лучше спозиционировать элемент с градиентом «под» элемент с текстом), т.к. ClearType будет принудительно отключен.
Можно сделать более продвинутую реализацию с использованием SVG и VML. Тогда появится возможность создания гораздо более сложных градиентов в IE и Opera, но в IE прийдётся использовать behaviour.
P.S. IE строит полупрозрачные градиенты не так, как это принято делать. Для примера rgba(255, 0, 0, 1) — rgba(0, 255, 0, 0). Этот градиент меняя прозрачность должен также менять цвет на зелёный, в ie он просто меняет прозрачность, а на цветовую составляющую забивает.
В IE есть возможность поддержки с помощью фильтра, но это линейный градиент с 2-мя точками (начала и конца) с возможностью горизонтальной и вертикальной ориентации.
Кому интересно, вот моя реализация простого линейного градиента pastebin.com/sTD9CQLR
В довесок потребуется функция на Ruby, которая будет генерировать запись RGBA цвета в принятой IE форме pastebin.com/87vUAd0Z
Только вот такой градиент не советую ставить в качестве фона для элемента внутри которого будет текст (лучше спозиционировать элемент с градиентом «под» элемент с текстом), т.к. ClearType будет принудительно отключен.
Можно сделать более продвинутую реализацию с использованием SVG и VML. Тогда появится возможность создания гораздо более сложных градиентов в IE и Opera, но в IE прийдётся использовать behaviour.
P.S. IE строит полупрозрачные градиенты не так, как это принято делать. Для примера rgba(255, 0, 0, 1) — rgba(0, 255, 0, 0). Этот градиент меняя прозрачность должен также менять цвет на зелёный, в ie он просто меняет прозрачность, а на цветовую составляющую забивает.
Фреймворк может и хороший, но проблемы вы описываете странные…
Вы не пробовали использовать общие классы для таких элементов?
Представим ситуацию: вы верстаете страничку, на которой цвет рамки блоков и цвет ссылок должен быть одинаковый
А еще ведь наверняка приходится писать частенько в разных селекторах одни и те же правила, да?
Вы не пробовали использовать общие классы для таких элементов?
Не нравится мне все это.
Верстать — это интересно, каждый раз что-то новое, несмотря на множество похожестей.
Тут все свезено как-то… Ближе к программированию что ли, такой подход некрасив, непрозрачен для не-программистов, хотя бы взглянуть на конструкцию с вложенными фигурными скобками…
Откровенно говоря, уже достали эти все «упрощаторы» верстки — сетки, бесконечные генераторы layout-ов… Все это — для ленивых программистов, и не совсем для профессионалов, они заставляют подстраивать свой coding style под них, иначе все развалится и разлезется, истинно подход программеров
Единственно нужная вещь здесь — css variables, пока оно нигде не реализовано, к сожалению
Верстать — это интересно, каждый раз что-то новое, несмотря на множество похожестей.
Тут все свезено как-то… Ближе к программированию что ли, такой подход некрасив, непрозрачен для не-программистов, хотя бы взглянуть на конструкцию с вложенными фигурными скобками…
Откровенно говоря, уже достали эти все «упрощаторы» верстки — сетки, бесконечные генераторы layout-ов… Все это — для ленивых программистов, и не совсем для профессионалов, они заставляют подстраивать свой coding style под них, иначе все развалится и разлезется, истинно подход программеров
Единственно нужная вещь здесь — css variables, пока оно нигде не реализовано, к сожалению
Блин у меня у одного вопрос возникает, а как ориентироваться в случае, если я использую Фаербаг?
За время работы верстальщиком у меня сложилось такое мнение что Фреймверки для верстки это зло, потому что хорошая верстка всегда должна подстраиваться под выводимый контент, а в случае с фреймверком происходит диаметрально противоположное.
По поводу ускорения написания кода. В подавляющем большинстве случаев время затраченное на проектирование структуры, на порядок, меньше времени на написания самого кода, особенно если принимать во внимание существование ZenCoding и темплейтов.
По поводу ускорения написания кода. В подавляющем большинстве случаев время затраченное на проектирование структуры, на порядок, меньше времени на написания самого кода, особенно если принимать во внимание существование ZenCoding и темплейтов.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Заметка ленивого верстальщика о SCSS и Compass Framework