Небольшая инструкция по использованию Sass - Ko2doo/Corp-study-mokup GitHub Wiki

Использование препроцессора Sass ↑

//Description:

Идея использования препроцессора (Sass) в том чтобы облегчить задачу фронтенд разработчику, в Sass есть возможность многократной вложенности в родительский класс достаточно просто сделать вот так:

Мы создали файл _header.scss и поместили его в папку Block/, и подключили его в main.scss /=> Далее откроем файл _header.scss и напишем там следующее:

.header{

margin: 0 auto;

 //внутри мы будем писать все классы которые находятся внутри класса header т.е. вот так:
.headline{
  text-align: center;

   //Если внутри это класса что то обернуто то запишем это сюда же вот таким образом:
   img{
    max-width: 300px;
    height: auto;
   }
}//end .headline

} //end .header

В конечном файле (Css) мы получим следующее:

.header{

margin: 0 auto;

}

.header .headline{

text-align: center;

}

.header .headline img{

max-width: 300px;
height: auto;

}

Ни в коем случае не нужно писать вот так:

.header{

.headline{
}
.headline img{

}

}

Иначе смысл в использовании препроцессора теряется и по сути такая запись не правильна.

Поэтому вот такая вот запись:

.welcome .welcome_headling {
  font-family: 'OpenSans-Light';
  font-weight: 300;
  font-size: 72px; }
.welcome:first-of-type p{
  font-size: 16px;
}
.welcome:last-of-type p{
  font-size: 14px;
}

является не правильной!

⚠️ **GitHub.com Fallback** ⚠️