This `less` file passes linting rules but, but always errors after the first block once the file is over ~ 250 lines.

Any reason this would cause errors? Or erroring after the first closing brace, even though it's basic CSS? Any help appreciated.

LESS error: in sphsc.css.less on line 3, column 1 1| .hide-small { 2| &:extend(.hidden-xs, .hidden-sm); 3| } 4| 5| .no-transition { 6| -o-transition: 0s;, sites/all/themes/sphsc/less/style.less

LESS: 

.hide-small {
    &:extend(.hidden-xs, .hidden-sm);
}

.no-transition {
    -o-transition: 0s;
    -webkit-transition: 0s;
    transition: 0s;
}

.box-gradient {
    background-color: #444444;
    background-image: -webkit-linear-gradient(top, #444444, #999999);
    background-image: linear-gradient(to bottom, #444444, #999999);
}

.gradient-border {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        visibility: visible;
        display: block;
        bottom: 1px;
        right: 1px;
        top: 1px;
        width: 1px;
        background-image: -webkit-gradient(linear, 0 100%, 0 0, from(@ultralightgold) 70%, to(transparent));
        background-image: -webkit-linear-gradient(transparent 70%, @ultralightgold);
        background-image: -moz-linear-gradient(transparent 70%, @ultralightgold);
        background-image: -o-linear-gradient(transparent 70%, @ultralightgold);
    }
    &:after {
        content: "";
        position: absolute;
        visibility: visible;
        display: block;
        bottom: 1px;
        left: 1px;
        right: 1px;
        height: 1px;
        background-image: -webkit-gradient(linear, 0 0, 100% 0, from(transparent) 70%, to(@ultralightgold));
        background-image: -webkit-linear-gradient(left, transparent 70%, @ultralightgold);
        background-image: -moz-linear-gradient(left, transparent 70%, @ultralightgold);
        background-image: -o-linear-gradient(left, transparent 70%, @ultralightgold);
    }
}

.front {
    .well.flourish {
        width: 70%;
        margin: -150px auto 0 auto;
        height: 200px;
        border-radius: 30px;
    }
    .uw-body > .row {
        margin: auto;
    }
    #block-views-sphsc-articles-block,
    #block-block-4 {
        &:extend(.well, .gradient-border);
        border: 0 none;
        background-color: transparent;
    }
    .region-sidebar-first .well {
        &:extend(.gradient-border);
        border: 0 none;
        background-color: transparent;
    }
    #block-views-sphsc-articles-block:before,
    #block-block-4:before,
    .region-sidebar-first .well:before {
        &:extend(.gradient-border: before);
    }
    #block-views-sphsc-articles-block:after,
    #block-block-4:after,
    .region-sidebar-first .well:after {
        &:extend(.gradient-border: after);
    }
}

header#page-header {
    div.logo-image {
        margin: 20px 0 -60px 15px;
    }
    nav.go-links {
        &:extend(.pull-right);
        margin-top: 45px;
        float: left;
        width: 100%;
        li a {
            &:extend(.pull-right, .btn, .btn-lg, .btn-default);
            /*
&:extend(.btn-default: hover, .btn-default: focus, .btn-default.focus, .btn-default: active, .btn-default.active)
*/
            margin: 0 0 1em 1.5em;
            padding: 1em 1.5em;
            background-color: @ultralightgold;
            color: @darkgray;
            border-color: transparent;
            text-transform: uppercase;
            font-size: 14px;
            padding: 25px;
            border-radius: 0;
            font-family: 'Encode Sans Compressed', sans-serif;
            font-variant: small-caps;
            font-weight: 900;
            font-style: italic;
        }
        li a:hover {
            &:extend(.no-transition);
            background-color: @lightgold;
            color: #fff;
            text-shadow: 1px 1px 1px #666;
            box-shadow: 1px 1px 1px #666;
        }
    }
    nav.main-menu {
        position: relative;
        float: left;
        width: 100%;
        margin-top: 45px;
        .container {
            margin: 0;
        }
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            &:extend(.pull-left);
            position: relative;
        }
        .dawgdrops-menu {
            top: 40px;
        }
    }
}

header#content-header {
    margin: 0 0 10px 0 !important;
    #quicklinks,
    #quicklinks p {
        color: white;
    }
}

ul.sphsc-syndicate-list {
    padding-left: 0;
    li {
        list-style-type: none;
    }
}

nav#quicklinks {
    input,
    textarea,
    button {
        width: 100%;
        margin: 0 6px -6px 0;
    }
}

pre,
code {
    font-size: 10px;
    max-height: 300px;
    max-width: 100%;
    overflow: auto;
    border: 1px solid #dcdcdc;
    padding: 8px;
}

.hero-wrapper {
    display: none;
    position: relative;
    .bx-viewport,
    .hero-slide {
        height: 500px;
    }
    .expanded .bx-viewport,
    .expanded .hero-slide {
        height: auto;
        .hero-slide .title a.fa {
            color: gold;
            opacity: 1;
        }
    }
    .bx-pager a,
    .bx-controls a {
        &:extend(.no-transition);
    }
    .hero-slide {
        position: relative;
        overflow: hidden;
        a {
            color: white;
            opacity: .9;
        }
        .title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0;
            padding: 0;
            color: white;
            text-shadow: 1px 1px 2px #333;
            background-color: transparent;
            background-color: rgba(0, 0, 0, 0.6);
            em {
                color: white;
                opacity: .9;
                font-size: 14px;
                font-family: serif;
                font-weight: 100;
                font-variant: small-caps;
                font-style: normal;
                float: left;
                padding: 4px 12px;
                float: left;
                width: 70%;
                overflow: hidden;
            }
            a.fa {
                color: #999;
                float: right;
                margin: 2px;
                cursor: pointer;
            }
            a.fa:hover {
                color: gold;
            }
        }
        .bg-hash {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 60px;
            width: 70%;
            content: "";
            background: url(assets/images/stripes-dark-tile.png);
            opacity: .5;
        }
        .image {}
    }
}

