Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Less

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте. Пожалуйста, помогите найти ошибку в less. Второй день сижу и не могу понять почему выскакивает ошибка.  
 
Ошибка  

Код:
 
ArgumentError: error evaluating function `hsla`: color functions take numbers as parameters
 
in style.less on line 45, column 9:
 
    44
 
    .block1{
 
    45
 
        .block(hsla(60, 50%, 75%), 200px, 17deg);
 
    46
 
    }
 
 
 

 
Код

Код:
 
/* LESS Document */
 
@h-size: 170px;
@w-size: 170px;
@bgc-col: hsla(164,90%,51%,1.00);
 
 
.box-shadow (@x: 0, @y: 0, @blur: 20px, @color: rgba(0, 0, 0, 0.7)) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
 
.transform-rotate {
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}
 
.transform-scale{
    transform: scale(1.2);
}
 
.transition-transform {
    -webkit-transition: ease;
    -moz-transition: ease;
    transition: ease;
}
 
.block{
    height: @h-size;
    width: @w-size;
    background-color: @bgc-col;
    margin: 30px 20px;
    float: left;
    .box-shadow;
    .transform-rotate;
    .transition-transform;
    &:hover {
        .transform-scale;
        }
}
 
.block1{
    .block(hsla(60, 50%, 75%), 200px, 17deg);
}
 
.block2{
    .block(hsla(120, 50%, 75%), 300px, 27deg);
}
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 18:42 18-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7
У hsla есть еще и 4 аргумент - прозрачность
 

Цитата:
Parameters:
 
hue: An integer 0-360 representing degrees.
saturation: A percentage 0-100% or number 0-1.
lightness: A percentage 0-100% or number 0-1.
alpha: A percentage 0-100% or number 0-1.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 19:18 18-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
У hsla есть еще и 4 аргумент - прозрачность  

 
Добавила 4 аргумент
 
Ошибка другая

Код:
 
RuntimeError: No matching definition was found for `.block(rgba(223, 223, 159, 0.8), 200px, 17deg)`
 
in style.less on line 45, column 2:
 
    44
 
    .block1{
 
    45
 
        .block(hsla(60, 50%, 75%, 0.8), 200px, 17deg);
 
    46
 
    }
 
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 19:42 18-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
RuntimeError: No matching definition was found for `.block(rgba(223, 223, 159, 0.8), 200px, 17deg)`  

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

Цитата:
.block{  
    height: @h-size;  
    width: @w-size;  
    background-color: @bgc-col;  
    margin: 30px 20px;  
    float: left;  
    .box-shadow;  
    .transform-rotate;  
    .transition-transform;  
    &:hover {  
        .transform-scale;  
        }  
}

а теперь сравните, к примеру, с
Цитата:
.box-shadow (@x: 0, @y: 0, @blur: 20px, @color: rgba(0, 0, 0, 0.7))

и ваши аргументы от чего то еще, так как содержат и угол, чего нет в самом .block вообще.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 20:56 18-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
код для .block с 3 аргументами неопределен  
сам он есть, но аргументы то не указаны

 
В сети я читала, что в классе миксины можно писать без аргументов. Разве это не так?

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 13:44 19-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
Разве это не так?

без понятия, не было нужды в LESS, но и там все просто и понятно )  
я и не сомневаюсь, что можно без аргументов, но вы же какие то передавать пытаетесь. вот он и не находит подходящий по 3 аргументам.
http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters
пример можно попробовать тут http://less2css.org/

Код:
.block {
  color: red;    
}
 
