Jump to content
mruoppolo

php e sass

Recommended Posts

Olá, tudo bem?

 

Eu estou criando alguns temas premium wordpress e criei um painel onde o usuário seleciona todas as cores e estilos do CSS, porém para que estas cores e estilos tenham efeito no site, elas precisam ser inseridas pelo php no sass ou no css diretamente, ai que esta o problema.

 

Eu fiz o seguinte, criei um arquivo chamado custom.php mais ou menos assim:

 

<style>
#loader p {
	color: <?php echo $preloader_typography_color; ?>;
	font-style: <?php echo $preloader_typography_style; ?>;
	font-family: <?php echo $preloader_typography_font; ?>;
	font-size: <?php echo $preloader_typography_size; ?>;
	line-height: <?php echo $preloader_typography_line; ?>;
	text-align: <?php echo $preloader_typography_align; ?>;
}
</style>

E dou um include nele bem no header, funciona, porém eu não sei se é a solução mais indicada, como os temas premium são para venda, eu fiquei na dúvida se esta é a maneira correta de fazer.

 

Eu uso muito sass para desenvolver e como tem as variáveis do sass eu pensei se o correto não seria o sass ser compilado diretamente no navegador e estes dados serem inseridos diretamente nas variáveis do sass, mas não sei se isto é possível.

 

Então qual a sua opinião, a forma que estou fazendo é a mais indicada?? Você conhece alguma outra solução mais profissional?

 

Muito obrigado :D

Share this post


Link to post
Share on other sites
1 hora atrás, ESerra disse:

Em primeiro lugar, o que é sass?

 

O Sass é uma linguagem baseada em CSS , tipo assim, ele permite utilizarmos estruturas de programação dentro do CSS, como por exemplo, laços de repetição 'foreach' e talz variáveis, é bem legal, eu vou escrevendo um arquivo style.scss como se fosse uma programação, coloco variáveis, laços de repetição, posso usar o comando extend para puxar os atributos de uma classe para dentro da outra e ele vai automaticamente compilando tudo em um arquivo css.

 

O problema é que pra funcionar eu preciso deixar o meu CMD (terminal do windows) aberto e "ouvindo" tudo o que eu digito no arquivo scss ai toda vez que eu salvo, ele compila em css e não sei como fazer isso no servidor.

Share this post


Link to post
Share on other sites

No php você pode passar o header do arquivo como css e chamar de forma externa

custom.php

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

#loader p {
	color: <?php echo $preloader_typography_color; ?>;
	font-style: <?php echo $preloader_typography_style; ?>;
	font-family: <?php echo $preloader_typography_font; ?>;
	font-size: <?php echo $preloader_typography_size; ?>;
	line-height: <?php echo $preloader_typography_line; ?>;
	text-align: <?php echo $preloader_typography_align; ?>;
}

para chamar, ao invés de usar .css, use .php

<link rel='stylesheet' type='text/css' href='css/custom.php?id=1' />

Está é uma forma, a outra é usar arquivos JS, exemplo seria o próprio jquery para trabalhar nos elementos.

 

A vantagem é que você pode criar os caches, tanto em CSS quanto JS e compressão do arquivo.

 

  • +1 1

Share this post


Link to post
Share on other sites

Até onde eu sei só da pra compilar o Sass localmente, pelo menos nunca consegui fazer de outra forma kk...

Quanto ao jeito de fazer, à minha mente veem 3 formas:

• A que você já citou, de incluir diretamente no HTML...

• Como o Williams falou, setando o header como text/css

• E por último, dando um file_get_contents() e posteriormente um file_put, com as novas cores

  • +1 1

Share this post


Link to post
Share on other sites

 

13 horas atrás, Mateus Silva disse:

• E por último, dando um file_get_contents() e posteriormente um file_put, com as novas cores

 

Existe formas mais elegantes e uma delas é via htaccess


Forçar o arquivo .css ou .js interpretar tags php 

 

Exemplo

 

index.html

css/
      /.htaccess

      /custom.css
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fundo Cinza</title>
        <link rel='stylesheet' type='text/css' href='css/custom.css?cor=blue' />
    </head>
    <body>

        <h1>Cor Branca</h1>
        <span class="cor">Cor Azul</span>

    </body>
</html>

 

.
/css/.htaccess

 

<FilesMatch "\.(css)$">
    SetHandler application/x-httpd-php
</FilesMatch>


/css/custom.css

 

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

$cor = isset($_GET['cor']) ? $_GET['cor'] : null;
$body = "#ccc";
$h1 = "#fff";
?>

