I'm trying to contain general styles/tricks in a separate mixin file which can be applied to any project when they're needed. Some of these styles require multiple elements to work together in order to work.
For example:
_mixins.scss
====================
#mixin footer_flush_bottom {
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
}
main.scss
====================
#import "mixins";
#include footer_flush_bottom;
html {
background-color: $bg;
//More stuff
}
body {
margin: 0 auto;
//More stuff
}
footer.scss
====================
#footer {
height: 40px;
}
As it is, the mixin works but the generated css separates the mixin from the main code, even when their selectors are the same. The downside to this is ugly css and larger file size when I start including more of these.
/* line 14, ../../sass/modules/_mixins.scss */
html {
height: 100%; }
/* line 18, ../../sass/modules/_mixins.scss */
body {
min-height: 100%;
position: relative; }
/* line 22, ../sass/modules/_mixins.scss */
#footer {
position: absolute;
bottom: 0; }
/* line 19, ../../sass/modules/main.scss */
html {
overflow-y: scroll; }
/* line 37, ../../sass/modules/main.scss */
body {
margin: 0 auto;
/* line 1, ../sass/modules/footer.scss */
#footer {
height: 40px;
Is there anyway I can do this so that same selectors can be merged? Like this:
/* line 19, ../../sass/modules/main.scss */
html {
height: 100%;
overflow-y: scroll; }
/* line 37, ../../sass/modules/main.scss */
body {
min-height: 100%;
position: relative;
margin: 0 auto;
/* line 1, ../sass/modules/footer.scss */
#footer {
position: absolute;
bottom: 0;
height: 40px;}
No. Sass has no way of merging selectors (this could be considered undesirable, as it would alter the ordering of the selectors).
The only thing you can really do is something like this (or write 2 separate mixins):
#mixin footer_flush_bottom {
height: 100%;
body {
min-height: 100%;
position: relative;
#content;
}
}
html {
// additional html styles
#include footer_flush_bottom {
// additional body styles
}
}
Related
Is there a way to dynamically add top in css/less? I have the following structure:
.a2a-desktop-right {
right: 0px;
.a2a_svg {
position: absolute;
right: 8px;
}
}
.a2a_svg has some animation effects on hover and needs to be absolutely positioned, however there can be n-types of this element. Each one needs a top of 40px more than the previous. Any way to accomplish this without js?
EDIT
I can't define the style inline - it's a 3rd party script that generates these elements. That's also why javascript is out of the question - I won't know when the elements are rendered, and if I did it would still take time for the new styles to be applied.
I managed to find a way to do it with less after seeing the below by edwinnwebb.
/* Define two variables as the loop limits */
#from : 0;
#to : 10;
/* Create a Parametric mixin and add a guard operation */
.loop(#index) when(#index =< #to) {
/* As the mixin is called CSS is outputted */
div:nth-child(#{index}) {
top: unit(#index * 100, px);
}
/* Interation call and operation */
.loop(#index + 1);
}
/* the mixin is called, css outputted and iterations called */
.loop(#from);
/*
## Output
div:nth-child(0) {
top: 0px;
}
div:nth-child(1) {
top: 100px;
}
div:nth-child(2) {
top: 200px;
}
div:nth-child(3) {
top: 300px;
}
div:nth-child(4) {
top: 400px;
}
div:nth-child(5) {
top: 500px;
}
div:nth-child(6) {
top: 600px;
}
div:nth-child(7) {
top: 700px;
}
div:nth-child(8) {
top: 800px;
}
div:nth-child(9) {
top: 900px;
}
div:nth-child(10) {
top: 1000px;
}
*/
Applied to my problem becomes...
#iterations: 0;
.svg-loop (#iterations) when (#iterations =< 5) {
.a2a-button.a2a-desktop-right:nth-of-type(#{iterations}) {
.a2a_svg{
top: unit((#iterations * 40) - 33, px);
}
}
.svg-loop(#iterations + 1);
}
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
My template is based on this. To keep the footer 'sticky', the following CSS rules are used:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS -------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
However, when I include a table the pagination overlaps the footer. I think this is due to the way the DOM rules work.
There is a fix using z-index:
.footer {
z-index: 4;
}
Is that the best approach?
If you take a look here + change the 'Show entries to 100' you'll see what I mean.
Using z-index on the footer is the solution.
.footer {
z-index: 2;
}
I'm kinda new to LESS, so I'm not sure if that's possible and how.
So my idea is this :
I have a main-stylesheet.less and a dozen smaller stylesheets each of which contains several versions of styling for a particular element i.e. header.less, footer.less, main-nav.less etc.
So in header.less every variant of styling is linked to a condition and when you include this LESS file in the main-stylesheet.less via this condition, just that particular chunk of code is compiled and not the other ones that are linked to other conditions.
I hope I've been thorough enough for you to best understand me.
Is this possible and how ?
Keeping it Generic
By using conditional mixins, the code in main-stylesheet.less stays generic, with only the variables changing to control what is actually compiled.
Example header.less
.header() when (#header = 1) {
#header {
your: properties;
for: header1;
}
}
.header() when (#header = 2) {
#header {
your: properties;
for: header2;
}
}
This could continue on, and similar code would be in the other footer.less files, etc.
Example main-sytlesheet.less
#import header.less;
#import main-nav.less;
#import footer.less;
/* set your variables for your conditional mixins */
#header: 1;
#main-nav: 3;
#footer: 3;
/* call the mixins */
.header();
.main-nav();
.footer();
The global variables you set will only choose the .header() mixin to generate the #header, etc. that #header variable is set to.
I think maybe your looking for a LESS mixin?
/* header.less */
.header1 () {
// including selector
.header {
position: relative;
z-index: 1001;
width: 100%;
margin: 0 0 20px;
overflow: hidden;
}
}
.header2 () {
position: relative;
z-index: 1001;
width: 50%;
margin: 20px;
}
.header3 () {
position: relative;
z-index: 1;
width: 90%;
margin: 0 0 50px;
overflow: hidden;
}
And include it like this:
/* main-stylesheet.less */
#import 'header.less';
body {
.header1();
}
You could also get smart and use one mixin:
.header (#margin: 0, #width: 100%) {
position: relative;
z-index: 1001;
width: #width;
margin: #margin;
overflow: hidden;
}
header {
.header(0 0 20px, 50%);
}
I'm trying to contain general styles/tricks in a separate mixin file which can be applied to any project when they're needed. Some of these styles require multiple elements to work together in order to work.
For example:
_mixins.scss
====================
#mixin footer_flush_bottom {
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
}
main.scss
====================
#import "mixins";
#include footer_flush_bottom;
html {
background-color: $bg;
//More stuff
}
body {
margin: 0 auto;
//More stuff
}
footer.scss
====================
#footer {
height: 40px;
}
As it is, the mixin works but the generated css separates the mixin from the main code, even when their selectors are the same. The downside to this is ugly css and larger file size when I start including more of these.
/* line 14, ../../sass/modules/_mixins.scss */
html {
height: 100%; }
/* line 18, ../../sass/modules/_mixins.scss */
body {
min-height: 100%;
position: relative; }
/* line 22, ../sass/modules/_mixins.scss */
#footer {
position: absolute;
bottom: 0; }
/* line 19, ../../sass/modules/main.scss */
html {
overflow-y: scroll; }
/* line 37, ../../sass/modules/main.scss */
body {
margin: 0 auto;
/* line 1, ../sass/modules/footer.scss */
#footer {
height: 40px;
Is there anyway I can do this so that same selectors can be merged? Like this:
/* line 19, ../../sass/modules/main.scss */
html {
height: 100%;
overflow-y: scroll; }
/* line 37, ../../sass/modules/main.scss */
body {
min-height: 100%;
position: relative;
margin: 0 auto;
/* line 1, ../sass/modules/footer.scss */
#footer {
position: absolute;
bottom: 0;
height: 40px;}
No. Sass has no way of merging selectors (this could be considered undesirable, as it would alter the ordering of the selectors).
The only thing you can really do is something like this (or write 2 separate mixins):
#mixin footer_flush_bottom {
height: 100%;
body {
min-height: 100%;
position: relative;
#content;
}
}
html {
// additional html styles
#include footer_flush_bottom {
// additional body styles
}
}