scss文件下劃線的使用

SASS能夠將代碼分割為多個片段,并以underscore風格的下劃線作為其命名前綴(_partial.scss),SASS會通過這些下劃線來辨別哪些文件是SASS片段,并且不讓片段內容直接生成為CSS文件,從而只是在使用@import指令的位置被導入。CSS原生的@import會通過額外的HTTP請求獲取引入的樣式片段,而SASS的@import則會直接將這些引入的片段合并至當前CSS文件,并且不會產生新的HTTP請求。下面例子中的代碼,將會在base.scss文件當中引入_reset.scss片斷。

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

SASS中引入片斷時,可以缺省使用文件擴展名,因此上面代碼中直接通過@import 'reset'引入,編譯后生成的代碼如下

html, body, ul, ol {
  margin: 0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }

SASS片斷使用下劃線前綴命名,主要用于SASS命令行工具watch指定目錄源碼的場景;如果使用Webpack等打包工具則毋須顧慮該問題,CSS樣式將會通過Webpack加載器,按照ES6風格的import或Webpack插件extract-text-webpack-plugin進行打包和模塊化。

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

相關閱讀更多精彩內容

  • 一、SCSS簡介 ??Sass是成熟、穩(wěn)定、強大的CSS預處理器,而SCSS是Sass3版本當中引入的新語法特性,...
    無劍_君閱讀 1,904評論 0 2
  • 在現(xiàn)在的前端開發(fā)中,前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,659評論 1 32
  • 一、 ruby安裝 sass基于Ruby語言開發(fā)而成,因此安裝sass前需要安裝Ruby。 ruby的下載地址: ...
    滿天繁星_28c5閱讀 926評論 0 1
  • 3.移動端前端基礎架構 15:16單詞釋義:a)mkdir: make directory 建立一個新的子目錄(...
    小豌豆書吧閱讀 1,021評論 0 1
  • Sass是成熟、穩(wěn)定、強大的CSS預處理器,而SCSS是Sass3版本當中引入的新語法特性,完全兼容CSS3的同時...
    白雪公主960閱讀 293,271評論 10 183

友情鏈接更多精彩內容