Комментарии 64
color #a50c5b - 50sat /* decrease saturation by 50% */ background-color #a50c5b + 50lt /* make color lighter by 50 percent */Вот это ад.
+3
да, согласен, чем не устроил синтаксис less: lighten(#a50c5b, 10%)?
+4
Ну вот вы захотите одновременно добавить яркости и подмешать красного цвета и у вас получится конструкция make_redder(lighten(#aaa, 10%), 10%). А так: #aaa + 10lt + 40r. По мне, такие выражения дают больше возможностей. Но, впрочем, для простых операций можно и функции сделать.
0
Ваш синтаксис нарушает правило перестановки слагаемых, поэтому функции предпочтительнее.
+13
А зачем тут коммутативность?
-2
При том можно даже сделать синтаксис следующего вида: «rgb(10, 10, 10) + rgb(10, 10, 19) + red(10) — hue(20) — 20light» и будет тогда та самая коммутативность, не мозолящая глаз. А вообще, я считаю, что это можно рассматривать как неявное преобразование типов в арифметических выражениях в C++. Вы же не задумываетесь, что будет если написать следующее в Си: auto result = 3.5 + 2 + 3 — 2. Хотя на самом деле то компилятор в таком выражении учитывает приоритет двух операндов и приводит один из них к типу с высшем приоритетом. Так и здесь то же самое.
-2
3.5 + 2 + 3 == 3 + 2 + 3.5
Но:
#000 + 10r + 10lt != #000 + 10lt + 10r
Это ещё можно было бы сделать через символ умножения, если бы вы делали корректную операцию изменения яркости, а не линейную, но в текущем состоянии это очень и очень плохое решение.
А ещё у вас
hsla(45, 60%, 20%, 1) + 10lt
не работает. И rgb(1,1,1) + rgb(1,1,1)
тоже.0
#000 + 10r + 10lt != #000 + 10lt + 10r
А что же вы хотели получить? Одинаковый цвет? Вы суммируете каналы из разных форматов цвета, поэтому и получаете разные результаты. Попробуйте сделать эти же операции в той же последовательности на hslpicker.com и вы получите ровно то же самое.
Зато сравните результаты со следующими выражениями: #000 + 10r + 10g и #000 + 10g + 10r. Они будут одинаковыми.
Я так понимаю вам смущает знак "+"?
rgb(1,1,1) + rgb(1,1,1)
Такое и не будет работать, так как я реализовывал только суммирование цвета и какого-либо одного канала.
hsla(45, 60%, 20%, 1) + 10lt
Это глюки библиотеки MrColor, которые я пока что не успел преодолеть.
-1
Название на слух какое-то двусмысленное :) Это было так задумано?
+8
Вы же знаете о существовании Rework, Gonzales и PostCSS? Просто на всякий случай. Даже при написании велосипеда стоит оценивать конкурентов или просто аналогичные существующие решения.
Следующий вопрос по префиксам. Эти примеры говорят о том, что всё плохо:
Несуществующее свойство
Следующий вопрос по префиксам. Эти примеры говорят о том, что всё плохо:
@mixin filter-grayscale(percent)
-webkit-filter: grayscale($percent);
-ms-filter: grayscale($percent);
-o-filter: grayscale($percent);
filter: grayscale($percent);
@mixin border-radius(topleft, topright)
-webkit-border-radius $topleft $topright 4px 5px
border-radius $arguments
html {
-ms-width: 50px !important;
-moz-width: 50px !important;
width: 50px !important;
}
Несуществующее свойство
-o-filter
, -webkit-border-radius
в 2015 году, -ms-width
? Писать префиксы руками сегодня — это очень странное решение. Но то, что вы их выносите в абстракцию, ничего, по сути, не меняет — они всё равно написаны руками. Префиксы нужно добавлять только а) существующие и б) на основе статистики — и это давно уже делает Автопрефиксер. То есть префиксы вообще не нужно писать, нужно только пропускать через него CSS-файл на выходе — он сам знает что нужно, что актуально и как правильно на основе базы Can I use. И конкурировать с этим, даже в рамках велосипеда, я бы не стал.+7
Собственно говоря, во встроенной версии примеси filter-grayscale нет свойства -o-filter. И делал я его как раз на основе базы caniuse. Вы можете проверить это, удалив определение mixin'а из исходного кода. -ms-width был тоже придуман примера ради. А хотя, кто его знает — может быть IE поймет :)
Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер. Для того примеси и нужны. Например, Firefox начал поддерживать фильтры только с 35 версии. И чтобы сделать изображение черно-белым в нем, нужно включать svg-картинку.
Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер. Для того примеси и нужны. Например, Firefox начал поддерживать фильтры только с 35 версии. И чтобы сделать изображение черно-белым в нем, нужно включать svg-картинку.
-3
> Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер
Автопрефиксер в настройках позволяет перечислить нужные браузеры, хоть самые устаревшие
Автопрефиксер в настройках позволяет перечислить нужные браузеры, хоть самые устаревшие
0
Автопрефиксер не добавит вам фоллбэки. Поэтому примеси предпочтительней.
0
а что вы скажите на счет postcss? мне как-то этот подход нравится больше, когда мы просто прописываем пару строчек на JS, который пройдется по всем стилям и, согласно каким-то вашим правилам, добавит кастылей. В итоге у нас чистый код, примиси используются только там где это требуется, и пользователи старых браузеров довольны.
Хотя конечно все это дело вкуса. Но некоторые фэлбэки крайне не удобно делать через миксины, код стилей усложняется и поддерживать подобное бывает тяжко. Потому мне лично нравится именно тот подход, который я описал.
Хотя конечно все это дело вкуса. Но некоторые фэлбэки крайне не удобно делать через миксины, код стилей усложняется и поддерживать подобное бывает тяжко. Потому мне лично нравится именно тот подход, который я описал.
0
Да. Автоматическое проставление браузерных префиксов — вещь удобная. Здесь спору нет. Я хочу это хорошенько обдумать и добавить в мой препроцессор. Но нужно хорошо провести грань между примесями и автопрефиксизацией — когда необходимо использовать одно, а когда другое.
Я даже, честно говоря, не думаю, что нужно усложнять эту функцию правилами типа "> 0.2%" и т.п. Я склоняюсь к тому мнению, что в стилях для сайта нужно учитывать как можно больше браузеров и нужно делать стили совместимыми с большинством из них. Пусть это будет 0.1% посетителей вашего сайта — зато этот 0.1% не закроет вашу страницу после того как увидит что-то несуразное.
Я даже, честно говоря, не думаю, что нужно усложнять эту функцию правилами типа "> 0.2%" и т.п. Я склоняюсь к тому мнению, что в стилях для сайта нужно учитывать как можно больше браузеров и нужно делать стили совместимыми с большинством из них. Пусть это будет 0.1% посетителей вашего сайта — зато этот 0.1% не закроет вашу страницу после того как увидит что-то несуразное.
0
Мне нравится в postcss как раз таки противоположное — по умолчанию оно ничего не делает. А далее вы просто добавляете плагины, правила и т.д. и можно сделать хоть свой sass/less. А можно взять простенький препроцессор с поддержкой миксинов (я не отрицаю что они нужны, но я из обычно применяю не для хаков/префиксов, а для минимизации какой-то рутины. Спратять какой-нибудь страх и ужас. Ну и комбинировать поведение.
Лучше подумайте над тем, как добавить возможность расширять синтаксис вашего препроцессора без необходимость ковыряться в тоннах кода. Скажем node-visitor-ы свои добавлять и т.д.
Лучше подумайте над тем, как добавить возможность расширять синтаксис вашего препроцессора без необходимость ковыряться в тоннах кода. Скажем node-visitor-ы свои добавлять и т.д.
0
Ну так Stylus так и работает: вы пишете «чистый код», который примесями разворачивается в лапшу — где-то просто префиксы добавляются, где-то транслируется в разные нотации, а где-то вообще разные правила вставляются. При этом вы не скованы синтаксисом CSS, а можете использовать всякие клёвые штуки типа вложенных правил, вложенных media-queries и прочего.
0
Для фоллбэков есть другие плагины для PostCSS, например, CSS Grace: github.com/cssdream/cssgrace
0
Проблема фолбэков в их неуниверсальности. В разных проектах нужны разные виды фолбэков и многие из них специфичны для конкретных проектов. Например, на одном из проектов мне надо было реализовать прозрачность. Но для браузеров её не поддерживающих (старые версии ие) нельзя было применять фильтры, а необходимо было использовать упрощённый дизайн без прозрачности, что было не так красиво (фоновая картинка, если она была установлена, не просвечивала), зато не тормозило.
-1
Меня всегда удивляли эти «примера ради», люди ведь копируют код не глядя, забывая читать описания. И потом вы видим
<div class="button">
и прочие безумства. Так что осторожнее. А что касается Автопрефиксера, он позволяет гибко указывать любые целевые версии браузеров и, если нужно, форсить прямо в коде нужные заплатки и префиксы, почитайте об этом в документации.+3
Дак это вроде же пример, нет?
Понятно, что в примеси потом выносится лишь то, что решит фронтендщик потом, зачем придираться.
Понятно, что в примеси потом выносится лишь то, что решит фронтендщик потом, зачем придираться.
0
hostinger не выдержал напора :)
+1
Я даже и не думал, что я в ближайшее время вылезу за пределы их ограничений. Придется, что-нибудь с этим сделать… Только пока что непонятно что…
0
У гитхаба есть возможность хостить статические сайты.
0
Да, но, к сожалению, у меня сайт не статический и поэтому пришлось искать что-то более подходящее.
0
Ясно. Обычно у таких вещей сайты статические. Возможно имеет смысл подумать об отказе от динамики в пользу статики. А пока взять какую нибудь не дорогую VDS.
0
Я делал сайт для демонстрации возможностей библиотеки, а это не сделаешь со статическим контентом. На моем текущем сайте можно протестировать библиотеку, а также увидеть «арифметику цветов» в боевом действии.
0
У вас вместо сайта главная страница хостера открывается.
0
Ну, конечно же, мне пришлось написать небольшой сайтик для презентации своего продукта (вы уже догадались, какой язык программирования был выбран мной для этой цели?).
Превышен Лимит Процессорной Памяти
Отличный выбор :)
+5
Доступ к сайту будет полностью восстановлен после обновления всей цепочки DNS. Сейчас сайт доступен по адресу: http://dobby007_h5a5nu.radius-host.net
0
Но… Но… Но… зачем??
Я, конечно, прощу прощения, но… ЧТО именно не нашлось интересного, что сподвигло писать свой компилятор?
После двухдневного (а может и меньшего) просмотра результатов с гугла, я ничего интересного для себя не нашел.
Я, конечно, прощу прощения, но… ЧТО именно не нашлось интересного, что сподвигло писать свой компилятор?
0
Во-первых, мне было интересно написать компилятор самому. Во-вторых, мне позарез как нужно было что-то, что позволило бы мне пройтись по файлику стилей и изменить семейство шрифтов на Arial для селектора body и цвет шрифта на #333. И желательно было бы не плодить технологии, а сделать все на родном PHP.
-1
border-radius
с префиксами в примере — полный ужас :).Ну и какой смысл сейчас делать препроцессоры, когда уже во всю развиваются постпроцессоры ;).
+1
А что на счет иерархичности?
0
Вы имеете в виду древовидную структуру селекторов? Тогда, да. В MySheet есть данная возможность. В статье есть пример с этой функцией. Для наглядности приведу еще один:
компилируется в следующий CSS-код:
html
height 100%
body
color #777
height 100%
font-family: 'Open Sans', sans-serif;
.wrapper
position relative
min-height 100%
#header
color #fff
background-color rgba(0, 0, 0, 60%)
#logo
float left
.title
padding 4px 5px
font-weight bold
font-size 14pt
#main-menu
overflow hidden
ul
float right
li
float left
padding 8px 6px
компилируется в следующий CSS-код:
html {
height: 100%
}
html body {
color: #777777;
height: 100%;
font-family: "Open Sans",sans-serif
}
html body .wrapper {
position: relative;
min-height: 100%
}
html body .wrapper #header {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6)
}
html body .wrapper #header #logo {
float: left
}
html body .wrapper #header #logo .title {
padding: 4px 5px;
font-weight: bold;
font-size: 14pt
}
html body .wrapper #header #main-menu {
overflow: hidden
}
html body .wrapper #header #main-menu ul {
float: right
}
html body .wrapper #header #main-menu ul li {
float: left;
padding: 8px 6px
}
0
html body .wrapper #header #main-menu ul li
я надеюсь что это только для примера и в реальной верстке подобного не будет.
0
Вы знаете?.. Я так всегда пишу :) И этот код сейчас с моего сайта. И это работает!
-1
почитайте про БЭМ, про smacss и т.д… В конце концов разберитесь как браузер селекторы применяет (для каждого элемента справа на лево, так что указывая html в селекторах вы буквально заставляете браузер для каждого элемента все траверсить вверх по DOM. При том что у вас где-то по середине айдишник который уже должен быть только один на странице, и дальше писать вложенности смысла нет.
+1
А что вам не понравилось?
0
попробуйте погуглить CSS performance optimisations. Узнаете много интересного.
+1
Да дело даже не столько в производительности, сколько в излишней специфичности селекторов. Это как минимум не разумно и я не представляю как такую верстку поддерживать.
0
На уровне исходных стилей поддерживать легко. Переносишь блок стилей на уровень корневого элемента и получаешь совсем другие конечные селекторы. А на уровне HTML поддерживать точно также как и все остальное. Эти вещи поддерживать мало влияют друг друга в случае использования препроцессоров, поддерживающих древовидную структуру.
0
получаешь совсем другие конечные селекторы.
проблемы со специфичностью селекторов это не решает.
Что вы скажите о БЭМ как о другой крайности?
0
Вы ошибаетесь. Это напрямую влияет на специфичность селекторов.
О БЭМ я думаю как о решении, разработанном конкретной компанией под их задачи, с которыми мне еще не приходилось сталкиваться. Это нестандартный взгляд на вещи со своими плюсами и минусами.
О БЭМ я думаю как о решении, разработанном конкретной компанией под их задачи, с которыми мне еще не приходилось сталкиваться. Это нестандартный взгляд на вещи со своими плюсами и минусами.
0
Это напрямую влияет на специфичность селекторов.
Специфичность селекторов и есть проблемы в долгосрочной перспективе.
Это нестандартный взгляд на вещи со своими плюсами и минусами.
Рекомендую к просмотру доклад Вадима Макеева о различных методологиях верстки и про БЭМ в частности. Может будет интересно.
0
мне стало плохо, когда я увидел два айдишника подряд. с еще тремя селекторами перед ними.
+1
Про производительность я как-то даже не думал. Спасибо.
0
Да, именно это я и имел ввиду. Спасибо за пояснение. Как-то пропустил этот участок в статье.
А есть ли поддержка «ссылок» на «текущий селектор» в дереве, как в less? Например:
А есть ли поддержка «ссылок» на «текущий селектор» в дереве, как в less? Например:
body {
a {
color: red;
&:visited {
color: blue;
}
.some-parent & {
font-weight: bold;
}
}
}
0
Да. Только не на текущий, а на родительский селектор. Вот только ваш код моя библиотека не переваривает из-за неравномерно расставленных пробелов в строке. Будем разбираться. Попробуйте пока этот:
body {
a {
color: red;
&:visited {
color: blue;
}
.some-parent & {
font-weight: bold;
}
}
}
0
На mss.flydigo.com есть блок Try it now внизу страницы. Попробовать ввести свой код можете там.
0
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Рассказ о том, как написать свой собственный CSS препроцессор за 9 месяцев