sass預處理語言

前言

巧了上篇說到的技術棧不同，而後發現css預處理語言用的也不同，小編以前用的less，公司用的sass。都是小事看一下就完事了，這邊仍是簡單的作一下記錄，說實話sass官網看着很是不舒服(不是水文章哈，不是水文章哈，不是水文章哈)。

sass

這些css預處理語言爲啥要存在，本身去查一下就行了。

嵌套規則

sass 一樣的支持樣式嵌套，樣式嵌套更加方便了咱們去書寫樣式

div {
 ...  span {  ...  } } 複製代碼

父選擇器

& 父選擇器的存在更加便利了，有時也須要直接使用嵌套外層的父選擇器，僞類的時候咱們會用到，而後按照類名命名規則時咱們也能夠用它代替掉父級類名。

<div class="header">
 <div class="header-nav"></div>  <span>頭部內容</span> </div> <style>  .header {  &:hover {  background-color: red;  }  span {  font-size: 20px;  }  &-nav {  display: flex;  }  } </style> 複製代碼

屬性嵌套

有不少屬性前綴都是相同的，sass提供屬性嵌套。

.header {
 font: {  family: fantasy;  size: 30em;  weight: bold;  } } 複製代碼

SassScript

顧名思義他的功能就在於容許屬性使用變量、算數運算等額外功能

#color :red;
.header {  background-color: #color } 複製代碼