@media only screen and (min-width: 767px) {
    .dawgdrops-item.dawgdrops-item a {
        font-size: 1.341111vw;
    }
}

.sphscuw-thinstrip.affix {
    position: fixed;
}

ul.sphsc-syndicate-list {
    padding-left: 0;
    li a {
        margin-left: 30px;
    }
    li a .fa {
        margin-left: -30px;
        padding: 2px 0;
        vertical-align: middle;
        border-bottom: 0 none !important;
    }
}

a .fa {
    border-bottom: 0 none;
}

.block-title {
    clear: left;
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 20px;
    &:after,
    &:before {
        position: absolute;
        left: 0;
        bottom: 5px;
        content: "";
        height: 4px;
    }
    &:before {
        width: 100px;
        background-color: #b7a57a;
    }
    &:after {
        width: 40px;
        -webkit-transform: skewX(-25deg) skewY(0);
        -o-transform: skewX(-25deg) skewY(0);
        transform: skewX(-25deg) skewY(0);
        -webkit-transform: skew(-25deg, 0);
        -ms-transform: skewX(-25deg) skewY(0);
        transform: skew(-25deg, 0);
        left: 80px;
        background-color: white;
    }
}

.block form,
form#search-block-form {
    margin: 10px 0;
    .form-control {
        height: auto;
    }
}

#usnews-promo .pull-left {
    padding: 0 10px 20px 0;
}

.block .pager li > a {
    &:extend(.btn);
    /*, .btn-default, .btn-xs*/
    background-color: transparent;
    color: inherit;
    margin: 0 4px;
    border: 0 none;
    &:hover {
        text-decoration: underline;
    }
}

.block .pager li > a:hover {
    font-style: italic;
}

.uw-body h1 {
    color: #4b2e83;
    display: block;
    font-variant: small-caps;
}

footer {
    #footer-sitemap ul.footer_links_main-menu.total-items-5 {
        &:extend(.row);
        & > li.first:before {
            content: '<li class="col-sm-2"></li>'
        }
        & > li {
            &:extend(.col-sm-2)
        }
        & > li.last:after {
            content: '<li class="col-sm-2"></li>'
        }
    }
    #footer-sitemap ul.footer_links_main-menu.total-items-4 {
        &:extend(.row);
        & > li {
            &:extend(.col-sm-3)
        }
    }
}

.widget {
    padding: 0;
}

Comments

pbcelery created an issue. See original summary.

corey.aufang’s picture

corey.aufang CreditAttribution: corey.aufang commented

Running using the less.js version, so everything listed here is correct to the "true" version of Less.

I'm seeing 4 parse errors:


@@ -72,12 +72,12 @@
   #block-views-sphsc-articles-block:before,
   #block-block-4:before,
   .region-sidebar-first .well:before {
-    &:extend(.gradient-border: before);
+    &:extend(.gradient-border:before);
   }
   #block-views-sphsc-articles-block:after,
   #block-block-4:after,
   .region-sidebar-first .well:after {
-    &:extend(.gradient-border: after);
+    &:extend(.gradient-border:after);
   }
 }
 
@@ -365,7 +365,7 @@
       content: '<li class="col-sm-2"></li>'
     }
     & > li {
-      &:extend(.col-sm-2)
+      &:extend(.col-sm-2);
     }
     & > li.last:after {
       content: '<li class="col-sm-2"></li>'
@@ -374,7 +374,7 @@
   #footer-sitemap ul.footer_links_main-menu.total-items-4 {
     &:extend(.row);
     & > li {
-      &:extend(.col-sm-3)
+      &:extend(.col-sm-3);
     }
   }
 }

And then there are some runtime errors related to undefined variables, I threw the following in at the top to make it compile:

@ultralightgold: ultralightgold;
@darkgray: darkgray;
@lightgold: lightgold;

And then some errors in the output:

extend ' .hidden-xs' has no matches
extend ' .hidden-sm' has no matches
extend ' .well' has no matches
extend ' .pull-right' has no matches
extend ' .pull-right' has no matches
extend ' .btn' has no matches
extend ' .btn-lg' has no matches
extend ' .btn-default' has no matches
extend ' .pull-left' has no matches
extend ' .btn' has no matches
extend ' .row' has no matches
extend ' .col-sm-2' has no matches
extend ' .row' has no matches
extend ' .col-sm-3' has no matches

Besides the parse errors, did you maybe forget to @import a file at the top that contains the colors and the extenders?

corey.aufang’s picture

corey.aufang CreditAttribution: corey.aufang commented
Status: Active » Closed (cannot reproduce)

I'm closing this ticket as there has been no feedback from the submitter in substantial time.

pbcelery’s picture

pbcelery CreditAttribution: pbcelery commented
Issue summary: View changes