Codepen.io CSS: child elements with attributes

Codepen.io CSS: child elements with attributes
0

#1

I was remaking Product Land Page sample project in separate html and css files. Copied some css code from codepen.io environement, but i had a problem. Style has not been implemented. I tried it in Edge and Chrome, but nothing. Then I realize, for example, this part of code from codepen environment:

.logo {
  width: 60vw;
  
  @media (max-width: 650px) {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
  
  img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
    @media (max-width: 650px) {
      margin: 0 auto;
    }
  }
}

should be done like this in css file:

.logo {
  width: 60vw;
}
@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
} 
.logo img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}
@media (max-width: 650px) {
  .logo img {
      margin: 0 auto;
  }
}

Even media queries are put between attributes.
also, there are few comment lines beginning with // in css part of code
which is not acceptable by browsers.
Is this way of writting css only used in codepen environment?
How can I convert such code automatically to regular css code?


#2

It’s SCSS, not CSS. In codependent you can choose different languages in the settings for each panel (SCSS/Sass/etc for CSS, HAML/Pug/etc for HTML, Babel/Livescript/etc for JS). You can also view the CSS output, there is I think a button right next to the settings at the top of eavh panel, so click that and copy the CSS output rather than the SCSS


#3

Thanks you!
I just found how to convert it.
In top-right corner of CSS window, there’s down-arrow dropdown button and its second option “View Compiled CSS” solved my problem.