TeaCSS - the obvious approach to creating styles

Introduction

Although there are not so many CSS-like languages ​​- it’s at the hearing and afloat now alone Sass and Less, I’ll start by answering the question “Why do I need another one?”.

In short, TeaCSS does not produce new entities, because this is the same CSS in which JavaScript was added as a language.

This approach has its pros and cons.
')
Pros - almost no pitfalls. The tea file is converted to JavaScript, filled with simple output commands. This JavaScript can be debugged, look in FireBug and in general its behavior is predictable. This is the obvious approach, the JS prevails on the web already, so you don’t have to learn anything new.


Cons - you still lose some of the entities of the CSS domain, such as "pixels", "percentages", etc. You work with CSS just like text. You'll have to write width: @ {100 + 200} px , not width: 100px + 200px .

TeaCSS is exactly the CSS templating or preprocessor, not a new language to learn. This is his strength and weakness.

I planned to write several articles in which with increasing complexity will be told about the language and the tasks for which it was developed.

In this (first) article, I will tell you how to incorporate TeaCSS into your development cycle and show with examples what Sass and Less cannot do, but the hero of today's article knows how.

Short tutorial

For those who use Sass and Less, you can read diagonally.

There are only 3 simple things that TeaCSS can describe. It:

1. Embedded javascript
2. Nested rules
3. Mixin (optional and may be replaced by claim 1)

Embedded javascript

During CSS processing, you can execute any JS code. It will be executed exactly as written. With this, you can declare variables, functions, do cycles to declare similar rules, generate pictures, draw auxiliary interfaces, and in general - do what your heart desires.

To execute the code is simple:

/*   */ @ var baseColor = 'red'; 

Or so:

 /*   */ @{ var baseColor = 'red'; var borderColor = darken('red',20); } 

Then inside any CSS rules you can use JS expressions.

For example:

 body { color: @baseColor; } //   ,  /*   @{}      */ body { color: @{lighten(baseColor,Math.sin(3.14)); } 

Nested rules

Allow to write compound selectors ladder.

 /* TeaCSS */ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } 

Mixins

Syntactic sugar, similar to the LESS-ovsky. Allows you to save a set of rules for use in another context with parameters.

 .my_mixin(color) { // -     my_mixin = function (color) { color: @color; } body { .my_mixin('red'); } 

For more detailed explanations refer to the website - teacss.org

How to connect to your project

It is very important to understand that teacss does not pretend to become a replacement for CSS in production, this is a development solution, so there must be both a way to turn TeaCSS into regular CSS, and a way to see what happens right in the browser.

To view everything is simple.

 <link tea="style.tea"> <script src="teacss.js"></script> 

And voila, you will see a preview of your style on the current page. In my projects I use something like.

 <? if $applicationMode=='development' ?> <link tea="style.tea"> <script src="teacss.js"></script> <? else ?> <link type="text/css" rel="stylesheet" href="style.css"> <? endif ?> 

The question remains, how to turn * .tea into * .css

In earlier versions for this was a console utility, but since TeaCSS began to support various pure browser-based chips, like Canvas, it was decided to leave this issue to the developer. You can display a simple interface to save the file and decide what to do with the received text. In general, this is part of the big concept “Your code is your IDE”, which I will discuss in future articles, but for now just add something like this to the dev version of the layout:

 <script> teacss.buildCallback(function(files){ $.post(location.href,{css:files['default.css']}); }); <? if (isset($_POST['css']) file_put_contents('your/location/style.css', $_POST['css']) ?> </script> 

Similarly, in other server languages ​​(by the way, pull requests are welcome).

Create pictures on the fly

The first and only focus in this article.

In fact, the built-in teacss Canvas is a wrapper over the browser canvas, a wrapper that allows you to use WebGL and the usual two-dimensional context for generating images.

When translating * .tea to * .css, you can save the generated image to a file. Why do you need it?

Talking about variables in CSS and giving examples of the DRY approach to development, the developers of the same LESS are cunning. Not every design can be composed of pure CSS, sites where this is achievable rather in the minority. Most of the tricky borders, backgrounds, hats, etc. also depend on these variables (basic colors, for example), so after a simple replacement of the value, you need to open Photoshop and redraw or change the graphics for the site.

With a teacss, you can make parametric graphics too (example from documentation):

 @ color1 = 'red'; @ color2 = 'blue'; body { @{ // pretty clear here, huh? var canvas = new Canvas("background.png"); canvas.replaceColors( { '#ffae00':color1, '#f7e7ba':lighten(color1,30), '#705551':color2 }); // display canvas.background('bg.png'); } } 

For a more complete understanding of the principle, I will show the generation of the background from 0. For example, a striped background. By the way, you can arrange it as a mixin and then use it in subsequent projects.

 .background_striped(size,width,color) { @{ (new Canvas(size,size)) .draw2D(function(ctx){ ctx.beginPath(); ctx.lineWidth = width; ctx.strokeStyle = color.toString(); ctx.moveTo(-size,-size); ctx.lineTo(size*2,size*2); ctx.moveTo(-size-size,-size); ctx.lineTo(size,size*2); ctx.moveTo(-size+size,-size); ctx.lineTo(size*3,size*2); ctx.stroke(); }) .background(); } } 

And here is an example of use:
teacss.org/stripes.htm

Conclusion

As it probably became clear from the previous section, teacss is not really a CSS template because gives out for output, for example, also pictures. I will say more, it can be used as a universal template engine and generate mobile interfaces, templates and scripts for it.

Just about this and about the architecture of the project itself, I will tell in the next article.

PS

I decided to write this article because in essence, I am doing things very similar at the same time to the latest Adobe project, Brackets, and to Kickstarter Light-table. But there are a few differences and it seems to me that they can be key, to tell about them, you need to start with the library, which underlies the project - a teacss. I hope to find like-minded people and assistants / partners in this largest project in Habre.