body {
    background: <?= $body ?>;
}

h1 {
    color: <?= $h1 ?>;
}

.cor {
    color: <?= $cor ?>;
}





 

  • +1 2

Share this post


Link to post
Share on other sites
1 hora atrás, Williams Duarte disse:

 

 

Existe formas mais elegantes e uma delas é via htaccess


Forçar o arquivo .css ou .js interpretar tags php 

 

Exemplo

 

index.html

css/
      /.htaccess

      /custom.css
 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fundo Cinza</title>
        <link rel='stylesheet' type='text/css' href='css/custom.css?cor=blue' />
    </head>
    <body>

        <h1>Cor Branca</h1>
        <span class="cor">Cor Azul</span>

    </body>
</html>

 

.
/css/.htaccess

 


<FilesMatch "\.(css)$">
    SetHandler application/x-httpd-php
</FilesMatch>


/css/custom.css

 


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

$cor = isset($_GET['cor']) ? $_GET['cor'] : null;
$body = "#ccc";
$h1 = "#fff";
?>

body {
    background: <?= $body ?>;
}

h1 {
    color: <?= $h1 ?>;
}

.cor {
    color: <?= $cor ?>;
}





 

 

Muito obrigado pessoal, eu vou utilizar esta solução via htaccess, mas agradeço a todos :)

Share this post


Link to post
Share on other sites

Lembrando que, o exemplo com .htaccess é para Apache, para outros como nginx teria que converter.


http://nginx.org/en/docs/http/ngx_http_core_module.html

A primeira opção lá em cima, fica independente, se é apache ou nginx vai rodar, já que boa parte dos usuários wordpress, vem migrando para nginx.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Camilavip
      Oi, como consigo fazer uma página de erro ou redirecionamento ou aviso, caso alguém clique em um cadastro que já não existe ou não tenha?
      localhost/clientes/12/ricardo No exemplo acima eu clico no cliente com esse id 12 e abre os dados dele, mas se eu o excluir mas estiver com o link e colocar no navegador, ele abre a página, sem os dados dele, mas abre. Eu queria se caso não tivesse mais o id cadastrado, abrisse algo como nenhum cadastro encontrado ou existente.
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By emmanuelsiqueira30
      Pessoal preciso de uma ajudinha aqui se alguém puder me ajudar fico muito agradecido.
      O problema é o seguinte gostaria de editar dados de um formulário com checkbox usando html e php.
      Desde já agradeço por toda ajuda.
    • By liniker.o
      Boa tarde pessoal!
      Estou com um problema em meu código quando coloco uma referencia de fonte a mesma não carrega, quando faça o mesmo procedimento local colocando os caminhos de pasta funciona normalmente.
      Será que alguém poderia me ajudar?
      Segue o código.
      <html> <head> <title>Minha pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- Se não declarar charset por meta, envie um header de igual valor --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <?php //Carregar imagem tamanho da imagen = 515x76 $img = ImageCreateFromJPEG("base.jpg"); //Definir cor $cor1 = imagecolorallocate($img, 0, 0, 0); $cor2 = imagecolorallocate($img, 0, 0, 0); // carregar fonte... $fonte1 = 'https://ff.static.1001fonts.net/r/o/roboto-condensed.light.ttf'; $fonte2 = 'https://ff.static.1001fonts.net/r/o/roboto-condensed.light.ttf'; //Escrever nome $txtNome = $_POST['nome']; $txtFuncao = $_POST['func']; $txtEmail = $_POST['email']; $txtDDD = "+55 ".$_POST['telefone']; // IMAGEM, TAMANHO_FONTE, 0, POSICAO X, posicao Y, TEXTO_COR, ARQ_FONTE, TEXTO imagettftext($img, 32, 0, 250, 100, $cor1, $fonte1, $txtNome); imagettftext($img, 18, 0, 250, 125, $cor1, $fonte2, $txtFuncao); imagettftext($img, 18, 0, 250, 150, $cor1, $fonte2, $txtEmail); imagettftext($img, 18, 0, 250, 180, $cor1, $fonte2, $txtDDD); //Header e output header('Content-type: image/jpeg'); imagejpeg($img,"Assinatura - ".$txtNome.".jpg"); imagedestroy($img); header('Location: Assinatura - '.$txtNome.'.jpg'); ?>  
    • By gersonab
      Boa tarde a todos, tenho um sistema de upload de arquivos que funciona perfeitamente, agora eu gostaria que estes arquivos fossem armazenados em nuvem, não no servidor, poderiam indicar um tutorial ou como proceder.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.