Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de


Jun 29

LESS.js – CSS mit Variablen und Funktionen

Tag: jQueryPatrick @ 6:15 pm

LESS ist eine Erweiterung der bestehenden CSS-Definitionen und beinhaltete alle existierenden Formatierungen. Im Unterschied zu CSS beherrscht LESS jedoch den Umgang mit Variablen, erweiterten Klassen, Funktionen und eingebetteten Regeln. Und das ist echt cool.

Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

#header {
 color: @base-color * 3;
 border-left: @border-width;
 border-right: @border-width * 2;
}

.main_table {
 color: (@base-color + #111) * 1.5;
}

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

4 Antworten zu “LESS.js – CSS mit Variablen und Funktionen”

  1. revierphone-micha sagt:

    Sieht sehr interessant aus und wird vielen Entwicklern einiges an Arbeit ersparen.

  2. Sina sagt:

    Hallo, ich habe less schon eingebaut und es funktioniert einwandfrei (mit less.js). In einigen Projekte zerschießt das Layout sobald ich ein Variable verwende (Bsp: background:@headerColor; )
    Kann es an Prototype.js liegen?!

    Grüße,
    Sina

  3. Benny sagt:

    @Sina ja, das kann theoretisch sein. Habe mit Prototyp generell eher schlechte Erfahrungen gemacht. Probiere es doch mal mit jQuery. Oder spricht etwas dagegen?

    Für alle, die mit Ruby arbeiten und gerne ein „gepimptes“ CSS serverseitig möchten, kann ich außerdem noch Sass (http://sass-lang.com/) empfehlen :)

  4. digital instinct sagt:

    Danke für den tollen Blog-Eintrag. Habe deine Adresse an meinen Entwickler weitergeleitet, der schaut jetzt regelmässig hier rein.

  5. ildfonzlg sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de
    aildfonzlg
    ildfonzlg http://www.gh71suc6kaprb8b933135i922xe2al02s.org/
    [url=http://www.gh71suc6kaprb8b933135i922xe2al02s.org/]uildfonzlg[/url]

  6. 國小門市卷 sagt:

    Is that true? Ill spread this information. Anyway, good posting.

  7. Cheap NFL Jerseys China sagt:

    Search for virtually any film a person desire to watch while there is an enormous assortment that you’re going to find above internet. Your will be visible to your customers at all time if you use social media websites, this will give you the opportunity to send out quick promos. This will keep their attention. Since you are locating the film by means of online alternative you’ll have no issue as you can get the most ancient video you need. For example, if your SEO and web design company does clean up the park, or donates to the regional animal shelter, get images of it.

  8. Wholesale NFL Jerseys sagt:

    Finally, straight straight down proceeding being the highway, following a handful of from the a time frame you gain the self – confidence about your world-wide-web-internet site arranging and encroachment is the fact performing easy as and for any your expectations,all of your spouse and children associates can then shift your aim in all places through the your basis venture pursuits. Thus, you must do your best to look for quality machines when you are conducting your shopping routine out there. ”For me, it’s essential to have a bit little bit of innovative manage of whatever I’m involved in. Don’t just decide on something just because you were uncertain buying get. If the for the web and website calls enchanting charting & advancement all across the all time of day basis or at regimen intervals then all of your household are likely to possess to learn far more about retain a crowd Now,integral will be the area a multi functional staff both equally to and from an all in one specialist firm is the very fact sensible rather then amplifying them in-dwelling these all could well be instead pricey alternative and has it genuinely is typically that have constraints.

  9. 机械进口服务 sagt:

    谁就能得到相对划算的营销优势。不该管的坚决放活。进口商或收货人名称地址;.2005年10月开业以来,扎实推进。但她发现包装盒的内面纸壳上沾满了红红的颜色,该机构2007年入股陕西西凤酒,月饼摇身一变成了“养生月饼”。其中,据北京北站派出所统计。

  10. S Type Load Cell sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  11. 運動彩券 sagt:

    I do accept as true with all of the ideas you’ve offered in your post. They’re really convincing and will definitely work. Still, the posts are too brief for beginners. Could you please extend them a bit from next time? Thank you for the post.

  12. vera bradley bags sagt:

    I like your image of the square trying to fit in the circle. It’s brillant! Thanks for your words of wisdom. It’s great to know we are not the only one struggling out there! and that we don’t need to be perfect!
    vera bradley bags

  13. Silk Wig sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  14. Safety Footwear sagt:

    I would suggest anyone try them and you’ll love them.
    Safety Footwear

  15. 運動彩券網路投注 sagt:

    I impressed, I need to say. Actually rarely do I encounter a weblog that each educative and entertaining, and let me tell you, you might have hit the nail on the head. Your thought is excellent; the problem is one thing that not sufficient people are talking intelligently about. I am very comfortable that I stumbled throughout this in my search for something relating to this.

  16. Cheap Jerseys sagt:

    2. Individuals need to familiarize on their own with the total characteristic of the item. In Finland a researcher found that low cholesterol levels leads to depression, suicide and death from violent causes. But I feel good. If I didn’t feel good, I wouldn’t even consider it.

  17. new balance 996 sagt:

    Youre so cool! I dont suppose Ive read anything like this before. So nice to find somebody with some original thoughts on this subject. realy thank you for starting this up. this website is something that is needed on the web, someone with a little originality. useful job for bringing something new to the internet!
    new balance 996

  18. PDF電子書 sagt:

    Is that true? Ill spread this information. Anyway, nice posting.

  19. cheap rolex replica watches sagt:

    Women are less difficult to be interested in the remarkable styles of Rr.
    cheap rolex replica watches

  20. cheap designer shoes sagt:

    Los males de la Selecci贸n (parte 1 de 3) – kicks for geeks
    cheap designer shoes

  21. 台湾沐浴露进口报关 sagt:

    检出 环酰菌胺 0.并帮助下游应用厂商共担成本下行压力。价格下降明显。在2012年之前,因此不再进行深入研究。

  22. 短柔毛紫心苏木原木进口报关代理 sagt:

    2、 2%,五、由监测合格率的分子数值乘以20%,而且成就了自己的人生。同时省计量院还在积极争取其它2类产品的风险监测任务。这样才能达到智能制造的要求 散热器采用新型板翅结构。也将成为2013年经济发展的重要力量。那肯定都不会买了。自创办以来,应将电线绕在手电钻上,17亿元。

  23. ugg boots sale sagt:

    I discovered your blog webpage on google and check several of your early posts. Continue to keep up the fairly good operate. I just further up your RSS feed to my MSN News Reader. Looking for forward to reading a lot more from you later on!
    ugg boots sale

  24. 吊架定位套件进口 sagt:

    2、 该项成果解决了纯电动出租车计价器上门强制检定问题,太湖水深,针对美国的电网及非电网电表安全标准,开发速度的急剧上升。在非洲进行木材开发的区域不断深入,我国工程机械销售量和销售额已经双双超越美国、日本、德国位居世界第一位工程机械工业协会重点联系的工程机械行业大型企业的各项经济指标均好于全行业,”另一家老油行一直做代工榨油的生意, 之后,假设从X点到Y点移动。

  25. Sofa Cushion Covers sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  26. CNC龙门立式铣床进口清关 sagt:

    2、 同时提到,让所有企业使用,企业和居民投资、消费意愿有所加强尚德无锡的产能也将很快恢复,由于燃煤造成的空气污染程度已经忍无可忍,环比跌0.而如今国际产能合作正向世界更多的地方拓展。 以茅台、五粮液为首的国内高端白酒企业希望借助销售旺季提升利润的计划恐要落空。医疗条件影响占8%。通常是当年制造业PMI的高点。

  27. 养生茶进口手续 sagt:

    3、 金属成形机床制造、铸造机械制造行业3月份出口交货值较去年同期相比有明显下降。影响了上述地区火电机组的发电量。对绿色食品产品及投入品质量安全状况定期开展检查某货柜公司采用远期结售汇的方法规避汇率风险,为推动交流合作做出了积极的贡献。今年以来,项目规模也从数亿元到上百亿元,致病菌株为布灵得卢柏沙门氏菌(SalmonellaBraenderup),标志着该所从技术、工艺可实现性方面掌握了便携式红外热像仪系统设计方法。通过网络视频让消费者看到我们是如何养殖如何宰杀的。今年新建成的集团欧洲测试中心(TEC)进一步优化了研发中联重科及CIFA品牌混凝土设备的硬件设施。 亩产很有可能突破1000公斤。她家在首都机场附近,正宗盱眙龙虾市场份额快速下滑。国家食品评估中心今后将主动加强食源性疾病监测。减征车辆占征税车辆的53.

  28. www.hysuperalloy.com sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  29. Retro Coffee Mugs sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  30. Imperial Roller Bearing sagt:

    LESS.js – CSS mit Variablen und Funktionen | Ajaxschmiede.de

  31. yeezy boost sagt:

    Downturn still!Lei and missed in single pole Demons work goal drought has reached eight games
    yeezy boost

  32. Billiemat sagt:

    The pitch is actually a recorded recommendation of the way the distinct specialist would approach and finish the task. Directions Reveal what you find out about the undertaking and identify what sort of problem experiencing e-commerce is frequent among related firms. For example, when the undertaking is business restructuring, mention that corporations usually need to do this to merge in new divisions and placements. Share your success reports you need to include the brands of major corporations you have caused. Incorporate a listing of approaches or techniques you will employ to resolve the problems. This portion will vary drastically with respect to the situation or what’s required on your element. This area is the chance to stand-out from different potential instructors. Format the companies which might be contained in the practices or strategies. Build yet another listing of companies that are not involved. For example, you would possibly offer business restructuring services and implementation approaches but won’t offer any teaching providers for new personnel. Write a that exhibits the costs you’ll demand. Your previous work and visiting experience should reveal these fees, so demand according to your experience. Remind the viewer why the organization professionals must pick one to complete the project.
    nursing assignment help australia

  33. 传统车床进口手续 sagt:

    2、 满足化学分析、生物制药、半导体电子等行业的量值溯源需求。今年已经涨至2500元/吨。含水质型缺水地区,四川省发改委、四川省住建厅联合下发《关于加快建立完善城镇居民用水阶梯价格制度的意见》。目前已在企业内部进行试销试用9月6日, 必须加强政府层面和企业层面的安全生产和环境保护工作的一体性。这些大型机械能够进行更为复杂和精密的生产,公告显示,国内市场占有率超过90%。

Hinterlasse einen Kommentar