csslessless-mixins

Less lighten, darken, and spin only work sometimes

The issue

I'm a newbie to LESS, and we just learned some basics about parametric mixins in my Intermediate CSS & Preprocessors course. I'm working on my project website, and loving what LESS can do, but it isn't always working the I want it to.

For instance, around line 143 I'm setting the nav background color like this:

background-color: lighten(@color5, 50%);

@color5 is defined previously in an imported palette.less file as a dark purple. The background color of the nav element is a lavender color as expected, showing me that the lighten() function itself is working.

However, further down the file, in the media query for "desktop" displays (I'm using mobile-first methodology) I set the nav unvisited link color like this:

color: lighten(@color5, 75%);

I expected this assignment to output an even lighter shade of lavender, but instead, it just displays white (#ffffff). I double checked to make sure that the color wasn't just a super-light shade of purple -- nope. It is white.

In the same media query, I also am setting the link hover color to a different hue using the spin() method. However, it is not working either, and my hover color is being translated as white. Makes no sense.

My code

Here are some snippets of my code, but I'm not sure that SE snippets will work with LESS. Or I posted it at CodePen here:

CodePen | CAS215 - Wk8 - MobileFirstResponsive

style.less

/*

Assignment: CAS 215 - Module 8 Lecture Assignment
File Name: style.less
Date: 11/17/16
Programmer: Eric Hepperle

*/

@import 'palette.less';
@import 'mixins.less';

/* /END PARAMETRIC MIXINS */

/* MOBILE STYLESHEET ------------------------- */

/* UNIVERSAL SELECTOR */
* {
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    background-color: @lightColor;
    color: @darkColor;
    a {
        &:link {
            color: @color5;
            font-weight: bold;
        }
        &:visited {
            color: @color4;
            font-weight: normal;
        }
        &:hover {
            /* nothing yet */
        }
    }
}

/* SECTION SPACING */
main, header, footer, nav {
    padding: 1em;
}

/* LISTS */
ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

li {
    line-height: 1.5em;
}

/* INLINE TEXT ELEMENTS */
em {
    font-style: italic;
}

p {
    margin: 1em 0em;    
    .fontProperties(@darkColor; "Tahoma"; 1em; 1.2em; normal);
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0em;
}

h1 {
    .headingFontAttributes(@color5; 1.8em);
}

h2 {
    .headingFontAttributes(@color5; 1.4em);
}

h3 {
    .headingFontAttributes(@color5; 1.1em);
}

h4 {
    .headingFontAttributes(spin(@color5, 123); .9em);
}

h5 {
    .headingFontAttributes(spin(@color5, 123); .85em);
}

h6 {
    .headingFontAttributes(spin(@color5, 123); .75em);
}

/* BLOCK ELEMENTS */
pre {
    font-family: "Courier New", monospace;
    white-space: pre-wrap;
    .fancyBox(.3em; .3em; .3em; @darkColor);
    background-color: lighten(@color5, 50%);
    padding: 1.2em 0 0 0;
    border: solid 1px @color5;
    font-size: .8em;
    white-space: pre;
    overflow-x: scroll;
}

/* HEADER */
header {
    background-color: @color5;
    h1 {
        color: @color1;
        margin: .2em;
        text-align: center;
    }
    
}

/* NAV */
nav {
    text-align: center;
    background-color: lighten(@color5, 50%);
    width: auto;
    display: block;
    padding: 0;
    margin: 0;
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            width: auto;
            a {
                text-decoration: none;
                display: block;
                padding: .4em 0;
                border-bottom: solid 1px black;                
                &:link {
                    color: lighten(@color5, 75%);
                }
                &:focus {
                    background-color: @color2;
                }
            }            
        }
    }
}

/* MAIN */
main {
    background-color: @color6;
}

