Super simple question, which i cant find answer for some reason...
Fist time using scss.
I have app wide styling in one file, lets say typography.scss
which has, among other things colors.
/* type */
$text-light: #ffffff;
$text-light-gray: #b4b6b7;
$text-dark: #000000;
and in other file i have use like
#use "../../styles/typography";
but i dont get how i use just the values?
color: ??? //needs to be #000000
try like this:
#import "../../styles/typography"
.your-class {
color: $text-dark;
}
Also I recommend moving your colors to a _variables.scss
You need use the variable you declared, by name. Like this:
color: $text-dark
I have to add a specific id selector (#mymodule) to each CSS line. Given that there are about 20000 lines, I don't want to do this manually :).
I tried to match with regex in notepad++ using:
^((?!}|\s\s).)*$
But I get an invalid error.
Trying not to re-invent the wheel, and probably I'm not the first who wants to do this, does anyone have a working regex string, or maybe some other method to achieve this?
The easiest way is using Less/Sass that allows you to nest css selectors
You can use this online editor to generate your new CSS, just paste your CSS and wrap it with your id, compile it...and you're done!
#mymodule {
.class1 {
color: red;
}
#selector {
color: blue;
}
}
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.
div.Foo
{
background:Green;
border:1px solid Khaki;
display:none;
left:225px;
max-height:300px;
overflow-x:hidden;
overflow-y:auto;
position:absolute;
top:0;
width:230px;
z-index:99;
}
So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)
Update
#Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example
div.Foo,
div.Foo p,
div.Foo li
{
color:Green;
}
becomes
div.Foo,div.Foo p,div.Foo li
{
color:Green;
}
which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.
Ben's answer is correct but is error prone but lead me to this plugin:
https://github.com/mrmlnc/vscode-postcss-sorting
Simply add this to your settings.json after installing,
"postcssSorting.config": {
"properties-order": "alphabetical"
}
Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run
There's lot of other great config options too including how to handle comments.
I don't know of anything in visual studio, but there online tools to clean up and format css. I've used CleanCSS with success
Update:
Try this one Format CSS Online. It seems to output the lines more like you want
In fact it's much more simple and you do not have to install any plugin.
Just go File > Preferences > Keyboard Shortcuts
Then Type Sort lines ascending, then map a keybinding to that.
Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.
In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort
Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:
// Don't do this
.rule1,
.rule2 {
color: red;
}
// Do that
.rule1, .rule2 {
color: red;
}
In VSCode. Just attach a key binding to the
“Sort Lines Alphabetically” command.
File > Preferences > Keyboard Shortcuts
Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.
However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.
There's a VSCode plugin called CSS Alphabetize that should allow you to do this.
Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.
https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize
It's not a plugin and it doesn't know about CSS but it's often helpful: a spreadsheet such as Excel or Google Spreadsheets.
I often cut code, paste it into Excel, munge it a bit, and paste it back into my editor. I find this technique especially useful for quick alphabetizing.
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.