LESS.js Hello world

Categories: JavaScript; Tagged with: ; @ November 6th, 2013 23:58

What is Less?

LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functions.

Less Hello world

Style.less:

@header-color: #FFF000;
h1 {
  border: black dashed 2px;
  color: @header-color;
}

for more syntax or functions: http://lesscss.org/#reference

HTML:

<html>
<head>
    <title>Test-Liguoliang.com</title>
    <link rel="stylesheet/less" type="text/css" href="./css/src/style.less" />
    <script src="./lib/less/less-1.5.0.min.js" type="text/javascript"></script>

</head>
<body>

<h1>Header</h1>

</body>
</html>

IntelliJ Idea Less compiler plugin:

http://plugins.jetbrains.com/plugin/7059?pr=idea

The must-have plugin if you are using Less.js and IntelliJ!

what you need to do is install the plugin, and config it. after you finished, it’ll compile the .less to .css every time you modify the .less.

image

problems with font color in Firefox/Chrome

Categories: HTML&JS; Tagged with: ; @ August 6th, 2012 19:13

CSS:

.2f_subtext {
font-size: 11px;
color: #FFFFFF;
}

The font color is white in IE, there’s no problem, but in Firefox or Chrome, the font color is black.

W3C Css  validator :

In CSS1, a class name could start with a digit (“.55ft”), unless it was a dimension (“.55in”). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make “2f_subtext” a valid class, CSS2 requires the first digit to be escaped “.\32 f_subtext” [2f_subtext]

 



// Proudly powered by Apache, PHP, MySQL, WordPress, Bootstrap, etc,.