Как подключить less?

Вопрос-ответ HTML/CSS
1

Что есть:
Код в html/css

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
       <style>
       .color {
width:300px;
height:300px;
    background-color: @base-color;
}
       </style>
       <link rel="stylesheet/less" type="text/css" href="styles.less" />     
       <script src="less.min.js"></script>      
    </head>
    <body>                     
           <div class="color">Текст</div>
            </body>
</html>

Файл styles.less, где задан цвет для класса .color:

@base-color: red;

Содержимое для файла less.min.js скопировано отсюда - https://raw.githubusercontent.com/less/less.js/v2.2.0/dist/less.min.js (с их оф сайта)

Загрузила все это на хостинг (бесплатный) для проверки, как будет работать. В итоге - цвет не отображается(LESS не подключен? или где-то ошибка?)

1 лайк
2

Думаю, что дело в двух вещах:

  1. Через less препроцессор надо также пропустить стили, где ты используешь переменную. Это значит, надо указывать атрибут type: <style type="text/less">. Для обоих стилей.
  2. Обычно сначала объявляют переменные, а потом только используют. Надо разместить подключения файла с переменной до использования переменной.

Итого поправленный код

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet/less" type="text/less" href="styles.less" />     
  <style type="text/less">
    .color {
      width:300px;
      height:300px;
      background-color: @base-color;
    }
  </style>
  <script src="less.min.js"></script>      
</head>
<body>                     
 <div class="color">Текст</div>
</body>
</html>

Для тестов использовал такую разметку: http://jsfiddle.net/a07m8t53/

2 лайка
3

Спасибо, помогло.
В общем получается,- если стили css находятся в html - то и стили less должны там находится, а не отдельным подключаемым файлом. Верно?

И еще вопрос: если стили css подключать отдельно, и стили less соответственно тоже отдельным файлом - то почему less не подключается?

Содержимое html:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <link rel="stylesheet/less" type="text/less" href="styles.less" />   
  <script src="less.min.js"></script>      
</head>
<body>                     
 <div class="color">Текст</div>
</body>
</html>

Содержимое style.css:

 .color {
      width:300px;
      height:300px;
      border:1px solid red;
      background-color: @base-color;
    }

Содержимое styles.less:

@base-color: red;
4

Потому что в css файле ожидается синтаксис css, а не less.

5

использование препроцессора LESS уже предполагает, что вам не надо подключать еще один файл со стилями css. В общем надо сделать так:

Содержимое html:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet/less" type="text/less" href="styles.less" />   
  <script src="less.min.js"></script>      
</head>

<body>                     
 <div class="color">Текст</div>
</body>

</html>

Содержимое styles.less:

@base-color: red;
 .color {
      width:300px;
      height:300px;
      border:1px solid red;
      background-color: @base-color;
    }

в хроме будет проблема с открытием. надо найти ярлык хрома, клацнуть “Свойства”, и в строке “Объект” дописать через пробел -allow-file-access-from-files

3 лайка
6

Спасибо ребята! Благодаря Вам установил less, вот еще и подсветку на sublText3 поставил \о/