Tricky Sass

Sass將css幾乎變成了一個編程語言,雖然平時幾乎用不到它編程語言的特性。但是了解一下還是十分有趣的。


1 這個是類似命名空間 text:
.btn { 
    text: {
       decoration: underline;
       transform :lowercase;
   }
}

這個scss會被編譯成為

.btn{
   text-decoration: underline;
   text-transform :lowercase;
}

2
.sidebar{width: 100px;
      .user & {width: 100px;}
 }

就算在層疊里面,還是可以引用父元素
這樣在做覆蓋樣式的時候就不需要特地額外的寫一些class了


3

類似ruby的轉(zhuǎn)義符號

$side: top;
sup {
   .post-#{$side} {color: green; }
}

4

需要注意的小地方:

.content {
   .call {}
   &.call {}
}

這兩者會被編譯成

.content .call {}
.content.call {}  //注意,這個沒有空格,只有兩個class同時在的時候才生效

有了Sass,你可以輕松寫出讓人想抽你的代碼,所以掌握平衡很重要。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、什么是CSS預(yù)處理器,什么是Sass **(1) **CSS 預(yù)處理器用一種專門的編程語言,進行 Web 頁面...
    ConRon閱讀 279評論 0 0
  • Sass(Syntactically Awesome StyleSheets) 是對 CSS 的擴展,讓 CSS ...
    於風(fēng)聽語閱讀 5,439評論 6 10
  • 1、SCSS 是 Sass 的新語法格式,從外形上來判斷他和 CSS 長得幾乎是一模一樣,代碼都包裹在一對大括號里...
    夜幕小草閱讀 1,820評論 2 10
  • Sass的基本介紹: 1、sass是css的一個預(yù)編譯處理器。增加了規(guī)則、變量、混入、選擇器、繼承等等特性。它是用...
    xcxerxes閱讀 1,060評論 0 2
  • 因為要搬家,也因為果果選擇了新教育,意味著放棄藝術(shù)教育,所以我們決定把家里的鋼琴處理掉。昨天再次把鋼琴觸摸了一翻,...
    劉昱郡閱讀 173評論 0 1

友情鏈接更多精彩內(nèi)容