Parsing Specific CSS with Regex

Question

I'm struggling to come up right regex to solve my problem. I need to parse the variables and their values out of this Sass file. Variables always start with $ and end with :, and their values begin after the : and end with ;, much like CSS.

I'm using .Net's regex parser, and testing against this useful regex tool: http://derekslager.com/blog/posts/2007/09/a-better-dotnet-regular-expression-tester.ashx

I'm able to find the variables just fine with this match string

\$[\w\d-]*:

However, how can I find the matching value pair and not pick up the false positives from the other css, such as "10px"

/*
Theme Name:   Huff
*/

// Particle Imports
@import "blueprint";

// Blueprint Variables
$blueprint_grid_margin: 10px;

// Site Specific Styles
$primary-color: #a1bfc2;
$link-color: #AFBDD2;

html {
  font-smooth: always;
}


body.bp {
  @include ui;
  overflow-x: hidden;
  background-color: $secondary-color;
}

Just use an existing CSS parser?

user166390
– user166390

2011-07-20 04:15:01 +00:00
Commented Jul 20, 2011 at 4:15 — user166390
– user166390, Commented Jul 20, 2011 at 4:15

Paul · Accepted Answer · 2011-07-20 04:19:44Z

2

You want to use groups like this.

\$([\w\d-]*):\s*(.*)?\s*;

Then match all and group 1 has the name while group 2 has the value for each match.

answered Jul 20, 2011 at 4:19

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

richardtallent · Accepted Answer · 2011-07-20 15:17:55Z

0

Try:

(\$[\w\d-]*):\s*([^;]+);

$1 will contain the variable name, $2 will contain the value. The value will include any quotes, whitespace, etc., other than whitespace that is trimmed directly after the ":".

edited Jul 20, 2011 at 15:17

answered Jul 20, 2011 at 4:18

richardtallent

35.5k14 gold badges87 silver badges126 bronze badges

3 Comments

Lucas Over a year ago

When I run it against derekslager.com/blog/posts/2007/09/… I get 0 matches.

Paul Over a year ago

You need a * instead of a ? for the [\w\d-] class

richardtallent Over a year ago

I pasted from the wrong clipboard buffer, fixed... but looks like I'm too late.

Collectives™ on Stack Overflow

Parsing Specific CSS with Regex

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related