im trying to streamline my css creation by using LESS. so far so good, however I came accross a problem, my code looks like so:
#content {
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
}
now i also want to apply font-weight:normal; to both the h1 and h2, how would i do this without having it in every rule?
h1, h2
{
font-weight:normal;
}
Try Like this
#content {
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
h1, h2
{
font-weight:normal;
}
}
#content {
font-weight:normal;
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
}
Sometimes it helps. Not in all situations actually.
Related
Ok so this may be a very simple/obvious question, so I apologize if its a dumb question but didnt know where else to ask. But when using CSS and media queries for a responsive layout, should I re-use CSS code inside the media queries? For example:
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
}
Or is this the proper method?
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
}
}
And with grouping css properties with regards to breakpoints. Should I group all CSS properties for each breakpoint? Or just do it as needed? For example:
First method
h1 {
font-size:14px;
margin:0;
padding:0;
}
h2 {
font-size:12px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
h1 {
font-size:10px;
margin:0;
padding:0;
}
}
//Other CSS properties for this page/site
#page-footer .footer-bot {
background-color:#24262b;
font-family:'PT Sans',sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:10px;
color:#adadad;
letter-spacing:.3px;
line-height:18px;
padding-top:5px;
padding-bottom:5px;
}
#media (min-width:768px) {
#page-footer .footer-bot {
line-height:25px;
padding-top:0;
padding-bottom:0;
}
}
Or in the second method, wait till the end of the CSS script and do all the breakpoint changes at the very end in one group for each breakpoint I want to use?
h1 {
font-size:14px;
margin:0;
padding:0;
}
h2 {
font-size:12px;
margin:0;
padding:0;
}
#page-footer .footer-bot {
background-color:#24262b;
font-family:'PT Sans',sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:10px;
color:#adadad;
letter-spacing:.3px;
line-height:18px;
padding-top:5px;
padding-bottom:5px;
}
//Other CSS properties for this page/site
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
h1 {
font-size:10px;
margin:0;
padding:0;
}
#page-footer .footer-bot {
line-height:25px;
padding-top:0;
padding-bottom:0;
}
}
This is the right method to use media query breakpoints.
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
}
}
Only add that code which you want to make changes in breakpoints. No need to repeat same code in media query.
About grouping CSS you can use both the method. If you have used First method your code will be so long. So, my suggestion is you should go for second method
This is my site. "www.silenttunes.net". I'm able to customize the CSS of all the elements on my page, except for one. "View all events". I do not know why. Can someone please help. Below I've mentioned all the combinations I've tried.
#aside p.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
p.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
.tribe-events-widget-link {
font-size:12px;
font-weight:100;
}
When inspecting your document with Chrome Developer Tools we see the following rules applied on your document.
.tribe-events-adv-list-widget .tribe-events-widget-link a,
.tribe-events-back a,
.tribe-events-list-widget .tribe-events-widget-link a,
ul.tribe-events-sub-nav a {
font-size: 15px;
font-weight: 700;
}
Solution: Add a more specific CSS rule like this:
aside.tribe-events-list-widget .tribe-events-widget-link a {
font-size: 12px;
font-weight:100;
}
Note: Adding !important behind a CSS rule also increases specifity. But it's suggested using this method only if there is no other possibility
tribe-events-list-widget .tribe-events-widget-link a {
font-size: 12px !important;
font-weight:100 !important;
}
I have a css file. In my rails project I could something like this in my css file
.ls-brighter {
font-weight:bold;
font-size:12px;
background-color: #FF6600;
padding: 1%;
font-style:italic;
& > span {
color:red;
font-size:1.6rem;
}
}
but if i try it in AngularJS css file, it always returns a lexical error.
How are CSS selectors used in AngularJS?
.ls-brighter {
font-weight:bold;
font-size:12px;
background-color: #FF6600;
padding: 1%;
font-style:italic;
& > span {
color:red;
font-size:1.6rem;
}
}
This is not CSS, this is Sass. & and nesting are not used in CSS.
Try this CSS version :
.ls-brighter {
font-weight:bold;
font-size:12px;
background-color: #FF6600;
padding: 1%;
font-style:italic;
}
.ls-brighter > span {
color:red;
font-size:1.6rem;
}
Is something like this possible?
.imgbox:hover{ .ui-resizable-se { /*some style */ } }
Or a conceptual equivalent?
Basically, only when an element of a certain class is hovered over, then some element within that class should change some style.
You can do this:
.imgbox:hover .ui-resizable-se { /*some style */ }
The same can be generated by LESS or SASS.
Sure that would be :
.imgbox:hover .ui-resizable-se { /*some style */ }
No, CSS does not allow nesting. You'd have to write it like this:
.imgbox:hover .ui-resizable-se { /*some style */ }
However, there are various CSS preprocessors available which convert something like this in valid CSS. The most popular ones are LESS and SASS/SCSS.
Not with plain CSS but you can with a CSS preprocessor like Sass:
http://sass-lang.com/
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Generates:
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
So I have this bit of Less
#footer {
ul {
// stuff
}
li {
// stuff
}
}
everything is contained nicely within #footer, but say I want to prefix #footer. How would I prefix footer with a class like .ie6 or .ie7, but within the less "closure" of #footer?
for example, I want to do this (observe pseudo syntax >.ie6, >.ie7) :
#footer {
<.ie6, <.ie7 {
// ie6/7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
and have it generate this:
.ie6 #footer,
.ie7 #footer {}
#footer {}
#footer ul {}
#footer li {}
Any idea how to accomplish this with Less?
I think this might be of interest to you: https://github.com/cloudhead/less.js/pull/268#issuecomment-1207479
What you want to do isn't possible yet in the master less.js. But a guy, James Foster, forked it and added this feature.
Example:
#box {
#other-box {
margin: 10px 0 0;
.ie7 & {
margin: 5px 0 0;
}
}
}
I don't believe it's possible to place the class before the #footer, unless you wrapped everything in .ie6/7 instead of #footer
LESS website shows the following example:
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
Which I think is the only way to achieve similar to what you want, so:
#footer {
.ie6{
// ie6 stuff
}
.ie7{
//ie7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
Would generate with the classes after the ID, I can't seem to find a way to achieve what you want without nesting everything inside the .ie6/7