CODEWITHSUNDEEP
csssasslesscompass-sass
Howard
Howard

Reputation: 19825

Modify CSS using Less or other tools?

I have a lengthy CSS file (over 1K lines prepared by 3rd party)

e.g.

p {font-family: Arial;}

I want to have a build process that change all "font-family" under the p tag to 

p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}

Definitely I can modify the existing CSS file, but as it is lengthly and prepared by others (might update by them in the future, maintenance nightmare..), I am looking for some external build process that allow me to rewrite the CSS and produce a final CSS.

Is it possible with Less or SASS or other tools?

Upvotes: 0

Views: 139

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21234

Sass and LESS are built exactly for this purpose. But you will need to rewrite your static CSS first into a dynamic style sheet, and then it would be good if the "3rd party" also would work on the dynamic stylesheet and not on the static CSS.

If this is not possible, you will have to

  • find/replace stuff every time you get the new file from them, or
  • have your additional CSS that you call after theirs that overrides their properties (e.g. sets the font-family for all p tags to your value)

So, how does the dynamic styling work: you have some variables that you define in the beginning, that get then used throughout the file, and if you want to change something, you change a variable and the whole file gets updated. But you can also use way more fancy stuff, like mixins and guards, you can read more on it at the links I pasted at the bottom of my answer. You can prevent a lot of rewriting this way.

So, this would make sense if you plan to reuse/change the file in the future.

For a very basic illustrative example - how you could use a simple variable in LESS:

@pFontFam: "Helvetica Neue", Helvetica, Arial, sans-serif;

p {
  font-family: @pFontFam;
}

and the output CSS looks like this:

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

But you can also define a mixin, that adds the whole property and its value to a class when you call it. There are a lot of resources online that describe how to install and use this. You could start here:

Upvotes: 5

FelipeAls
FelipeAls

Reputation: 22171

As for LESS, I'd use a parametric mixin (without parameter):

You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Which would output this CSS: 

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

The reason is the value you're trying to repeat at different places (or modify in one centralized place) is a string of font names that will always be used with the same CSS property: font-family. You really don't need to repeat this property over and over. It isn't some numerical value that could be used both in margins and paddings and borders...
So it'd be like:

.fontBase () {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
    .fontBase;
}

Upvotes: 2

Related Questions