I was wondering if there was also any plans for adding SASS like logic to this module? That would be pretty awesome, but this is a great start.

Sincerely,
Rene

Comments

rhache’s picture

rhache commented

Just in case you don't know what SASS is, you can see it here: http://sass-lang.com/

While CSS dry is very good and has lots of potential, If it had some of some additional SASS features it would truly be awesome.

Thanks,
Rene

allain’s picture

allain commented

Thank you for your thoughts rhache.

I agree that SASS in an interesting approach. I'm hesitant to change the syntax so greatly that it'd confuse the beginner CSS dev.

As far as Sass's mixin functionality goes, it's powerful, but I'm not sure it's the right approach. If two screen elements were so similar as to require its use, then they are probably semantically related and should require the introduction of a CSS class.

I may just not be understanding it fully though. So take what I say with a grain of salt.

Hugo Wetterberg’s picture

Hugo Wetterberg commented

Which features from SASS do you miss the most?

I looked at different libraries, classes and snippets when I started with cssdry. SASS was one of them, but I preferred the way Allain more or less preserved the CSS syntax, which makes the learning curve a lot less steep.

rhache’s picture

rhache commented

Hi Hugo,

Just letting you know that I will review SASS over the weekend to fully answer your question.

Thanks,
Rene

rhache’s picture

rhache commented

Hi Hugo,

I've reviewed both xCSS and SASS and I agree that not every feature is really necessary. But there is one feature from SASS that I think is extremely powerful. Certainly would be a big time saver in my workflow.

CSS Properties Presets Pattern

One of the nice features about SASS is something called Mixins and Arguments (http://sass-lang.com/tutorial.html). I'll use a scenario that I'm always encountering to illustrate. I often use CSS image replacement and here is what the code typically looks like:

.replace {
	background: url(images/replace.jpg);
	display: block;
	height: 0 !important;
	overflow: hidden !important;
	padding-top: 20px;
	width: 50px;
}

These properties are always the same:

.replace {
	display: block;
	height: 0 !important;
	overflow: hidden !important;
}

And these properties always vary:

.replace {
	background: url(images/replace.jpg);
	padding-top: 20px;
	width: 50px;
}

What would be nice is some way, with CSS dry, to create some kind of "preset" pattern, that would include all of the desired CSS properties, but with the ability to pass in variables for the stuff that changes. In a way, not unlike a PHP function. So in this example, let's say that we could create a "preset" at the top of my CSS file:

!image_replace [
	background: url(images/#image);
	display: block;
	height: 0 !important;
	overflow: hidden !important;
	padding-top: #padding;
	width: #width;
]

Further in my CSS file, when I need to use this preset, I could do something like 

.replace {
        !image_replace (replace.jpg, 20px, 50px);
        color: red;
}

With the rendered code being:

.replace {
	background: url(images/replace.jpg);
	display: block;
	height: 0 !important;
	overflow: hidden !important;
	padding-top: 20px;
	width: 50px;
color: red
}

For me and my team, there are many patterns in the properties used in a CSS rule. Avoiding repetition would be very helpful.

Sincerely,
Rene