Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for complex nth-child selectors in omega() #340

Merged
merged 1 commit into from Jul 15, 2016

Conversation

Projects
None yet
4 participants
@joshuaogle
Copy link
Contributor

commented Apr 27, 2015

Fixes #334.

This improves support for complex nth-child selectors to omega(). Selectors like 3n + 1 are interpreted by Sass to 4n, which gave the omega() mixin the wrong selector unless they are given as a string. If they were given as a string, it wouldn't add the clear to the next element. There wasn't a test for the element with clear, so it didn't appear anything was wrong.

This detects if the query is a string and looks for an operator (+ or -), and does the appropriate math for the right selectors. This means doing some typecasting and trimming for queries like 2n + 1 (with spaces), so functions have been added for those as well.

This makes the mixin a little messier, so if anyone has ideas on how to simplify, please share.


@function to-number($string) {
$string: str-replace($string, " ", "");
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Apr 27, 2015

Prefer double-quoted strings

@return $result;
}

@function str-replace($string, $search, $replace: '') {

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Apr 27, 2015

Prefer double-quoted strings


context "with argument ('3n-1')" do
it "removes right margin of nth-child(3n-1)" do
expect(".omega-complex-nth-negative:nth-child(3n-1)").to have_rule("margin-right: 0")

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Apr 27, 2015

Line is too long. [91/80]

end

it "adds clear to nth-child('3n-0')" do
expect(".omega-complex-nth-negative:nth-child(3n-0)").to have_rule("clear: left")

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Apr 27, 2015

Line is too long. [87/80]


context "with argument ('3n-1')" do
it "removes right margin of nth-child(3n-1)" do
selector = ".omega-complex-nth-negative:nth-child(3n-1)";

This comment has been minimized.

Copy link
@houndci-bot

houndci-bot Apr 28, 2015

Do not use semicolons to terminate expressions.

@joshuaogle joshuaogle force-pushed the jo-complex-omega branch from a200f71 to eb4a654 Apr 28, 2015

@wardpenney

This comment has been minimized.

Copy link
Contributor

commented May 15, 2015

@joshuaogle the PR looks good. Half of me wants to remove the Omega mixin entirely. This is a lot of complexity to output two CSS rules that can just be done by hand.

@joshuaogle

This comment has been minimized.

Copy link
Contributor Author

commented May 15, 2015

@wardpenney The only way we can remove the omega mixin (that I can think of) would be to add a negative left margin to the rows like the Bootstrap grid works, or don't even worry about going edge to edge like Foundation. I don't really like either of those options, but there's still a lot we can do to make the omega mixin smarter

@whmii

This comment has been minimized.

Copy link
Member

commented Jul 6, 2016

@joshuaogle good to merge at your discretion.

@joshuaogle joshuaogle force-pushed the jo-complex-omega branch from eb4a654 to 0bd8027 Jul 15, 2016

@joshuaogle joshuaogle merged commit 0bd8027 into master Jul 15, 2016

2 checks passed

ci/circleci Your tests passed on CircleCI!
Details
hound 3 violations found.

@joshuaogle joshuaogle deleted the jo-complex-omega branch Jul 15, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.