Передача переменных в таблицу стилей LESS.js - PullRequest
Новая
       5

Передача переменных в таблицу стилей LESS.js

5 голосов
/ 19 декабря 2011

У меня есть несколько переменных (шестнадцатеричные цвета), определенных в базе данных. Мне нужно передать эти переменные из MySQL в таблицу стилей LESS.js через PHP. Возможно ли это?

Если нет, какой-нибудь совет о том, как сделать нечто подобное? Ключевые переменные: светлое и темное.

Ответы [ 2 ]

5 голосов
/ 25 января 2012

Лучший подход, который приходит мне в голову, это динамическое генерирование файла LESS с использованием PHP (включая ваши переменные).

1 \ Вам нужно будет включить новую таблицу стилей вваши HTML-страницы. 

<link rel='stylesheet/less' href='css/style.php' />

2 \ В ваш style.php включите ваши PHP переменные следующим образом: 

<?php header("Content-type: text/css; charset: UTF-8"); ?>

@brand_color_1 = <?php echo $brand_color_1; ?>;
/* Add all other vars do you need. */

3 \ Затем внизу (или после объявления LESS var)из этого style.php добавьте все необходимые импорты следующим образом: 

<?php
  header("Content-type: text/css; charset: UTF-8");

  @brand_color_1 = <?php echo $brand_color_1; ?>;
  /* Add all other vars do you need. */

  @import "style.less";
?>

Это будет работать как часы.

Есть статья, которую вы можете прочитать о CSS-переменных с помощью PHP написанный Крисом Койером .

Другой не рекомендуется альтернативой является компиляция LESS-файлов на стороне клиента, вы можете вручную скомпилируйте их и передайте PHP-переменные, выполнив следующее: 

<script type="text/javascript">
var colors = '';
colors += '@brand_color_1: <?php echo $brand_color_1 ?>;'
colors += '@brand_color_2: <?php echo $brand_color_2 ?>;'
colors += '@import "style.less"';
// Add other imports.
var parser = new (less.Parser)();
parser.parse(colors, function(err, tree) { 
  var css = tree.toCSS();
  // Add it to the DOM maybe via jQuery
});
</script>
0 голосов
/ 21 мая 2013

CSS: 

#header {
    color:black;
    border:1px solid #dd44dd;
}

#header .navigation {
    font-size:12px;
}

#header .navigation a {
    border-bottom:1px solid green; 
}

#header .logo {
    width:300px;
}

#header .logo:hover {
    text-decoration:none;
}

МИНУС: 

#header {
    color:black;
    border:1px solid #dd44dd;
    .navigation {
        font-size:12px; a {
            border-bottom:1px solid green;
        }
    }
.logo
...