/* FOOTER */
footer {
    background-color: lighten(@color5, 30%);
    color: @lightColor;
    border-top: .6em solid @color5;
    /*border-bottom: .2em solid @color5;*/
    a {
        &:link {
            color: @color1;
        }
        &:visited {
            color: @color6;
        }
    }
    h2,h3 {
        color: darken(@color5, 10%);
    }
}

/*

TABLET STYLESHEET

The following CSS affects all screen sizes larger than 480 pixels wide.

*/

@media only screen and (min-width: 481px) {

    body {
        font-size: 14px;
    }
    
    pre {
        font-family: "Courier New", monospace;
        white-space: pre-wrap;
        .fancyBox(.3em; .3em; .3em; @darkColor);
        padding: 1.2em;
        border: solid 1px @color5;
        font-size: 1em;
        overflow-x: hidden;
    }

}

/*

DESKTOP STYLESHEET

The following CSS affects all screen sizes larger than 1024 pixels wide.

*/

@media only screen and (min-width: 1025px) {
    header, main, footer {
        padding: 2em;
    }
    
    nav {
        text-align: left;
        background-color: lighten(@color5, 50%);
        /*width: auto;*/
        display: block;
        padding: 1em;
        padding-left: 2em;
        margin: 0;
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline;
            padding-left: 1em;
            text-indent: -1em;
            li {
                width: auto;
                margin: 0;
                padding: 0;
                padding-bottom: 0;
                display: inline-block;
                margin-right: 3em;
                a {
                    text-decoration: none;
                    display: block;
                    padding: 0;
                    border: none;                
                    &:link {
                        color: lighten(@color5, 75%);
                    }
                    &:visited {
                        color: lighten(@color5, 75%);
                    }
                    &:hover {
                        color: spin(lighten(@color5, 75%),123);
                    }
                    &:focus {
                        background-color: @color2;
                    }
                }            
            }
        }
    }
    
    header {
        h1 {
            margin: .3em;
            text-align: inherit;
        }
    }

}
<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/grid.css" rel="stylesheet"/>
<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/generic.css" rel="stylesheet"/>
<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/reset.css" rel="stylesheet"/>

project.html

<!DOCTYPE html>

<!--
File Name: project.html
Date: 11/17/16
Programmer: Eric Hepperle
-->

<html lang="en">

<head>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <meta charset="UTF-8">

     <meta name="author" content="Eric Hepperle">

     <title>CAS215 Project</title>

     <link href="http://fonts.googleapis.com/css?family=Open+Sans"
     rel="stylesheet" type="text/css">
     <link href="css/reset.css" rel="stylesheet" type="text/css">
     <link href="css/generic.css" rel="stylesheet" type="text/css">
     <link href="css/grid.css" rel="stylesheet" type="text/css">
     <link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<nav>

    <ul>
        <li><a href="#intro">Intro</a></li>
        <li><a href="#mobile">Mobile First</a></li> 
        <li><a href="#features">Features</a></li>
        <li><a href="#links">Links</a></li>
    </ul>

</nav>

<header>

    <h1>CAS215 Project</h1>

</header>

