簡単なSASS入門

SASS

端末:npm install node-sass

name.sassファイルを作成した後のname.@import"./Name.scss'; あなたに作ってあげます.

nesting

div.container {
	h4{
	color : blue;
	}
	p {
	color: green;
	}
          }

親または子の子をネストして、スタイルを指定できます.
@mixin + @include

@mixin myalert {
  background-color: #eeeeee;
  padding: 20px;
  border-radius: 5px;
  max-width: 800px;
  width: 100%;
  margin: auto;
  p {
    margin-bottom: 0;
  }
}

.box{
 @include myalert()
	add optional style
 }

関数のように使用可能な@mixin+@include
よく似たようなスタイルを使用するときに主に使用するスタイルをmixinと定義すると、それを使用すると便利です.
選択可能
extend機能もあります.