Less、Sass/Scss

標籤：width   分享   div   維護   風格   功能   簡單   語言   處理器   

CSS 前置處理器是一種專門的程式設計語言，進行Web 頁面樣式設計，然後再編譯成正常的CSS 檔案，以供項目使用。CSS 前置處理器為CSS 增加一些編程的特性，無需考慮瀏覽器的相容問題。

在CSS 中使用變數、簡單的邏輯程式、函數等等在程式設計語言中的一些特性，可以讓CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

官網描述：

Sass 是一門高於CSS 的元語言，它能用清晰地、結構化地描述檔案樣式，有著比普通CSS 更加強大的功能。

Sass 能夠提供更簡潔、更優雅的文法，同時提供多種功能來建立可維護和管理的樣式表。

Sass 和 Scss 區別

1.副檔名不同，Sass 是以“.Sass” 尾碼為副檔名，而SCSS 是以“.scss” 尾碼為副檔名；

2.文法書寫不同，Sass 是以嚴格的縮排式文法規定來書寫，不帶大括弧（{}）和分毫（;）,而SCSS 的。

建議使用尾碼名為scss 的檔案，以避免sass 尾碼名的strict 模式要求報錯。

// Sass$font-stack:Helvetica, sans-serif$primary-color: #333body  font:100% $font-stack  color:$primary-color//SCSS$font-stack: Helvetica, sans-serif;$primary-color: #333;body{font:100% $font-stack;color:$primary-color;}

測試監聽sass

sass --watch test.scss:test.css

Sass 是預先處理工具，提前幫忙做事情

Sass 不同風格的輸出方式

嵌套輸出方式 nested、展開輸出方式 expanded、緊湊輸出方式 compact、壓縮輸出方式 compressed

//嵌套輸出方式 nestedsass --watch test.scss:test.css --style nested

// 展開輸出方式 expandedsass --watch test.scss:test.css --style expanded

// 緊湊舒服方式 compact （單行格式）sass --watch test.scss:test.css --style compact

// 壓縮輸出方式 compressedsass --watch test.scss:test.css --style compressed

Less、Sass/Scss