<main>

    <img src="images/startup-photos.jpg" alt="Image of a designer with a wireframe." title="Image of a designer with a wireframe">

    <section id="intro">

        <h2>Responsive Web Design</h2>

        <p><em>Responsive web design</em> is a new design philosophy that is
        different from fixed design. In responsive web design, page layouts 
        adjust according to the size of the end user's display; in fixed 
        design, sizes of fonts, box elements and images remain unchanged.</p>

        <p>In the past, only desktop and laptop computers were used to surf 
        the web. It was a given that screen resolutions would be 1024 pixels 
        wide or higher. Fixed grid CSS frameworks such as 
        <a href="http://960.gs/">960 Grid System</a> were used to design 
        pages that were laid out in even columns on a fixed-width grid, 
        usually centered on the screen. As mobile devices began to hit the 
        market, it became necessary to create web pages that would work on 
        many devices and resolutions. As the number of devices grows 
        (watches that surf the web are on the horizon), the more important 
        it will be to write responsive sites.</p>

    </section>

    <section id="mobile">

        <img src="images/hand-holding-mobile-phone.jpg" alt="Hand holding a mobile phone." title="Hand holding a mobile phone.">

        <h2>Mobile First Design</h2>

        <p><em>Mobile first design</em> is the next step in responsive web 
        design. In mobile first design, the primary CSS is written for mobile.
        Then, the cascade later contains media queries that add more code for 
        larger device resolutions.</p>

        <h3>Better mobile first web design</h3>

        <p>Some designers write their CSS media queries so that they only 
        affect resolutions that are between two specific break points:</p>

        <pre>
        h3 {
            font-size: 1.75em; 
        }

        @media (min-width: 321px) and (max-width: 480px) {
          h3 {
            font-size: 2em;
          }
        }
        </pre>

        <p>This approach is severely limiting. What if there was CSS code 
        that is useful for <em>all</em> resolutions above 320 pixels, 
        including those 480 pixels and above? Writing media queries in this
        way means that some code will need to be redeclared later.</p>

        <p>We will try a different approach. Our media queries will 
        gradually add to the style of the page the larger the resolution 
        goes, like this:</p>

        <pre>
        h3 {
            font-size: 1.75em;
        }

        @media (min-width: 321px) {
          h3 {
            font-size: 2em;
          }
        }
        </pre>

        <p>See the difference? If an h3 size of 2em happens to work in every 
        browser width above 320 pixels, we're in good shape.</p>

    </section>

    <section id="features" class="section group">

        <div class="col span_4_of_12">

            <img src="images/apple-iphone-books-desk.jpg" alt="Mobile phone and programming book by laptop on desk." title="Mobile phone and programming book by laptop on desk.">

            <h3>Features of Fixed Design</h3>

            <ul>

                <li>A fixed page width in pixels, often centered in the
                browser window.</li>

                <li>Images are set at fixed widths.</li>

                <li>Font sizes are set at fixed pixel or point sizes.</li>

            </ul>

        </div>

        <div class="col span_4_of_12">

            <img src="images/html-code.jpg" alt="Colored HTML code on a black computer screen." title="Colored HTML code on a black computer screen.">

            <h3>Features of Responsive Design</h3>

            <ul>

                <li>Page and box element widths are set in percentages.</li>

                <li>Image widths are set with percentages, often at 100% to 
                fill available width.</li>

                <li>Font sizes are set with em sizes, so that they are sized 
                relative to the parent element's font size.</li>

                <li>The primary style sheet is for desktop devices, and media 
                queries are used toward the end of the cascade to account 
                for mobile devices.</li>

            </ul>

        </div>

        <div class="col span_4_of_12">

            <img src="images/laptop-mobile-phone.jpg" alt="Laptop and mobile phone." title="Laptop and mobile phone.">

            <h3>Features of Mobile First Design</h3>

            <ul>

            <li>The primary style sheet is for mobile devices, and media 
            queries are used toward the end of the cascade for tablet, 
            then desktop devices.</li>

            <li>As a result of this change, web site interfaces are 
            simpler and their design is much cleaner. There is far 
            less CSS to write.</li>

            </ul>

        </div>

    </section>

</main>

