asked on

Need Help With CSS Error

I have an error in my css that I am not sure how to fix. It is the line that has all of the "#'s" beside it. Because of the error I can't save the css without a message that says it may break my site. The site is https://www.henricomg.org

Here is the code

#logo {
margin-bottom:-157px;}

div#masthead {
	margin-top:-160px;
}
a{
	text-decoration:underline;
}
p{font-size:16px;}

#logo {
width: 1024px;
}
#logo img {
max-height: 198px;
}

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 
 .header-main {
    height: 296px;
}

/*Acco*/
.ac-container {
    max-width: 400px;
}

.ac-container label {
    height: 30px !important;
    line-height: 21px !important;
    font-size: 12px !important;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #fff;
    background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: linear-gradient(top,#fff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
    font-size: 12px;
    height: 30px;
    line-height: 20px;
}

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
    text-align: left;
}

.ac-container label:hover {
    background: #fff;
}

.ac-container input:checked + label,.ac-container input:checked + label:hover {
    background: #f1f2f3;
    color: #666;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    line-height: 21px;
    font-size: 13px;
}

.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;
}

.ac-container input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
}

.ac-container input {
    display: none;
}

.ac-container article {
    background: rgba(255,255,255,0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}

.ac-container article p {
    font-style: normal;
    color: #777;
    line-height: 23px;
    font-size: 10px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    font: normal normal 12px 'Open Sans';
}

.ac-container input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}

.ac-container input:checked ~ article.ac-small {
    height: 140px;
}

.ac-container input:checked ~ article.ac-medium {
    height: 180px;
}

.ac-container input:checked ~ article.ac-large {
    height: 230px;
}

.Accordion-switch, .Accordion-switch + .Accordion-panel {
	display: none;
}
.Accordion-switch:checked + .Accordion-panel {
	display: block;
}
.Accordion {
	border: 1px solid hsl(0, 0%, 82%);
	border-radius: .3em;
	box-shadow: 0 1px 2px hsl(0, 0%, 82%);
}
.Accordion-trigger {
	background: none;
	border: 0;
	color: hsl(0, 0%, 13%);
	display: block;
	font-size: 16px;
	font-weight: normal;
	margin: 0;
	padding: 1em 1.5em;
	position: relative;
	text-align: left;
	width: 100%;
}
.Accordion-trigger {
	border-radius: .3em .3em 0 0;
}
.Accordion-trigger:hover {
	cursor: pointer;
}
.Accordion-panel {
	margin: 0;
	padding: 1em 1.5em;
}
.Accordion > * + * {
	border-top: 1px solid hsl(0, 0%, 82%);
}


$white: rgba(254,255,250,1)   ################################################################################
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
  
.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both
    
.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black
  
body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px
  
  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn
  
h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2
  
ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0
  
  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn
      
    &:nth-of-type(1)
      animation-delay: 0.5s
    
    &:nth-of-type(2)
      animation-delay: 0.75s
        
    &:nth-of-type(3)
      animation-delay: 1.0s
    
    &:last-of-type
      padding-bottom: 0
      
    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0
      
      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px
        
      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )
          
      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )
    
    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0
      
      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )
            
        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )
          
          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg) 

.nav-menu li#menu-item-50:hover > a
{
color: inherit;
}

Open in new window

When I run the css in lint it shows this error

https://gyazo.com/09fae295d5e68c2ce33c6511fedbc1b7

Please help me fix this error.

Martyn Spencer

Looks like you are using a SASS or SCSS variable on that line and the three following lines. SASS and SCSS are CSS pre-processors that convert into CSS files. If your site does not support SASS/SCSS you will need to look for where $white, $grey, $red, $black and $sans appear in the CSS file and use the values that you want to use, or find a way of handling the SASS/SCSS variables if there is an option to do this with your site/host/development environment.

Does the lint processor you are using support SASS/SCSS? It could be a false warning. Some website templating engines do support conversion.

Nicolas Lecanu

