Комментарии 60
О! Как раз то, о чём я писала! Это прекрасно!
+4
Синтаксис интересный, но что-то бегло просмотрел доки и не понял на каком уровне он работает, если, например, использовать его с php-фреймворком. Сам обрабатывает запросы сервера и транслирует на лету, трансляцию надо запускать ручками, ещё как-то?
0
Если использовать не с руби-фреймворком, то компилировать SCSS в CSS придется ручками:
$ compass compile
$ compass compile
0
Сотрите на code.google.com/p/phamlp/
+6
*Смотрите
+1
О, благодарю, пробую разобраться.
0
что то он ничего толком не компилирует
0
У этой реализации есть один большой недостаток — автор не особо открыт к общению.
Имеются несколько багов, которые обнаружить довольно сложно, например: code.google.com/p/phamlp/issues/detail?id=54
Я-бы им рискнул пользоваться только если он будет генерировать абсолютно идентичный вывод с compass (Sass)
Имеются несколько багов, которые обнаружить довольно сложно, например: code.google.com/p/phamlp/issues/detail?id=54
Я-бы им рискнул пользоваться только если он будет генерировать абсолютно идентичный вывод с compass (Sass)
0
За что ж все так верстку не любят? :)
+3
Наверное из-за того что некоторые браузеры любят воспринимать результат верстания по-своему, а не так как запланировал автор.
0
А также потому что 80% верстки в разных проектах повторяется, а копипастить не получится
+3
Просто я, как дизайнер, сначала рисую макет в ФШ, а потом мне же его еще и, как верстальщику, заново в html «рисовать» надо :) А людям не очень нравится повторяться. А если уж требуется, то хотелось бы это сделать по-быстрее.
0
Вопрос к знающим людям. Есть ли возможность включения подобного функционала в сам CSS?
0
Да да, это замечательная штука. Для .NET, кому интересно, тоже есть решение: dotlesscss.org
0
Так и не понял что куда прописать в проект чтобы файл .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" />
бесполезно. (
0
Почти все верно. Надо подключать в 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 код. Удачи в использовании!
0
Автору, спасибо за упоминание.
Оба Framework-а поддерживаются в Drupal в виде модулей: sass, compass
Оба Framework-а поддерживаются в Drupal в виде модулей: sass, compass
+2
А так что бы отдельно — есть библиотечки для компиляции?
0
Посмотрите github.com/bzick/php-sass
0
Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.
Вот вам самое интересное решение — наймите квалифицированного верстальщика.
-3
Квалифицированного — это фрилансера с портфелем?
Не ради смеха спрашиваю, мне действительно интересно, где это можно пройти квалификацию?
Не ради смеха спрашиваю, мне действительно интересно, где это можно пройти квалификацию?
0
мне, как верстальщику, интересно:
1) насколько чистый код на выходе получается (нету ли там неиспользуемых стилей, как это часто бывает при использовании фреймворков)
2) я не сильно разбираюсь, поэтому объясните сам процесс компиляции, он происходит один раз и выкладывается на сервак, например, или каждый раз стили компиляться заново серваком?
Я бы поковырялся в документации, но нет времени((
1) насколько чистый код на выходе получается (нету ли там неиспользуемых стилей, как это часто бывает при использовании фреймворков)
2) я не сильно разбираюсь, поэтому объясните сам процесс компиляции, он происходит один раз и выкладывается на сервак, например, или каждый раз стили компиляться заново серваком?
Я бы поковырялся в документации, но нет времени((
+2
1. ну как сказать. если использовать blueprint/semantic то довольно много повторяющихся стилей в разных селекторах, но никто не мешает после компилирования прогнать через оптимизатор (уменьшает раза в два иногда и больше)
2. скомпилировал — выложил — поправил — скомпилировал — выложил (надоело, написал скрипт, который сам все это делает :) )
2. скомпилировал — выложил — поправил — скомпилировал — выложил (надоело, написал скрипт, который сам все это делает :) )
+3
спасибо
0
1. ощущаю себя отставшим от жизни. это сейчас модно — сначала использовать излишне навороченные фреймворки, а потом прогонять через оптимизатор?
последние проекты верстал руками без фреймворков — почувствовал себя гораздо свободнее.
2. компилировать исходники для интерпретируемых (html, css) данных — that's kinky! ;)
последние проекты верстал руками без фреймворков — почувствовал себя гораздо свободнее.
2. компилировать исходники для интерпретируемых (html, css) данных — that's kinky! ;)
0
1. руками оно конечно чище выходит. но с фреймворками проще как-то. особенно всякие красивости. нужна кнопка чтобы всякие там ховеры и прочее сразу — @include button-button(). все. и там вещи уже оттестированы и точно будут везде работать. так что тут спорный вопрос что лучше. если со стороны выходного кода то ручной код (да и то не факт). а если со стороны скорости разработки то фреймворк.
2. ну haml/sass приятнее пользовать, кто виновать что браузер их не понимает :) вот и приходиться компилировать.
2. ну haml/sass приятнее пользовать, кто виновать что браузер их не понимает :) вот и приходиться компилировать.
0
1. Это стало модно, как появились языки высокого уровня
2. Программы на ассемблере/С/Java/C#/… никогда не компилировали? А ведь это тоже самое — компилируете исходники для интерпретируемых данных (машкоды, байткоды)
2. Программы на ассемблере/С/Java/C#/… никогда не компилировали? А ведь это тоже самое — компилируете исходники для интерпретируемых данных (машкоды, байткоды)
0
Насчет второго: с третьей версии можно просто:
sass --watch
и забить.0
Этот язык дает верстальщику 4 сверхспособности:… «Вложение»… и «Наследование селекторов»facepalm.jpg
+5
ооо
тоже версстаю сайты) такого не хватает действительно, особенно переменных
тоже версстаю сайты) такого не хватает действительно, особенно переменных
0
Было бы прикольно, если бы стандарт CSS расширялся бы в эту же сторону. :)
Чем-то, кстати, напоминает, запланированные (но так и не реализованные фактически никем) изменения в стандарте.
Например, CSS variables:
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
Чем-то, кстати, напоминает, запланированные (но так и не реализованные фактически никем) изменения в стандарте.
Например, CSS variables:
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
0
1. ваш редактор не поддерживает замену подстроки во всём файле? о_0"
2. ага, свойства вперемешку с селекторами — оочень улучшает читабельность х) у меня редкий селектор имеет больше 2 членов.
3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
итого — код, который легко писать, но тяжело поддерживать. для «под ключ» конечно сойдёт ._.
2. ага, свойства вперемешку с селекторами — оочень улучшает читабельность х) у меня редкий селектор имеет больше 2 членов.
3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
итого — код, который легко писать, но тяжело поддерживать. для «под ключ» конечно сойдёт ._.
+2
1. Ситуация — сначала какие-то элементы были одного цыета, потом решили часть элементов сделать потемнее, а часть оставить как есть… писать регулярку, разбирающую селекторы, причём со всеми особенностями синтаксиса css?
+1
1. Замену подстроки врядли назовешь «гибким» решением.
2. Лично мне было очень удобно пользоваться вложениями SCSS, опять же потому, что не люблю повторяться в коде :)
3. примеси для градиентов есть в Compass'е — значит, все реализуемо ;)
4. Если честно, то наследование я сам крайне редко использую. Для этого надо хорошо понимать, зачем оно нужно именно в этом месте. Пример, приведенный мною в тексте, вполне-таки себе показательный.
2. Лично мне было очень удобно пользоваться вложениями SCSS, опять же потому, что не люблю повторяться в коде :)
3. примеси для градиентов есть в Compass'е — значит, все реализуемо ;)
4. Если честно, то наследование я сам крайне редко использую. Для этого надо хорошо понимать, зачем оно нужно именно в этом месте. Пример, приведенный мною в тексте, вполне-таки себе показательный.
0
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;
}
и будет работать без всяких препроцессоров
+2
у тебя есть какое-нибудь универсальное решение для градиентов на цссе, которое работает в опере и ие? если да, то яви его миру, а то народ как-то не в курсе.
0
есть, но оно пока не отчуждаемо от фреймворка. можешь поковырять исходники если интересно:
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
0
> 3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
compass-style.org/docs/reference/compass/css3/gradient/
> 4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
обычно как раз и нужно, чтобы все дочерние селекторы изменялись при изменении селектора предка. иначе им нет смысла быть дочерними. у тебя есть возможность поменять один селектор предка и получить все дочерние подхватившими это изменение, а не менять пятьсот селекторов руками
compass-style.org/docs/reference/compass/css3/gradient/
> 4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
обычно как раз и нужно, чтобы все дочерние селекторы изменялись при изменении селектора предка. иначе им нет смысла быть дочерними. у тебя есть возможность поменять один селектор предка и получить все дочерние подхватившими это изменение, а не менять пятьсот селекторов руками
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 он просто меняет прозрачность, а на цветовую составляющую забивает.
0
Фреймворк может и хороший, но проблемы вы описываете странные…
Вы не пробовали использовать общие классы для таких элементов?
Представим ситуацию: вы верстаете страничку, на которой цвет рамки блоков и цвет ссылок должен быть одинаковый
А еще ведь наверняка приходится писать частенько в разных селекторах одни и те же правила, да?
Вы не пробовали использовать общие классы для таких элементов?
+1
Не нравится мне все это.
Верстать — это интересно, каждый раз что-то новое, несмотря на множество похожестей.
Тут все свезено как-то… Ближе к программированию что ли, такой подход некрасив, непрозрачен для не-программистов, хотя бы взглянуть на конструкцию с вложенными фигурными скобками…
Откровенно говоря, уже достали эти все «упрощаторы» верстки — сетки, бесконечные генераторы layout-ов… Все это — для ленивых программистов, и не совсем для профессионалов, они заставляют подстраивать свой coding style под них, иначе все развалится и разлезется, истинно подход программеров
Единственно нужная вещь здесь — css variables, пока оно нигде не реализовано, к сожалению
Верстать — это интересно, каждый раз что-то новое, несмотря на множество похожестей.
Тут все свезено как-то… Ближе к программированию что ли, такой подход некрасив, непрозрачен для не-программистов, хотя бы взглянуть на конструкцию с вложенными фигурными скобками…
Откровенно говоря, уже достали эти все «упрощаторы» верстки — сетки, бесконечные генераторы layout-ов… Все это — для ленивых программистов, и не совсем для профессионалов, они заставляют подстраивать свой coding style под них, иначе все развалится и разлезется, истинно подход программеров
Единственно нужная вещь здесь — css variables, пока оно нигде не реализовано, к сожалению
0
Блин у меня у одного вопрос возникает, а как ориентироваться в случае, если я использую Фаербаг?
0
За время работы верстальщиком у меня сложилось такое мнение что Фреймверки для верстки это зло, потому что хорошая верстка всегда должна подстраиваться под выводимый контент, а в случае с фреймверком происходит диаметрально противоположное.
По поводу ускорения написания кода. В подавляющем большинстве случаев время затраченное на проектирование структуры, на порядок, меньше времени на написания самого кода, особенно если принимать во внимание существование ZenCoding и темплейтов.
По поводу ускорения написания кода. В подавляющем большинстве случаев время затраченное на проектирование структуры, на порядок, меньше времени на написания самого кода, особенно если принимать во внимание существование ZenCoding и темплейтов.
+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Заметка ленивого верстальщика о SCSS и Compass Framework