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 marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

    • By rvamecca
      Eu tenho um servidor que roda os PHP da versão 5.6 até a 8.0 com vários sites. Utilizo a versão FPM só que pesquisei na internet inteira e não consegui fazer rodar os arquivos customizados php.ini/.user.ini nos diretórios dos domínios. Chequei via phpinfo() e não carrega o arquivo customizado de configuração.
       
      Alguém pode me dar um help?
       
      Servidor Ubuntu 18.04 com Apache e as versões PHP 5.6, 7.0, 7.2, 7.4, 8.0 em FPM
    • By violin101
      Caros amigos, saudações...
       
      Fiz várias pesquisa, mas não consegui entender como devo fazer corretamente.
       
      Tenho um Cadastro de Produto/Clientes/etc.
       
      Gostaria de após clicar no Button ADICIONAR ou GRAVAR, quero mostrar na tela a seguinte mensagem:
      msg:
      Aguarde Processando...
       
      obs.: em alguns sistema até parece uma MODAL, com barra de progresso.
       
      Para impedir que o usuário fica Clicando nos Buttons.
       
      Alguém poderia me auxiliar de como devo fazer isso ?
       
      Grato,
       
      Cesar
    • By alysson122010
      Galera estou começando a trabalhar com datatables porem tenho uma dificuldade pq tipo até 200 registros por pagina é aceitavel mas penso quando tiver 2000 registro carregar tudo numa pagina so da errado pq é muitos dados e pode travar tudo.
      Como posso fazer para listar com limite por pagina ou alguma maneira para poder colocar varios dados sem travar.
       
      estou usando assim:
      <script type="text/javascript">        $(document).ready(function() {             $('#example').DataTable({         "order": [[ 0, "desc" ]],         "language": {             "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"         }     });         } );        </script> <table id="example" class="table table-striped table-bordered" style="width:100%">         <thead>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </thead>         <tbody>             <tr>                 <td>Tiger Nixon</td>                 <td>System Architect</td>                 <td>Edinburgh</td>                 <td>61</td>                 <td>2011/04/25</td>                 <td>$320,800</td>             </tr>             <tr>                 <td>Garrett Winters</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>63</td>                 <td>2011/07/25</td>                 <td>$170,750</td>             </tr>             <tr>                 <td>Ashton Cox</td>                 <td>Junior Technical Author</td>                 <td>San Francisco</td>                 <td>66</td>                 <td>2009/01/12</td>                 <td>$86,000</td>             </tr>             <tr>                 <td>Cedric Kelly</td>                 <td>Senior Javascript Developer</td>                 <td>Edinburgh</td>                 <td>22</td>                 <td>2012/03/29</td>                 <td>$433,060</td>             </tr>             <tr>                 <td>Airi Satou</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>33</td>                 <td>2008/11/28</td>                 <td>$162,700</td>             </tr>             <tr>                 <td>Brielle Williamson</td>                 <td>Integration Specialist</td>                 <td>New York</td>                 <td>61</td>                 <td>2012/12/02</td>                 <td>$372,000</td>             </tr>             <tr>                 <td>Herrod Chandler</td>                 <td>Sales Assistant</td>                 <td>San Francisco</td>                 <td>59</td>                 <td>2012/08/06</td>                 <td>$137,500</td>             </tr>             <tr>                 <td>Rhona Davidson</td>                 <td>Integration Specialist</td>                 <td>Tokyo</td>                 <td>55</td>                 <td>2010/10/14</td>                 <td>$327,900</td>             </tr>             <tr>                 <td>Colleen Hurst</td>                 <td>Javascript Developer</td>                 <td>San Francisco</td>                 <td>39</td>                 <td>2009/09/15</td>                 <td>$205,500</td>             </tr>         </tbody>         <tfoot>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </tfoot>     </table> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>  
    • By AlexandrePrezzi
      Seguinte
      Tenho uma página chamada  "teste.php" nessa página tem um formulário com vários campos que o usuário usa para fazer um filtro dos campos a serem pesquisado...
       
      Ao clicar no Pesquisar (submit) ... o action da página faz a seguinte ação
       
      script type="text/javascript"> $(function($){ $('#meuFormulario').submit(function(){ var dados = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "src/controller/request_teste.php", data: dados, cache: false, beforeSend: function() { $('#resultPesq').html("Carregando..."); }, success: function(e) { //window.alert(e); $('#resultPesq').html(e); }, error: function() { $('#resultPesq').html('Não foi encontrado dados!'); } }); return false; }); }); </script> O arquivo "request_teste.php", é quem recebe os dados do POST e faz o  tratamento desses dados....
       
      Ao final desse arquivo tem um  require_once 'result_teste.php' que vem a ser o arquivo onde irá mostrar o resultado da pesquisa.
       
      Nesse arquivo eu fiz uma páginação ao final do resultado.
       
      Entao primeiramente o link que estou acessando é 
       
      principal.php?link=teste.php  (abre a pagina com o formulário)
      ao clicar em pesquisar o link nao muda
       
      quando clico em página 2, é feito um refresh e a url fica principal.php?link=teste.php&pag=2
       
      O que acontece é que como a página faz um refresh eu perco todos dados do meu POST e tambem preciso clicar no botão pesquisar pra carregar os dado da página 2.
       
      Alguem sabe como ajustar isso ?

      Se precisarem de mais informações me avisem
       
       
       
×

Important Information

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