資訊專欄INFORMATION COLUMN
摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。
這篇文章主要解答以下幾個問題，供前端開發者的新手參考。
1、什么是Sass和Less？
2、為什么要使用CSS預處理器？
3、Sass和Less的比較
4、為什么選擇使用Sass而不是Less？
什么是Sass和Less？??Sass和Less都屬于CSS預處理器，那什么是 CSS 預處理器呢？
??CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行CSS的編碼工作。
??轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 文件，以供項目使用”。
為什么要使用CSS預處理器？??作為前端開發人員，大家都知道，Js中可以自定義變量，而CSS僅僅是一個標記語言，不是編程語言，因此不可以自定義變量，不可以引用等等。
CSS有具體以下幾個缺點：
??語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
??沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。
??這就導致了我們在工作中無端增加了許多工作量。而使用CSS預處理器，提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了我們的開發效率。
??但是，CSS預處理器也不是萬金油，CSS的好處在于簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓我們開發工作流中多了一個環節，調試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。
??所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。
Sass和Less的比較 不同之處1、Less環境較Sass簡單
Cass的安裝需要安裝Ruby環境，Less基于JavaScript，是需要引入Less.js來處理代碼輸出css到瀏覽器，也可以在開發環節使用Less，然后編譯成css文件，直接放在項目中，有less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編輯地址。
2、Less使用較Sass簡單
LESS 并沒有裁剪 CSS 原有的特性，而是在現有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性。只要你了解 CSS 基礎就可以很容易上手。
3、從功能出發，Sass較Less略強大一些
①sass有變量和作用域。
$variable，like php；
#｛$variable｝like ruby；
變量有全局和局部之分，并且有優先級。
②sass有函數的概念
@function和@return以及函數參數（還有不定參）可以讓你像js開發那樣封裝你想要的邏輯。
@mixin類似function但缺少像function的編程邏輯，更多的是提高css代碼段的復用性和模塊化，這個用的人也是最多的。
ruby提供了非常豐富的內置原生api。
③進程控制：
條件：@if @else；
循環遍歷：@for @each @while
繼承：@extend
引用：@import
④數據結構：
$list類型=數組；
$map類型=object；
其余的也有string、number、function等類型
4、Less與Sass處理機制不一樣
??前者是通過客戶端處理的，后者是通過服務端處理，相比較之下前者解析會比后者慢一點
5、關于變量在Less和Sass中的唯一區別就是Less用@，Sass用$。
?
相同之處Less和Sass在語法上有些共性，比如下面這些：
1、混入(Mixins)——class中的class；
2、參數混入——可以傳遞參數的class，就像函數一樣；
3、嵌套規則——Class中嵌套class，從而減少重復的代碼；
4、運算——CSS中用上數學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
1、Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation。
2、就國外討論的熱度來說，Sass絕對優于LESS。
3、就學習教程來說，Sass的教程要優于LESS。在國內LESS集中的教程是LESS中文官網，而Sass的中文教程，慢慢在國內也較為普遍。
4、Sass也是成熟的CSS預處理器之一，而且有一個穩定，強大的團隊在維護。
5、同時還有Scss對sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113717.html
摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。 這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...
摘要：是通過加載器和插件對資源進行處理的。另外我們知道是對整個過程進行控制，所以在其配置文件中配置的每一個對項目中該配置路徑下所有的資源都可以管理。 一 概念介紹 gulp 是 task runner，Webpack 是 module bundler。可以這么說， Webpack 和 gulp 本身都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。 1 什么是gulp Gulp...
摘要：首先需要安裝插件修改的，找到的加載設置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數更多詳細知識介紹請訪問我的個人主頁 首先需要安裝插件：sass-resources-loader npm i sass-resources-loader --save-dev scss: 修改vue-cli的build/uti...
摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明 本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網 感謝大佬們的分享。 正文-CSS預處理（less&Sass） CSS預處理 什么是 CSS 預處理？為什么要有 CSS 預處理？ 這...
閱讀 670·2023-04-25 18:59
閱讀 1210·2021-09-22 16:00
閱讀 1888·2021-09-22 15:42
閱讀 3593·2021-09-22 15:27
閱讀 1245·2019-08-30 15:54
閱讀 1104·2019-08-30 11:16
閱讀 2445·2019-08-29 16:24
閱讀 820·2019-08-29 12:14
