Merging selectors from mixins - css

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

dynamically add top in css?

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);
}

Doxygen; Customize header output file

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

SCSS - merging two the same selectors? [duplicate]

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
}
}

Footer issue with Twitter Bootstrap - is z-index the solution?

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;
}

How to set height of my web page in html5

I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve

Resources