使用Pug縮排語法撰寫HTML和CSS

custom-css-inside-block-with-Pug.html

<!-- 

self closing elements:如meta標籤、img標籤，只要單行就可以結尾，不用縮排
一般的elements:<div>、<style>需要</div>、</style>的，則需要縮排
.google-review-img = <div class="google-review-img"></div>

可使用 https://pughtml.com/ 進行Pug to html語法轉換

-->

meta(name='viewport', content='width=device-width, initial-scale=1')
.google-review-img
  img(src='images/demo.jpg', alt='abc')
style.
  .google-review-img {
  background-color: #2693B0;
  text-align: center;
  display: block;
  max-width: 100%;
  width: 100%
  }
  @media screen and (max-width: 479px) {
  .google-review-img img {
  max-width: 300px;
  }
  }
.google-review-img
  img(src='images/demo.jpg')