<footer>

     <h2>External Links</h2>

    <section id="links" class="section group">

        <div class="col span_4_of_12">

            <img src="images/responsive-design-wikimedia-740x490.png" alt="Graphic showing the same layout on various devices." title="Graphic showing the same layout on various devices.">

            <h3>Responsive Design</h3>

            <ul>
                <li><a href="http://abookapart.com/products/responsive-web-design"
                target="_blank">Ethan Marcotte</a></li>

                <li><a href="https://en.wikipedia.org/wiki/Responsive_web_design"
                target="_blank">Wikipedia</a></li>
            </ul>

        </div>

        <div class="col span_4_of_12">

            <img src="images/eh-mobile-first-design-740x490.png" alt="Graphic showing a mobile phone and a tablet pc." title="Graphic showing a mobile phone and a tablet pc.">        

            <h3>Mobile First Design</h3>

            <ul>
                <li><a href="https://codemyviews.com/blog/mobilefirst"
                target="_blank">Opinion Piece on mobile first design</a></li>

                <li><a href="http://www.sitepoint.com/making-case-mobile-first-designs"
                target="_blank">Making a case for mobile first design</a></li>
            </ul>
        </div>

        <div class="col span_4_of_12">

            <img src="images/mobile-first-responsive-resources.png" alt="Graphic showing various resources including a computer, browsers icons, and books." title="Graphic showing various resources including a computer, browsers icons, and books.">

            <h3>General Resources</h3>

            <ul>
                <li><a href="http://www.smashingmagazine.com"
                target="_blank">Smashing Magazine</a></li>

                <li><a href="https://css-tricks.com/"
                target="_blank">CSS Tricks</a></li>

                <li><a href="http://www.usability.gov/"
                target="_blank">usability.gov</a></li>
            </ul>

        </div>

    </section><!-- END links section -->

</footer>

</body>

<!--

NOTES:

    10/31/16 - * Created file from Ch. 4 project.
               * Changing footer colors
               * Note: temporarily disabled reset styles

-->

</html>

palette.less

@color1: #fcffc5; /* cream */
@color2: #ffc759; /* orange */
@color3: #ff8f5a; /* salmon/papaya */
@color4: #902d59; /* maroon */
@color5: #5e3e67; /* dark purple */
@color6: #f5f5dc; /* beige */

@darkColor: #000000;
@lightColor: #ffffff;

mixins.less

/* PARAMETRIC MIXINS */

.headingFontAttributes(@fontColor; @fontSize) {
    color: @fontColor;
    font-size: @fontSize;
    font-weight: bold;
    margin-top: @fontSize;
    margin-bottom: @fontSize /2;
    text-transform: uppercase;
}

.fontProperties(@fontColor; @fontFamily; @fontSize; @lineHeight; @fontWeight){
    color: @fontColor;
    font-family: @fontFamily;
    font-size: @fontSize;
    font-weight: @fontWeight;
    line-height: @lineHeight;
}

.fancyBox(@borderRadius; @shadowOffset; @shadowSize; @shadowColor) {
    border-radius: @borderRadius;
    box-shadow: @shadowOffset @shadowOffset @shadowSize @shadowColor;
}

I am at a loss. I don't see any issues with specificity, so I'm just stumped. The LESS compiler is somehow not seeing or understanding my code.

What I've tried already

I reviewed these posts but I was not able to extrapolate a clear answer to my situation.

Lesscss > bootstrap's darken() and lighten() don't compile

CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)

Solution

  • There is nothing wrong with either your code (or) the output produced by the Less compiler. It is more an understanding problem.

    The lighten() function increases the lightness of a color in the HSL space. The color that you have tried to lighten is #5e3e67 and its lightness value is 32.35294118%. (You can find this by using Less compiler's built-in lightness() function).

    Below is an extract from the Less website:

    Increase the lightness of a color in the HSL color space by an absolute amount.

    So, when you set the percentage (amount) value in the lighten() function as anything greater than 67.65% roughly, the resulting lightness value would be 100% or more and that equates to #fff.

    Set the percentage as anything less than 67.65% and you'd see that it does produce a color which is not white. For example,

    #demo {
  color: lighten(#5e3e67, 67%);
}
#demo2 {
  color: lighten(#5e3e67, 50%);
}
#demo3 {
  color: lighten(#5e3e67, 33%);
}

    produces the following colors in the compiled CSS:

    #demo {
  color: #fefdfe;
}
#demo2 {
  color: #d8c7dd;
}
#demo3 {
  color: #b391bd;
}

    For the spin() function in your code also the reason is the same. It doesn't matter how much hue is rotated by (which is what the spin() function does), white will remain white. Since the lighten() function's output is white, the output of the spin() will also be white only.