Cycle not automatically being set to denominator

Question

Cycle not automatically being set to denominator

digitalmaster opened this issue 9 years ago · 9 comments

I have this weird issue where the cycle isn't being set automatically.

Without manually setting cycle:
lost-column: 1/2;

Manually setting cycle:

lost-column: 1/2;
lost-column-cycle: 2;

FYI: I'm using webpack with postcss (^6.6.3).

Answer 1 · 2016-01-08T05:36:39.000Z

Can you provide the generated CSS with that bare bones example (just for the broken one)?

Answer 2 · 2016-01-08T20:32:03.000Z

/*------------------------WORKING---------------------------*/
.basicinfo-form > .legal-name {
    *zoom: 1;
    width: 100%;
}

.basicinfo-form > .legal-name :not(input):not(textarea):not(select) {
    background-color: rgba(0,0,255,0.1);
}

.basicinfo-form > .legal-name:before {
    content: '';
    display: table;
}

.basicinfo-form > .legal-name:after {
    content: '';
    display: table;
    clear: both;
}

.basicinfo-form .text-input {
    width: calc(99.99% * 0.5 - (30px - 30px * 0.5));
}

.basicinfo-form .text-input:nth-child(n) {
    float: left;
    margin-right: 30px;
    clear: none;
}

.basicinfo-form .text-input:last-child {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(2n) {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(2n + 1) {
    clear: left;
}

/*------------------------NOT WORKING---------------------------*/

.basicinfo-form > .legal-name {
    *zoom: 1;
    width: 100%;
}

.basicinfo-form > .legal-name :not(input):not(textarea):not(select) {
    background-color: rgba(0,0,255,0.1);
}

.basicinfo-form > .legal-name:before {
    content: '';
    display: table;
}

.basicinfo-form > .legal-name:after {
    content: '';
    display: table;
    clear: both;
}

.basicinfo-form .text-input {
    width: calc(99.99% * 0.5 - (30px - 30px * 0.5));
}

.basicinfo-form .text-input:nth-child(n) {
    float: left;
    margin-right: 30px;
    clear: none;
}

.basicinfo-form .text-input:last-child {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(undefinedn) {
    margin-right: 0;
}

.basicinfo-form .text-input:nth-child(undefinedn + 1) {
    clear: left;
}

Answer 3 · 2016-01-09T00:46:56.000Z

I just noticed the undefinedn.. That's obviously the reason. Question now is just why.

Answer 4 · 2016-01-09T01:11:30.000Z

@digitalmaster What pre-processor are you using?

It looks like your pre-processor might be doing the division of lost-column: 1/2 and is making it lost-column: 0.5. Thus, lost-cycle doesn't have a denominator to reference. I've heard there might be some issues with Less regarding this.

Answer 5 · 2016-01-09T01:21:45.000Z

I just tested this with Less and got the issue you're experiencing. Less Docs

I'm going to add this to the Gotchas.

This should get you sorted nicely.

.basicinfo-form > .legal-name {
  lost-utility: clearfix;
  lost-utility: edit;
  width: 100%;
}


.basicinfo-form .text-input {
  lost-column: ~"1/2";
}