More complicated less file

test.less

@import url('https://fonts.googleapis.com/css?family=Open+Sans:800');

/////////////////////////////////////////////////////////////////////////////
// Settings
//
// Compile at http://less2css.org/

// For global stylesheet post-id is 0
// Otherwise enter the post id here.
@debug: 1;
@post-id: -1;

// Sections
@primary-color: #dcdcdc;
@secondary-color: #f2f2f2;

// Head
@accent-primary-color: #6b1214;
@accent-secondary-color: #542122;
@accent-foreground-color: #ffffff;

// Project-Header
@triangle-width: 80px;
@left-side-width: 270px;
@right-side-width: 140px;
@header-height: 300px;

// Transitions
@transition-time: .5s;

//
/////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////
// Colors

.page-template-project-actual() {
    
}

.page-template-project-actual() when (@post-id > 0), (@post-id = -1), (@debug > 1) {
    /////////////////////////////////////////////////////////////////////////////
    // Global Section Layout

    .project-section:nth-child(2n) {
        background-color: @secondary-color;
        
        h2 {
            color: @primary-color;
        }
    }
    
    .project-section:nth-child(2n+1) {
        background-color: @primary-color;
        
        h2 {
            color: @secondary-color;
        }
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // Description Section
    .project-section.description {
        .head {
            #render {
                height: @header-height;
            }

            .data {
                @media-data-left-max-width: (@triangle-width+@left-side-width);
                @media-data-right-max-width: (@right-side-width+@media-data-left-max-width);
                height: @header-height;
                color: @accent-foreground-color;
                    
                .triangle-mod(@side) {
                    @{side}: -1*@triangle-width;
                }

                &-left {
                    background-color: @accent-primary-color;
                    // For content positioning
                    width: @left-side-width;
                    .data-content {
                        width: @left-side-width;
                        
                        &::selection, & *::selection {
                            background-color: fadeout(@accent-secondary-color, 20%) !important;
                        }
                        &::-moz-selection, & *::-moz-selection {
                            background-color: fadeout(@accent-secondary-color, 20%) !important;
                        }
                    }
                    
                    &::after {
                        .triangle-mod(right);
                        border-color: @accent-primary-color transparent transparent transparent;
                        border-width: @header-height @triangle-width 0 0;
                    }
                    @media (max-width: (@media-data-left-max-width+30px)) {
                        
                        &::after {
                            display: none;
                        }
                        
                        & {
                            max-width: @media-data-left-max-width;
                            width: 100%;
                        }
                        
                        .data-content {
                            width: 100%;
                            text-align: center;                    

                        }
                    }
                }
                
                &-right {
                    background-color: @accent-secondary-color;
                    width: @right-side-width;
                    .data-content {
                        width: @right-side-width;
        
                        &::-moz-selection, & *::selection {
                            background-color: fadeout(@accent-primary-color, 20%) !important;
                        }
                        &::-moz-selection, & *::-moz-selection {
                            background-color: fadeout(@accent-primary-color, 20%) !important;
                        }
                    }
                    
                    &::before {
                        .triangle-mod(left);
                        border-color: transparent transparent @accent-secondary-color transparent;
                        border-width: 0 0 @header-height @triangle-width;
                        
                    }
                    @media (max-width: (@media-data-right-max-width+40px)) {
                        &, &::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.page-template-project when (@post-id = 0), (@debug = 1), (@debug > 2) {
    // Everything is put into this selector to ensure only Project-Page-Templates are affected by this change.
    
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    
    /////////////////////////////////////////////////////////////////////////////
    // Basic Mixins
    .transition-mixin(@mode: all) {
        transition: @mode @transition-time;
        -webkit-transition: @mode @transition-time;
    }
    
    .clearfix-mixin() {
        &::after {
            display: block;
            content: ' ';
            font-size: 1pt;
            visibility: hidden;
            clear: both;
            
            width: 0;
            height: 0;
        }
    }
    
    .noselect-mixin() {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none;   /* Chrome/Safari/Opera */
         -khtml-user-select: none;   /* Konqueror */
           -moz-user-select: none;   /* Firefox */
            -ms-user-select: none;   /* Internet Explorer/Edge */
                user-select: none;   /* Non-prefixed version, currently
                                        not supported by any browser */
        
        cursor: default;
        
        &::selection {
            background: transparent;
        }
        &::-moz-selection {
            background: transparent;
        }
    }
    
    .extrabold {
        font-family: "Open Sans";
        font-weight: 800;   
    }

    /////////////////////////////////////////////////////////////////////////////
    // Basic Section Layout
    .project-section {
        width: 100%;
    }
    
    .page-title-single {
        display: none;
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // Global Section Layout
    .project-section {
        position: relative;
        overflow: hidden;
        
        h2 {
            .transition-mixin();
            .noselect-mixin();
            .extrabold();
            
            position: absolute;
            
            z-index: 0;
            margin: 0;
            text-transform: uppercase;
            
            font-size: 40pt;
            bottom: -17px;
            right: -5px;
            
            .smallest() {
                font-size: 20pt !important;
                bottom: -7px !important;
                right: 0;
            }
            
            .two-sizes() {
                @media (max-width: 550px) {
                    & {
                        .smallest();
                    }
                }
            }
            
            // Firefox only supports two sizes.
            @-moz-document url-prefix() {
                .two-sizes();
            }
            
            // Internet Explorer only supports two sizes.
            @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
                .two-sizes();
            }
            
            ///
            // Everything else
            ///
            @media (max-width: 500px) {
                font-size: 30pt;
                bottom: -11px;
                right: -2px;
            }
            
            @media (max-width: 400px) {
                .smallest();
            }
            
        }
        
        .section-content {
            position: relative;
            z-index: 1;
            margin: 2em;
            
            text-align: justify;
            
            .clearfix-mixin();
            
            p:last-child {
                margin-bottom: 0;
            }
        }
    }
    
    .project-section:last-child {
        margin-bottom: 10px;
    }
    /////////////////////////////////////////////////////////////////////////////
    // Description Section
    .project-section.description {
        .head {
            position: relative;

            #render {
                .noselect-mixin();
                display: block;
                max-width: none;
            }

            .data {
                position: absolute;
                top: 0;
                
                display: flex;
                align-items: center;
                
                
                .data-content {
                    float: left;
                    .clearfix-mixin();
                    
                    & > div {
                        display: inline-block;
                        text-align: center;
                    }
                }
                
                .triangle() {
                    position: absolute;
                    top: 0;
                    content: ' ';
                    width: 0;
                    height: 0;
                    border-style: solid;
                    
                    // To create a better anti-aliasing
                    -webkit-transform:rotate(360deg);
                }
                
                &-left {
                    // For positioning
                    left: 0;
                    z-index: 2;
                    
                    
                    &::after {
                        .triangle();
                        z-index: 2;
                    }
                    
                    .data-content {
                        text-align: right;
                    }
                }
                
                &-right {
                    // For positioning
                    right: 0;
                    z-index: 1;
                    
                    &::before {
                        .triangle();
                        z-index: 1;
                    }
                }
            }
        }
    }
    
    
    /////////////////////////////////////////////////////////////////////////////
    // Information Section
    .project-section.information {
        
        
        .information-section {
            .transition-mixin();
            
            width: 50%;
            float: left;
               
            @media (max-width: 750px) {
                width: 100%;
                margin-bottom: 2em;
            }
        }
        
        dl {
            .transition-mixin(width);
            
            ul {
                .transition-mixin();
                
                margin: 0;
                width: 100%;
                
                display: inline-flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                @media (max-width: 350px) {
                    justify-content: flex-end;
                }
                
                & > li {
                    display: inline-block;
                    margin: 0;
                    text-align: left;
                    
                    @media (max-width: 350px) {
                        & {
                            display: block;
                            width: 100%;
                            text-align: right;
                        }
                    }
                    
                    &:not(:last-child)::after {
                        content: ",\00a0";

                        @media (max-width: 350px) {
                            & {
                                display: none;
                            }
                        }
                    }
                }
            }
            
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            
            & > dt, & > dd {
                display: block;
                margin: 0;
                width: 50%;
                flex-grow: 1;
            }
            
            @media (max-width: 350px) {
                & > dd {
                    text-align: right;
                }
            }
        } 
    }
}


/////////////////////////////////////////////////
// Post with post-id
.page-template-mixin(0) {
    .page-template-project {
        .page-template-project-actual();
    }
}

.page-template-mixin(-1) {
    .page-template-project {
        .page-template-project-actual();
    }
}


.page-template-mixin(@pid) when (@pid > 0) {
    .page-id-@{pid} {
        .page-template-project-actual();
    }
}

.page-template-mixin(@post-id);