Сомневаюсь, что даже автор такого шаблона, спустя полгода разберется в своей мешанине.
А ему и не нужно он поправить мексины вот и все.
Тот же border-radius в них уже не нуждается, воспринимается всеми браузерами как есть, без -moz- ов и прочего мусора.
Вот вот вы как будете потом удалять ненужные префиксы, поиск и замена? в место того что бы в одном месте убрать ненужный?
Нет готовых CSS файлов, как в случае, если сверстать что то, сгенерировать и поставить в шаблон.
Обычные все гененрируется локально в Sass к примеру. т.е. вы отдаете CSS а не генерируете его на сервере, в шаблонах просто сделано упрощение для новичков я думаю...
Ваш пример с волженностями, вот код в Sass (в Less синтаксис другой немного, но я думаю не особо отличается в данном примере, поэтому возьмем его)
input {
background-color: #e9e8e8;
line-height: 40px;
height: 40px;
padding: 0 20px;
color: $BaseColor;
font-size: 12px;
text-transform: uppercase;
border: none;
position: relative;
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, #e9e8e8 0%,#f4f4f4 100%));
@include transition(box-shadow 0.3s ease);
&::-webkit-input-placeholder { color: $ColorGrey; }
&:-moz-placeholder { color: $ColorGrey; }
&.placeholder { color: $ColorGrey; }
&[name="searchmain"],
&[name="searchdocs"] {
width: 608px;
}
&:focus {
@include box-shadow(inset 0px 0px 5px 0px rgba($ColorGreen, 0.6));
}
&.error {
color: $ColorWhite;
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, #ed5a5a 0%,#fb6060 100%));
&::-webkit-input-placeholder { color: $ColorWhite; }
&:-moz-placeholder { color: $ColorWhite; }
&.placeholder { color: $ColorWhite; }
}
}
в CSS это простой пример, но очевидно же что проще разобраться в Sass разве нет? Особенно с градиентом для IE9:
input {
background-color: #e9e8e8;
line-height: 40px;
height: 40px;
padding: 0 20px;
color: #333333;
font-size: 12px;
text-transform: uppercase;
border: none;
position: relative;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZThlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e8e8), color-stop(100%, #f4f4f4));
background-image: -webkit-linear-gradient(top, #e9e8e8 0%, #f4f4f4 100%);
background-image: -moz-linear-gradient(top, #e9e8e8 0%, #f4f4f4 100%);
background-image: -o-linear-gradient(top, #e9e8e8 0%, #f4f4f4 100%);
background-image: linear-gradient(top, #e9e8e8 0%, #f4f4f4 100%);
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
-o-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease; }
input::-webkit-input-placeholder {
color: #a8acb8; }
input:-moz-placeholder {
color: #a8acb8; }
input.placeholder {
color: #a8acb8; }
input[name="searchmain"], input[name="searchdocs"] {
width: 608px; }
input:focus {
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(129, 185, 45, 0.6);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(129, 185, 45, 0.6);
box-shadow: inset 0px 0px 5px 0px rgba(129, 185, 45, 0.6); }
input.error {
color: white;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkNWE1YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiNjA2MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ed5a5a), color-stop(100%, #fb6060));
background-image: -webkit-linear-gradient(top, #ed5a5a 0%, #fb6060 100%);
background-image: -moz-linear-gradient(top, #ed5a5a 0%, #fb6060 100%);
background-image: -o-linear-gradient(top, #ed5a5a 0%, #fb6060 100%);
background-image: linear-gradient(top, #ed5a5a 0%, #fb6060 100%); }
input.error::-webkit-input-placeholder {
color: white; }
input.error:-moz-placeholder {
color: white; }
input.error.placeholder {
color: white; }
al-teen, на счет rt я понимаю откуда у вас ненависть к Less возникла я после вас дописывал чуть один шаблон и видел какой там ад учинили РокетЗемс) но это не значит что сам язык плохой...
Голосование
26.01.2018, 11:27:10