i am kinda new to LESS, but already can see it's huge power of building huge design frameworks / systems.
I'll try to reduce my question as simple as i can, and hopefully i will got lucky with some help!
So, let's say i have build Framework (something like Bootstrap 3), that have a lot of own components, which have their own rules, variables to base etc. And than i have theme which of course can overwrite those variables to change style.
But what if i need to add some specific rules, which haven't been presented before?
// FRAMEWORK
#btn-font-size: 12px;
#btn-line-height: 1;
#btn-border: 3px;
.some-component .menu > .btn {
font-size: #btn-font-size;
line-height: #btn-line-height;
border: #btn-border solid transparent;
}
// HERE STARTS MY THEME
#btn-font-size: 16px;
#btn-border: 6px;
.some-component .menu > .btn {
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
And you would ask, so what's the problem here? You should just get what you want with this approach.
But problem lays in my intention to build optimized code, which would be lot less in size, more readable, logical and won't ruin some of dependencies (so for some complex components i won't have to do some additional edits, just to add few things).
In plain simple words, i want it to compile like that:
// FRAMEWORK
.some-component .menu > .btn {
font-size: 16px;
line-height: 1;
border: 6px solid transparent;
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
So the idea is to extend framework, not to overwrite classes.
To do so i was trying all kinds of mixins, extends, variables with rulsets etc, which ain't seem to help or to be enough specific.
Any ideas would be greatly appreciated, because there seem to be no native LESS solution, but maybe some tricks?)
Also see: How to keep duplicate properties in compiled CSS file when use LESS?
Since Less v2 you should use the Less Clean CSS plugin to compress the css output from Less using clean-css.
Clean-css will merge your properties automatically.
Compiling your code with lessc --clean-css code.less outputs:
.some-component .menu>.btn{font-size:16px;line-height:1;border:6px solid transparent;margin-bottom:12px;letter-spacing:.3px;background:FFFFFF}
Related
I'm trying to modify my website based on a CMS which relies mostly on Bootstrap. I saw that after compiling sass files, in the compiled CSS I have both the default css selectors and the overridden ones. For example:
template.css?d544b92…:12881
a {
color: #1d60a1;
text-decoration: none;
background-color: transparent;
}
template.css?d544b92…:264
a {
color: #1d60a1;
text-decoration: none;
background-color: transparent;
}
The overridden ones are used, as expected but, though, having both in the compiled file makes it much larger. If someone could give me a little help I would really appreciate it. This is the normal behavior of bootstrap( v4) or am I doing something wrong?
So I made a small change on the page (gesher-jds.org/giving):
Donate Now, Pay Later
to
Donate Now, Pay Later
and now the design of the right calculator has changed (more like the button as I see). How do I fix it? Both of them looked the same (besides the text). I tried to add the code below to the CSS but it still didn't work. What I'm doing wrong?
CSS
a#payLater {
background: #60426c;
width: 100%;
display: inline-block;
margin-top: 20px;
padding: 10px;
text-align: center;
color: #fff !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-decoration: none !important;
}
If you apply the styling in the dev tools it works like expected. The reason it does not work in your working environment is probably because your styles are overwritten by different styles. Check the dev tools to see which styles are applied
Potential fixes:
1) Tidy up the "!important" rules.
2) Build stronger selectors -> keyword to look for knowledge [CSS Specificity]
If you set !important in one CSS rule, it'll become hard to overwrite that because !important = 1000 Specificity points so the rule is really strong
One of the things I find hard to work with in CSS is how rules mix layout (ie: position, sizing) and look and feel (color, shadows, fonts, etc.).
We're working in a 'reskin' project, where we want to keep the layout of our solution, but change the look and feel. To this end I'm thinking of splitting the current styles in two: one stylesheet for layout and the other for skin, and then replace the latter with the new, reskinned one.
Just to illustrate my point. A current CSS rule could look like this:
Styles.css:
.my-class {
/* layout rules */
width: 100px;
height: 50px;
float: left;
/* look and feel rules */
border: 1px solid red;
font-weight: bold;
}
My idea would be to split this into 2 individual rules, in 2 files:
Layout.css:
.my-class {
width: 100px;
height: 50px;
float: left;
}
Skin.css: (could be replaced with a different 'skin' file)
.my-class {
border: 1px solid red;
font-weight: bold;
}
Is there any reason why this would not work? Does this have any drawbacks (other than the increased page load time?)
If you have a clear way of separating the CSS you can do it this way. In our company it is separated the same way, you just have to pay attention when adding new CSS so you don't mix it up.
There is no increase in page load time, when you use PHP to merge the files together and minimize it when the user visits your website.
Check out this link, there is an explanation on how to combine and minify CSS with PHP.
Bootstrap docs says about scaffolding and mixins, I couldn't understand those correctly - what they meant by scaffolding. I googled about scaffolding in css but I didn't get a good idea from any links. Also I could find some pages about mixins the are saying all differently such as mixins is class with combinations of methods from other classes, mixins are frame work and etc. But didn't get a complete idea about what is mixin, is it a concept or framework. Can any one help me?
Mixins basically acts as vaiables in CSS Preprocessors, like LESS. if you write mixin you can use it n number of time anywhere in you dynamic stylesheet.
Consider this example:
.RoundBorders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.RoundBorders;
}
If we write this in our Dynamic stylesheet it will result in:
#menu {
color: gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
you can use .RoundBorders mixin in you Class or id anywhere. It makes you task simple, you need not to write those property again if you mention this mixin.
I'm going to use version control first time and I read somewhere that Single line CSS is not a good idea for version control
.footer li h3 { margin: 0 0 6px; font-weight: bold; display: inline; color: #e92e2e; }
.footer li h3 a { font-weight: normal; font-size: 1em; color: #e92e2e; }
Which format you would prefer?
Is this below formatting good to use with version control
.footer li h3 {
margin: 0 0 6px;
font-weight: bold;
display: inline;
color: #e92e2e; }
.footer li h3 a {
font-weight: normal;
font-size: 1em;
color: #e92e2e; }
From a standpoint of readability, Yes, the formatting you show makes more sense on multiple-lines because you'll be able to easily see the difference between 2 versions if a new attribute is added.
If you're working with other people on the same code, readability is the #1 most important thing you should focus on in your code (aside from making the code work, of course). A close second is using comments EVERYWHERE. This is just my opinion, of course some people might prefer comments over readability. Even if you're not working with anybody else, it's still very important to write readable code, in case another developer takes over the project in the future.
To answer your question, I prefer the second format, and I guess that most programmers would agree.
In Git you can easily do a word diff and quickly find changes within a line.
What you should really be looking at is making sure the CSS is readable. Use the format that your team is comfortable with. Make sure everyone does the same. See what the CSS community does. I don't think a version control system should be the reason you choose a format.
And of course, if you want compressed / minified CSS ( which is not exacly what you are asking ), it has to be part of build process and the file checked in should not be minified