I'm just learning Sass and trying to figure out my workflow. Problem is that many times I have PHP-code in my CSS-files (autoversioning, path-variables etc). Is there any way of skipping PHP code in SASS (SCSS-files).
EDIT: I have to clarify that the problematic CSS-files are indeed dynamic, so my example.css.php -file runs some PHP and depends on webserver state somehow. (There are no problems with static CSS-files).
If I create simple SCSS-file, I get an error for PHP-code. Any ideas?... has someone made any modifications for Sass-parser to skip script code in sass?
Example test.scss:
$backg: #fa0;
#wrapper {
color: #000;
background-color: $backg;
}
<?php echo ""; ?>
EDIT: One "hack" occurred to my mind. I could use SASS /* */ comments to comment out all PHP-code lines and use some script afterwards to strip out the comment characters and reveal PHP to get correct results...
E.g.
// This is an example SCSS-snippet with commented PHP code lines in it...
.foo {
color: $someColor;
/* background: transparent url(<?php echo autoVer('../', 'img/badge.png'); ?>) no-repeat center top; */
By default your Web-server will not process css/scss files like php.
You can configure it in Nginx/Apache settings, but it's black coding actually
PHP usually expands a file in context of a specific HTTP request. The SCSS->CSS conversion usually happens on static files. Do you want your SCSS depend on data coming from the user, or the web session? If so, you would have to run Sass after running PHP to get CSS, otherwise your best approach would probably be adding a Makefile rule for running foo.scss.php through PHP and then Sass.
I should also point out that there's a good chance that what you're doing to your CSS with PHP is easily done with SCSS, anyway, so you may not need PHP once the conversion is complete.
Related
Picture to get understanding of my question!
So, this is the site I made for fun and It's a little dice game where you can guess the outcome of the dice. Anyways, as you can see there is a border under the other div. That's where the output comes from the dice game.
After rolling the dice.
So my question is:
Is there a way to make the CSS style before doing the 'game' different than after playing the game? (Border width: 0px; before and 1px after) Or is there a better way to do this instead of changing the CSS??
Edit by Martijn: The code given in the question makes to question obfuscated and didn't really need to be added. IMO it decreased the value of this question.
Yes, but first no: PHP can not change css. PHP is serverside, meaning it's build on a server and the result gets send to your browser. CSS styles the htmlpage on your computer, your computer´s browser calculates how big everything should be etc.
You can however, add a class to the html, depending on the result. This class can be styles.
You have not provided code, so´ll write you a small demo.
$indicationClass = ""; // not good or bad, so no class
if( $Guess=="correct" ){ $indicationClass = "CorrectAnswer"; }
elseif( $Guess=="wrong" ){ $indicationClass = "WrongAnswer"; }
<div id="ImTheResultDisplayer" class="<?=$indicationClass;?>">
The color of my text will change!
</div>
This isn't perfect code, but it does demonstrate my point.
If this is done via AJAX or Javascript (meaning the page never refreshes, you can use the same principle.
There is no way to modify your CSS with PHP
Try to learn Javascript add "movement" and other things to your web page, this language allows you to modify the style of your website after this is served by the server
Its a long way on web development but I wish you luck
i want to put variable inside css but i don't know how to do it. I have created a php file named style.css.php containing this simple example:
<?php $background = 'blue'; ?>
<style type="text/css">
body {background: <?php echo $background; ?>;}
</style>
But is this a good method? I need to create a customizable theme. The other universal stylesheets are in a normal css file.
Please help.
This question already has an answer.
By the way these link will help you to implement php inside css:
https://css-tricks.com/css-variables-with-php/
How to use PHP inside css file
How do i run PHP inside CSS
I think your approach is already good enough, I'm guessing you are including your style.css.php in the head, potentially putting a lot of CSS there, which isn't necessarily a bad thing.
You don't really have to include your CSS files if you need them on every page anyway, putting them directly into the file saves a HTTP Request but makes your file bigger - but bigger file size doesn't matter if you would load the css file anyway. This way you have even finer control over what gets loaded and what does not, which usually shouldn't be necessary.
I bought a script that is ioncube encoded. It's a file on my site that is called from a php include, but the text is HUGE, like 38px. Completely unacceptable. The vendor says there's no way to reduce this font size, it's coming from from CSS in the encoded file. Is there some kind of code I can wrap around the php include to override the style settings?
Thanks for any help.
There can be at least two ways:
on-the-fly replace of rule your want to change manyaly (preg_replace, for example)
just after the place you insert your CSS insert your own block with
.your-element-class {
font-size: 24px !important;
} inside it
I'm working with the Symfony 1.4 and I'm running into a bit of a problem using the LESS CSS preprocessor.
Let's say that I have 2 Less files with color specific variables. They are called blue.less and red.less.
Here they are:
Blue.less
#mainBorder: blue;
#pulldownBackground: blue;
Red.less
#mainBorder: red;
#pulldownBackground: red;
Now let's say that I have a layout.less file that will look something like this:
// Colored line under Nav
.main {
border: 1px solid #mainBorder;
.pullDown { background: #pullDownBackground; }
}
If I want to use one of the color variable files, I need to declare it at the top of the layout.less file like this:
#import 'red.less';
Since the #import statement has to reference a specific file, how would I be able to dynamically pass blue.less to the #import statement whenever I wanted to change the color scheme?
Would there be a way to dynamically declare which of the color specific LESS files will be passed to that import statement with PHP and the Symfony framework?
Or can this problem be solved without server-side code?
I've never used Symphony, but this should get you going in the right direction regardless of framework.
First you want to create your LESS file:
<?php
$color_scheme = "red"; // we're simplifying here for now, but this could be set via $_POST variable
/*
it would probably be a good idea to check if the file exists first before we import it.
see function: file_exists()
*/
$contents = "
#import '$color_scheme.less';
#import 'main_styles.less';
#import 'other_stuff.less';
";
file_put_contents("path/to/styles.less");
?>
Now you have a LESS file that is ready to be processed, same as if you written it by hand, but with the color scheme being easily swappable. If I were doing this with bare PHP, I would be using the exec() function to invoke commands that would be available via command line. Here's an example for invoking SASS via exec() (I've never used LESS this way, so you'll have to fill in the blanks here).
<?php
exec("sass --compile path/to/sass:path/to/public/css");
?>
If your Symphony plugin does the compilation for you without the need to use the exec/command line, then you'll probably want to do that instead.
First off, FYI: The .php file referenced below will be the index.php of a Serindipity blog, which is a very complex mess of code and files.
In my index.php file, I want to grab the query string, if one exists, from the URL and assign it to a variable (as in variable=self.location.search).
I want to then assign that variable to a single attribute of a single entry in a style.css file that is called by one of the many files Serindipity utilizes to generate the ouptput page:
body {
font-size: 10pt;
margin: 1;
background-color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;
}
I want to change only the background-color parameter of one of the many entries, shown above, to the $ value of that variable (which would be either "transparent" or null).
In the process, I need to employ logic code to determine if there is a query string at all.
If yes, make background-color=variable. If not, make background-color="#000000".
(Of course, the logic must be executed within the CSS file.)
Is this possible?
Thanks!
I'm not familiar with the engine you mentioned (Serindipity), but this should be pretty straightforward, as long as you are allowed to create and edit your own Php-scripts (which really shouldn't matter as long the engine isn't dependent on the name of the style-sheet):
Change the file-ending of the style-sheet to
.php
and the webserver will recognize it as a php-script. Set the mime-type to text/css like #Brighty wrote
header('Content-type: text/css');
and the user will never know the difference (except, of course, the file-ending being .php).
If the style-sheet having a file-ending of .php is a problem, you can always use .htaccess and some clever regex to make the user believe they are seeing a .css.
Edit: Also, if you have access to configure what file/s will be recognized as php-scripts, you can set your server to also recognize .css as a php-file (which, as far as I know wouldn't be a problem, since php will just toss any plain text encountered out to the user).
Just make sure your file is a .php file and you can just use PHP in it like so:
<?php
$colour1 = isset($variable) ? $variable : '#000';
header("Content-Type: text/css");
?>
body {
background: <?php echo $colour1; ?>
}
div {
color: <?php echo $colour1; ?>
}
Obviously this is quite flexible! Here's a link I found extending the method even more.
you can't set any variable in the css file, jquery or javascript is the best option to play with your css file.
or you will do with inline css.
You may be able to achieve this by mixing css and php code in a single file with a php extension, and setting the mime type of the file to 'text/css'.
header('Content-type: text/css');
I have done a similar thing in ColdFusion but never in php so I can't guarantee this will work.