Permalink
Browse files

rename macro to has

  • Loading branch information...
ndp committed Sep 18, 2010
1 parent 756e4ef commit 80353b1a829f5d76f01f9ac570e84ff65665fc45
Showing with 42 additions and 45 deletions.
  1. +20 −6 README.markdown
  2. +2 −34 spec/core_spec.js
  3. +15 −0 spec/utils_spec.js
  4. +5 −5 src/core.js
View
@@ -60,7 +60,10 @@ Csster supports nesting of rules to keep things more concise:
ul: {
margin: 5;
li: {
- paddingLeft: 20;
+ paddingLeft: 20,
+ '&:hover': {
+ color: 'red'
+ }
}
}
}
@@ -70,10 +73,18 @@ The "li" property in this case might be a selector or might be a property name.
property names is used to identify properties right now, and otherwise it's considered a sub-selector.
(Think about this.)
+Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
+Instead of the default "any descendent" space character being inserted, no space is inserted.
+
#### Functions
-Use Javascript to write necessary functions. function/color.js contains SASS-like functions: *darken*, *lighten*, etc.
+Use Javascript to write necessary functions.
+
+function/color.js contains SASS-like functions:
+* *darken*(hex string, %) -- make color darker by given percent
+* *lighten*(hex string, %) -- make color lighter by given percent
+* *saturate*(hex string, %) -- make color more saturated by given percent. Use negative values to *desaturate*. <code>saturate(c,-100)</code> renders in grayscale.
-#### Macros
+#### Macros using "has" key
It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
that returns a hash of values, for example:
@@ -87,21 +98,24 @@ that returns a hash of values, for example:
}
</pre>
-To "mix these in", use the "macro" key:
+To "mix these in", use the "has" key:
<pre>
{
'div#featured_box': {
backgroundColor: '#394c89';
- macro: roundedCorner(5);
+ has: roundedCorner(5);
}
}
</pre>
+Multiple mix-ins can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
+
+
+
## Todo
-* Support "has"
* Support more than one Macro
* Some color math
* Fix license
View
@@ -1,17 +1,3 @@
-describe('Array#flatten', function() {
- it('should do nothing with empty array', function() {
- expect([].flatten()).toEqual([]);
- });
- it('should do nothing with flat array', function() {
- expect([1,2].flatten()).toEqual([1,2]);
- });
- it('should flatten one level', function() {
- expect([1,[2]].flatten()).toEqual([1,2]);
- });
- it('should flatten N levels', function() {
- expect([1,[2,[3,[4]]]].flatten()).toEqual([1,2,3,4]);
- });
-});
describe("Csster", function() {
@@ -121,25 +107,7 @@ describe("Csster", function() {
return {color: 'red'};
}
- it("should expand a macro property", function() {
-
- expect(Csster.formatRules({
- 'div.cls':{
- macro: roundedCorners(5),
- height: '235px'
- }
- })).toEqual("div.cls {\rheight: 235px;\r-webkit-border-radius: 5px;\r-moz-border-radius: 5px;\r}\r");
- });
- it("should expand a macros properties", function() {
-
- expect(Csster.formatRules({
- 'div.cls':{
- macros: [roundedCorners(5), red()],
- height: '235px'
- }
- })).toEqual("div.cls {\rheight: 235px;\r-webkit-border-radius: 5px;\r-moz-border-radius: 5px;\rcolor: red}\r");
- });
- it("should expand a has property", function() {
+ it("should expand a 'has' property", function() {
expect(Csster.formatRules({
'div.cls':{
@@ -148,7 +116,7 @@ describe("Csster", function() {
}
})).toEqual("div.cls {\rheight: 235px;\r-webkit-border-radius: 5px;\r-moz-border-radius: 5px;\r}\r");
});
- it("should expand a has properties as array of hashes", function() {
+ it("should expand multiple values within a 'has' properties", function() {
expect(Csster.formatRules({
'div.cls':{
View
@@ -1,3 +1,18 @@
+describe('Array#flatten', function() {
+ it('should do nothing with empty array', function() {
+ expect([].flatten()).toEqual([]);
+ });
+ it('should do nothing with flat array', function() {
+ expect([1,2].flatten()).toEqual([1,2]);
+ });
+ it('should flatten one level', function() {
+ expect([1,[2]].flatten()).toEqual([1,2]);
+ });
+ it('should flatten N levels', function() {
+ expect([1,[2,[3,[4]]]].flatten()).toEqual([1,2,3,4]);
+ });
+});
+
describe('extend', function() {
});
View
@@ -311,12 +311,12 @@ Csster.formatSelectorAndProperties = function(selector, properties) {
result += ' {\r';
// preprocess a macro, if one
- var macros = properties['macro'];
- if (macros) {
- for (var mp in macros) {
- properties[mp] = macros[mp];
+ var has = properties['has'];
+ if (has) {
+ for (var mp in has) {
+ properties[mp] = has[mp];
}
- delete properties['macro']
+ delete properties['has']
}
// ...all properties

0 comments on commit 80353b1

Please sign in to comment.