I sharingsunshine,

Can you try to put this code:

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif

Open in new window

In the top of your page and note in the middle ?

Regard.

ASKER CERTIFIED SOLUTION

sharingsunshine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Martyn Spencer

How did identifying that the errors were due to SASS/SCSS variable declarations and that your lint parser was rejecting them as not valid CSS if it was not configured to accept SASS/SCSS not answer your question? Further, how did advising you to replace instances of the variables not provide a solution, since it would have worked. I ask out of interest in improving my answers in future.

How are we to know that you have no interest in using SASS/SCSS variables if you included them in the code you provided?

Also, you do not say what you did to resolve the issue, so the result is a low quality question and final answer. If you "got rid of the code", do you mean you deleted the variables and their references, or indeed did as I suggested and replaced the variable references with the values referred to by the variables? Answering this will help someone who finds this question in the future.

sharingsunshine

ASKER

I indicated you were helpful by telling me they were SASS/SCSS variables. As I stated, I deleted all of the code that referenced or used those variables. It appeared to be accordion code that I wasn't using anyway.

I am sorry it wasn't clear to you what I did to resolve the issue. Simply stated, I deleted any code that used those variables. I had just copied code from the net and never knew those variables were being used.

I hope this clarifies your question.

Martyn Spencer

Deleting the SASS/SCSS and any references is of course an option open to you. You can "fix" any code by deleting what causes the errors and it does not necessarily make the code work. Without context advising you to delete it would risk breaking your site. If you ask a question how to fix something, particularly if you did not state that you did not need all of the CSS and that you had copied it, you are rarely going to receive an answer that suggests you delete something that could be meaningful. How is anyone answering your question going to know what you wanted to use or not without seeing the HTML that references it? A link to your current site would not be enough to determine that.

So, to correctly fix your "CSS", you needed to do as I suggested (perhaps too obliquely?), either use a SASS/SCSS pre-processor or remove the variable definitions and replace where they are referenced. So, whilst you may not think this "fixed" your problem, I feel that in generality, my suggestion will help more people than just suggesting that they delete what does not work. With respect, if you knew you did not need it, why not just delete it and not post here?

That's all I will say on the matter as I don't think there is any more to add that is of benefit. All the best.

sharingsunshine

ASKER

In all the years and questions I have posted, I have never had to defend myself as much as I have with your being involved. Frankly, I shouldn't have to be spending this time explaining my answer. So, this is the last explanation from me on this matter.

I didn't delete the code before posting the question because I had never seen that kind of css and couldn't find an acceptable answer on the net as to what it was for or how to fix it. Consequently, as a paying member I posted a question wanting to find out what the error meant. When you started speaking of variables I knew I didn't want that in my code so that's the reason I deleted it. I disagree with you that others can't glean from my answer. If they don't want that kind of complexity then it will save them time to know to avoid it.

I hope others can glean answers from my responses but like most I just am here to get an answer and move on. So, I don't normally focus on what someone else will get from my answer. I don't see others worried about that aspect either when I read their answers and responses.

If my questions are going to cause such a concern in you then for your sake please avoid them in the future.

Bernard Savonet

My 2c as a passer-by.
Any time some of the comments help me to find the solution, as is the case here with pointing to "variable", I consider that the posts did in fact help me to find the solution, even if I am the last recourse, eg like you here deleting the pointed text.

So experts comment were not exactly the solution, but indeed they did help you on the way to the solution, that you had not found before and without this help.

Personally in such situations I point at the helpful posts as being part of the solution.

Martyn Spencer

@sharingsunshine: There is no intention to have you feel the need to excuse why you do not feel that your question was answered. I just happen to disagree with you. I stand by comments. People will find this question in the future and my further comments are intended to add value, not to criticise you. Good quality answers come from good quality questions. Had you said from the outset that you had copied some code and that there may be code that is not required, I certainly would have suggested that you remove the variables and references.

Since I appear to have caused offence, I shall do as you suggest.