.test {
 .block(#000);
}

выдаст
Цитата:
RuntimeError: No matching definition was found for `.block(#000)` on line 6, column 2:
, как у вас. а вот
Код:
.block(@color) {
  color: @color;    
}
 
.test {
 .block(#000);
}

сработает без проблем, что и подтверждает то, о чем я говорил ранее.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:43 19-12-2016 | Исправлено: Mavrikii, 21:44 19-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Почему этот вариант работает?
 

Код:
 
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
 
p{
    .bordered;
}
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 12:55 20-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
Почему этот вариант работает?

Потому, что при вызове миксина не используются аргументы - их нет и в определении, очевидно же.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 14:25 20-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Спасибо, мои глаза открылись.
 
Добавлено:
Что хотите думайте обо мне, не получается у меня избавиться от ошибке!
 

Код:
 
/* LESS Document */
 
@h-size: 170px;
@w-size: 170px;
@bgc-col: hsla(164,90%,51%,1.00);
 
/*(@hoff, @voff, @blur, @color)*/
.box-shadow(@x: 3px, @y: 7px, @blur: 2px, @color: rgba(0, 0, 0, 0.5)) {
    box-shadow: @argumnts;
  -webkit-box-shadow: @argumnts;
  -moz-box-shadow: @argumnts;
}
/*@angle*/
.transform-rotate(@deg) {
    -moz-transform: rotate(@deg);
    -webkit-transform: rotate(@deg);
    transform: rotate(@deg);
}
 
.transform-scale(@sc){
    transform: scale(@sc, @sc);
}
 
.transition-transform(@time, @effect, @delay) {
    -webkit-transition: -webkit-transform @argumnts;
    -moz-transition: -moz-transform @argumnts;
    transition: transform @argumnts;
}
/*@color, @angle*/
.block(@deg){
    height: @h-size;
    width: @w-size;
    background-color: @bgc-col;
    margin: 30px 20px;
    float: left;
    .box-shadow(3px, 3px, 5px, hsla(0, 0, 0, .9));
    .transform-rotate(@deg);
    .transition-transform(.5s, ease, 0s);
    &:hover {
        .transform-scale(1.3);
        }
}
 
.block1{
    .block(150px, 150px, #A5D6A7, 3deg);
}
 
.block2{
    .block(200px, 200px, #1B5E20, 15deg);
}
 
 
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 14:08 21-12-2016 | Исправлено: zolga7, 17:58 21-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
.block(150px, 150px, #A5D6A7, 3deg)

сколько аргументов? 4 штуки..
 

Цитата:
.block(@deg){  

сколько тут аргументов? 1 штука... вот и не может найти миксин с 4 аргументами, который должен применить

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:06 21-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Поставила 4 аргумента, сейчас другая ошибка.
 

Код:
 
.block(@color, @deg, @x, @y){
    height: @h-size;
    width: @w-size;
    background-color: @bgc-col;
    margin: 30px 20px;
    float: left;
    .box-shadow(3px, 3px, 5px, hsla(0, 0, 0, .9));
    .transform-rotate(@deg);
    .transition-transform(.5s, ease, 0s);
    &:hover {
        .transform-scale(1.3);
        }
}
 
.block1{
    .block(150px, 150px, #A5D6A7, 3deg);
}
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 13:32 22-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
сейчас другая ошибка.  

О сообщении, которое при этом выводится, видимо, мы должны догадаться самостоятельно?
 

Цитата:
transform-rotate(@deg);  

Порядок аргументов тоже важен - обратите внимание каким аргументом передаются градусы при вызове .block

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 15:40 22-12-2016 | Исправлено: Mavrikii, 15:42 22-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ошибка  

Код:
 
SyntaxError: variable @argumnts is undefined
 
in style.less on line 45, column 2:
 
    44
 
    .block1{
 
    45
 
        .block(150px, 150px, #A5D6A7, 3deg);
 
    46
 
    }
 
 
 

 
переменная @argumnts не определен. Не могу понять это исправить?

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 17:51 22-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
Не могу понять это исправить?

зачем вы занимаетесь тем, что не понимаете?  
 

Цитата:
переменная @argumnts не определен

смотрите что вызывается из .block, в чем пытается быть использована переменная
Цитата:
@argumnts

 
и вуаля, .block вызывает
Цитата:
 .box-shadow(3px, 3px, 5px, hsla(0, 0, 0, .9));  

внутри которого есть непонятно откуда взявшаяся переменная
Цитата:
.box-shadow(@x: 3px, @y: 7px, @blur: 2px, @color: rgba(0, 0, 0, 0.5)) {  
    box-shadow: @argumnts;  
  -webkit-box-shadow: @argumnts;
  -moz-box-shadow: @argumnts;  
}  

 
зато по описанию языка есть переменная @arguments

Цитата:
@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don't want to deal with individual parameters.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:52 22-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Опечатку в название переменной исправила. Ошибка осталась.

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 09:41 23-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
в название переменной исправила

если исправили, то та же самая ошибка не может остаться. а текст сообщения вы снова не указали.  
исправлять то нужно везде

Код:
.transition-transform(@time, @effect, @delay) {  
    -webkit-transition: -webkit-transform @argumnts;  
    -moz-transition: -moz-transform @argumnts;  
    transition: transform @argumnts;  
}  

неужели даже на такое нужны указания?

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 09:45 23-12-2016 | Исправлено: Mavrikii, 09:46 23-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
Код:
.transition-transform(@time, @effect, @delay) {  
    -webkit-transition: -webkit-transform @argumnts;  
    -moz-transition: -moz-transform @argumnts;  
    transition: transform @argumnts;  
}  
 
неужели даже на такое нужны указания?

Извините не заметила.  
 
Спасибо сейчас нет ошибки, но к каждому блоку не применяются свои стили. У меня уже истерика начинается когда открываю этот файл.
 

Код:
 
/* LESS Document */
 
@h-size: 170px;
@w-size: 170px;
@bgc-col: hsla(164,90%,51%,1.00);
 
 
.box-shadow(@x: 3px, @y: 7px, @blur: 2px, @color: rgba(0, 0, 0, 0.5)) {
    box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
}
 
.transform-rotate {
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}
 
.transform-scale{
    transform: scale(1.2);
}
 
.transition-transform(@time, @effect, @delay) {
    -webkit-transition: -webkit-transform @arguments;
    -moz-transition: -moz-transform @arguments;
    transition: transform @arguments;
}
 
.block(@color, @deg, @x, @y){
    height: @h-size;
    width: @w-size;
    background-color: @bgc-col;
    margin: 30px 20px;
    float: left;
    .box-shadow(3px, 3px, 5px, hsla(0, 0, 0, .9));
    .transform-rotate;
    .transition-transform(.5s, ease, 0s);
    &:hover {
        .transform-scale;
        }
}
 
.block1{
    .block(150px, 150px, hsla(164,90%,51%,1.00), 3deg);
}
 
.block2{
    .block(200px, 200px, #1B5E20, 15deg);
}
 
 
 

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 15:18 23-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
У меня уже истерика начинается когда открываю этот файл.

Потому, что занимаетесь не тем. Здесь нужно думать логически, а не методом тыка.
Опять же, смотрим и анализируем.
 

Цитата:
block(150px, 150px, hsla(164,90%,51%,1.00), 3deg);  

Первые два аргумента - пиксели, третий - цвет, четвертый - угол
 
Бессмыслица получается уже тут, так как в определении миксина (переменные можно называть как угодно, но очевидно что лучше близко к их содержимому, чтобы не было путаницы) вы указали их в другом порядке

Цитата:
(@color, @deg, @x, @y)

К чему это приводит? К тому,  
@color = 150px
@deg = 150px
@x = hsla(164,90%,51%,1.00)
@y = 3deg
 
Очевидно, что это вызовет проблемы (хотя и необязательно). У вас же проблема в том, что вы передали значения в .block, но не используете их и не передаёте  в другие миксины, поэтому ничего и не меняется.

Цитата:
block(@color, @deg, @x, @y){  
    height: @h-size;  
    width: @w-size;  
    background-color: @bgc-col;  
    margin: 30px 20px;  
    float: left;  
    .box-shadow(3px, 3px, 5px, hsla(0, 0, 0, .9));  
    .transform-rotate;  
    .transition-transform(.5s, ease, 0s);  
    &:hover {  
        .transform-scale;  
        }  
}  

Ни одна из @color, @deg, @x, @y не используется внутри миксина.
 

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 17:09 23-12-2016
zolga7

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо.

Всего записей: 18 | Зарегистр. 21-10-2008 | Отправлено: 20:26 23-12-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7

Цитата:
Спасибо

разобрались в чем дело? или нужны конкретные примеры? исправить до конца то, что у вас есть, я не могу, так как не знаю чего вы хотите добиться.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 23:09 23-12-2016
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Less


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru