My Complier file is like that
cd /d %~dp0
java -jar ../../../../file/css-compiler.jar --pretty-print ^
--allowed-unrecognized-property -khtml-opacity ^
../source/abc.gss ^
> ../abc.css
pause
when i am adding following line in order to detect IE Compiler giving error
<!--[if IE]>
.vidizmo-widget .result-summary {width:0px;}
<![endif]-->
then I write following line
#if (BROWSER_IE) {
.vidizmo-widget .result-summary {width:0px;}
}#else{
.vidizmo-widget .result-summary {width:30%;}
}
it doesn't generate error but i didn't find any impact on IE.
how can i detect browser using google css compiler ?
Yes, your second approach is correct
#if (BROWSER_IE) {
.vidizmo-widget .result-summary {width:0px;}
}#else{
.vidizmo-widget .result-summary {width:30%;}
}
Then you need to compile the closure template (gss) for every browser (more precisely: for every flag) you defined:
java -jar closure-stylesheets.jar example.gss > example.css
java -jar closure-stylesheets.jar --define BROWSER_IE example.gss > example.ie.css
java -jar closure-stylesheets.jar --define BROWSER_FF2 example.gss > example.ff2.css
…
Then, you need to load the appropriate css; and this is easy:
either with JavScript
or with a server-side serving based on User-Agent
Related
I am using QtCreator 3.1.1 to build a cross-platform project, and so I arranged to have different compilation kits for targeting my desktop PC and my BeagleBoneBlack (BBB).
Now I would like to define some macro in qmake project file (.pro) which are specific only for a given kit.
In other words I would like do in my .pro file something like:
if(kit == BBB)
DEFINES += MY_BBB_MACRO
elseif(kit == Desktop)
DEFINES += MY_DESKTOP_MACRO
else
DEFINES += OTHER_MACRO
Is is possible? How can I do that?
I obtained some help on Qt forum (take a look here) about this problem...
Anyway the solution consists in using qmake built-in test functions.
Basically I've added some CONFIG directive in QtCreator's project management: in the following screenshot you can see for example you can see that I've added CONFIG+=BBB in the project configuration for BBB kit; in the same way I've added CONFIG+=AM335x and CONFIG+=Desktop to AM335x and Desktop kits, respectively...
Then, in my .pro file I've added something like:
and now in my source code I can use something like #ifdef PLATFORM_BBB, #ifdef PLATFORM_AM335X and #ifdef PLATFORM_DESKTOP for differentiating the program behavior depending on compilation kit.
I found another solution.
First, add additional arguments in Projects using CONFIG+=Variable name for kit.
And in .pro file, write some code like below.
Desktop {
message("Desktop is selected")
}
RPI {
message("rpi is selected")
target.path = /home/pi
INSTALLS += target
}
If you look at the general message tab, you can see that the setting works well.
I'm running a local version of W3C Jigsaw CSS-Validator, and I know that I can feed it a file path using java -jar css-validator.jar --output=soap12 file:file.css.
But what I'd much rather do is sending the CSS directly as an option, something like this:
java -jar css-validator.jar --output=soap12 --text="body { color: red }"
This seems to work, but the output doesn't show any validation errors:
$ java -jar lib/css-validator/css-validator.jar --text="body{color:red;}"
{vextwarning=false, output=text, lang=en, warning=2, medium=all, profile=css3}
$ java -jar lib/css-validator/css-validator.jar --text="unknowntag{unknownattribute:red;}"
{vextwarning=false, output=text, lang=en, warning=2, medium=all, profile=css3}
What am I doing wrong here?
How can I compile a LESS file to output a source map file (.css.map) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc) and on any GUI-based programs?
Update: New shortest answer
The docs have been updated! As new features hit LESS, sometimes the docs lag behind a bit, so if you're looking for bleeding-edge features, you're still probably better off running lessc (see longer answer) and checking what pops out of the help text.
http://lesscss.org/usage/
Short answer
You're looking for any number of the following options from the command line:
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
As I write this I'm not aware of any GUI options that generate maps (source maps were only added to LESS in the last few months) -- sorry to not have any better news. I'm sure they'll add support in as they update over the next year.
Longer answer
If you run lessc from the command line without any parameters it will give you all the options. (In my experience, this is more up to date than their documentation, so it'll at least get you pointed in the right direction.) with all the most recent map stuff included.
The easiest combo to use for dev is --source-map-less-inline --source-map-map-inline as that will give you your source maps embedded in your output css.
If you'd like to add a separate map file, you can use --source-map which, from my.less will output my.css and my.css.map
For reference: when I run my copy (v 1.6.1 at the moment) I get
usage: lessc [option option=parameter ...] <source> [destination]
If source is set to `-' (dash or hyphen-minus), input is read from stdin.
options:
-h, --help Print help (this message) and exit.
--include-path=PATHS Set include paths. Separated by `:'. Use `;' on Windows.
-M, --depends Output a makefile import dependency list to stdout
--no-color Disable colorized output.
--no-ie-compat Disable IE compatibility checks.
--no-js Disable JavaScript in less files
-l, --lint Syntax check only (lint).
-s, --silent Suppress output of error messages.
--strict-imports Force evaluation of imports.
--insecure Allow imports from insecure https hosts.
-v, --version Print version number and exit.
-x, --compress Compress output by removing some whitespaces.
--clean-css Compress output using clean-css
--clean-option=opt:val Pass an option to clean css, using CLI arguments from
https://github.com/GoalSmashers/clean-css e.g.
--clean-option=--selectors-merge-mode:ie8
and to switch on advanced use --clean-option=--advanced
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
-rp, --rootpath=URL Set rootpath for url rewriting in relative imports and urls.
Works with or without the relative-urls option.
-ru, --relative-urls re-write relative urls to the base less file.
-sm=on|off Turn on or off strict math, where in strict mode, math
--strict-math=on|off requires brackets. This option may default to on and then
be removed in the future.
-su=on|off Allow mixed units, e.g. 1px+1em or 1px*1px which have units
--strict-units=on|off that cannot be represented.
--global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
--modify-var='VAR=VALUE' Modifies a variable already declared in the file.
-------------------------- Deprecated ----------------
-O0, -O1, -O2 Set the parser's optimization level. The lower
the number, the less nodes it will create in the
tree. This could matter for debugging, or if you
want to access the individual nodes in the tree.
--line-numbers=TYPE Outputs filename and line numbers.
TYPE can be either 'comments', which will output
the debug info within comments, 'mediaquery'
that will output the information within a fake
media query which is compatible with the SASS
format, and 'all' which will do both.
--verbose Be verbose.
If the command line doesn't suite you, Grunt is great at this type of thing. You can configure the grunt-contrib-less plugin to generate inline maps with a config like this:
less: {
options: {
sourceMap:true,
outputSourceFiles: true
},
lessFiles: {
expand: true,
flatten:false,
src: ['**/*.less'],
dest: ['dist/'],
ext: '.css',
}
},
https://github.com/gruntjs/grunt-contrib-less
Example to Create Map and CSS file from Less File
Install latest Node JS and go to command prompt and run npm install less, Now less installed successfully
Go to Command Prompt and move to less file folder that we are going to create
For e.g., I am going to change HelloWorld [Less File]
In Command prompt go to C:\Project\CSS or give the correct path in the below command.
Run following Command in Command Prompt
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
Now CSS and Map file is generated in the respective folder.
For more reference check the link : royalarun.blogspot.com
I have defined the macros of all my verilog files in one verilog file, say FabScalarParam.v
and I compile the FabScalarParam.v first in the system.do file then compile other verilog files.
But when I run "do system.do" to compile the design, it shows me the errors like this,
# ** Error: I:/programming/EDK/project_4/pcores/instruction_side_v1_00_a/hdl/verilog/StallUnit.v(6): (vlog-2163) Macro `MAX_STALL_CYCLES_LOG is undefined.
It says that some macros are not defined. Is there any method to choose the FabScalarParam.v as global file in compile list in modelsim? Due to the large number of macros, I cannot specify all the macros using the method: compile --> compile options --> verilog & system verilog --> other verilog options --> Macros.
I use modelsim 6.5, xilinx edk 12.4
This has to do with compile order. Compiler directives, which included macros are processed linearly by the compiler. See IEEE1364-2001 section 19 or IEEE1800-2009 section 22 for more detail. Make sure the macro file is the first file to that is compiled.
Manually adding the `include also works, however your compiler may give macro redefined warnings. It is recommend to encapsulate the macro definitions in a `ifdef/`ifndef. Doing so resolve the macro defined warnings. If multiple files refer to same `include then encapsulation of the macros may also improve compiler performance. See the following example.
macros.vh:
`ifndef macros_vh
// NOTE: for Verilog 1995 `ifndef is not supported use `ifdef macros_vh `else
`define macros_vh
/**************
* your macros *
* `define ... *
***************/
`endif
Then in your verilog files (*.v / *.sv)
`include "macro.vh"
/*************
* your code *
*************/
I cannot find anything useful on Internet to set global file in the compile list in modelsim. So, I just manually add `include ... in each file to solve the problem. Though it is stupid, It works fine.
If someone knows how to set the global file in the compile list in modelsim, please update it. :-) Thanks.
I had the same problem when I compiled my project with script.
At last, I figure out you can't compile your macro and verilog files in different scope.
EX:
vlog -work work macro.v
vlog -work work project.v
You have to:
vlog -work work macro.v project.v
Compiling them in one vlog command can solve the problem.
You can compile a verilog file and define the precompiler macro that will be applied for this file by adding the following option to vlog:
+define+<macro_name>[=<macro_text>]
which Same as compiler directive: `define macro_name macro_text
for example:
vlog +define+macro_name -work work project.v
This is my work around without adding `include in every files needing macros
vlog -mfcu -y <path/to/source/files> +libext+.v+.sv <source file 1> <source file 2> <... source file N>
-mfcu let vlog treats all source files in one command line as one compilation unit. If macro are defined in <source file 1>, they are visible to all following source files after it.
Is it possible to automatically add a timestamp on the compiled CSS file using SASS?
e.g.
/* CSS Compiled on: {date+time} */
...compiled css goes here...
I've checked the SASS and Compass docs but no mention of such a feature.
I don't know of any built-in SASS or Compass feature for this, but it's not too hard to add a custom Ruby function to do it. (See the section entitled "Adding Custom Functions" in the SASS reference here.)
Your file with the Ruby function would look like this (let's call it "timestamp.rb"):
module Sass::Script::Functions
def timestamp()
return Sass::Script::String.new(Time.now.to_s)
end
end
And you'd reference the new timestamp function in your SASS file like this:
/*!
* CSS Compiled on: #{timestamp()}
*/
You just need to make sure your "timestamp.rb" file is loaded when you compile the SASS, either by requiring it from a Compass config file, or by using the --require parameter with the SASS command line. When all is said and done, you should get output like the following:
/*
* CSS Compiled on: 2012-10-23 08:53:03 -0400
*/
If you are using the command line version of SCSS you can do the following:
Install sass-timestamp
gem install sass-timestamp
Use it within your code like (see documentation for more information)
/* Compiled on #{timestamp()} */
Require it on the command line
scss -r sass-timestamp ...
Output will be
/* Compiled on 2015-02-02 13:01:40 +0800 */
Note: Use #{unix_timestamp()} for a unix timestamp
I don't know if everyone needs it (cause the question is a long time answered ago),
but a simple solution is to write the timestamp/date
to a single sass/scss file as SASS variable,
import them to the location where the timestamp should be
and then let a comment in sass write them out.
Nothing to install, compile or anything else - just using scripts and sass:
1.) Write the timestamp to a separate sass file: (Here a dos-script, but you can also use any other script/language to generate the simple file):
echo $BuildTimeStamp : "%date% %time%"> _timestamp.scss
2.) Import the generated file with the timestamp:
#import '_timestamp.scss';
3.) Write the header out as comment:
/*! Automatic build at: #{$BuildTimeStamp} */
Write the timestamp before you call the original sass command
and it will also work without the need to install, build or do anything else.