淺談sass與less區別優缺點

時間  2019-11-20
標籤 淺談 sass 區別 優缺點 简体版
原文   原文鏈接

Sass是一種動態樣式語言，Sass語法的縮排語法，比Css比多出不少功能，如變量，嵌套，運算，繼承，顏色處理，函數等，易於閱讀。Cass的安裝須要安裝Ruby環境，是服務器端處理的，Less是須要引入Less.js來處理代碼輸出css到瀏覽器，也能夠在開發環節使用Less,而後編譯成css文件，直接放在項目中，有less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編輯地址。javascript

　　我偶然發現LESS以後我就開始堅決的使用它了。CSS自己對我來講歷來不是問題，可是我很好奇使用變量來沿着一個調色盤爲個人網站或模板建立一些東西的想法。擁有一個提供固定數量選項可選的色盤可讓我避免顏色太跳躍以致於從一個已定的風格中脫離。css

 

事實證實，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，好比下面這些：java

● 混入(Mixins)——class中的class；git

● 參數混入——能夠傳遞參數的class，就像函數同樣；github

● 嵌套規則——Class中嵌套class，從而減小重複的代碼；npm

● 運算——CSS中用上數學；瀏覽器

● 顏色功能——能夠編輯顏色；服務器

● 名字空間(namespace)——分組樣式，從而能夠被調用；app

● 做用域——局部修改樣式；less

● JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

LESS和Sass的主要不一樣就是他們的實現方式，LESSS是基於JavaScript，因此，是在客戶端處理的。

另外一方面，Sass是基於Ruby的，而後是在服務器端處理的。不少開發者不會選擇LESS由於JavaScript引擎須要額外的時間來處理代碼而後輸出修改過的CSS到瀏覽器。關於這個有不少種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製而後粘貼LESS輸出的到一個壓縮器，而後到一個單獨的CSS文件來替代LESS文件。另外一個選擇是使用LESS.app來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出，從而避免因爲用戶的瀏覽器不支持JavaScript而可能引發的任何問題。儘管這不大可能，但終歸是有可能的。

LESS Is More

介紹

在你的項目中引入LESS很簡單：

1.下載less.js;

2.建立一個文件來放你的樣式，好比style.less;

3.添加如下代碼到你的HTML的<head>中:

  1. <link rel="stylesheet/less" type="text/css" href="styles.less"> 
  2. <script src="less.js" type="text/javascript"></script> 

請注意link的rel屬性。你須要在屬性值的最後面使用/less以使LESS起做用。而後在link後面引入scirpt也是必須的。若是你在用HTML5語法——爲何不用呢？——你能夠省去type=」text/css」和type=」text/javascript」。

其實也有一個服務器端的LESS版本。在服務器上安裝LESS的最簡單的辦法就是使用Node Package Manager (NPM，一看就知道是基於Node.js的)。

變量

若是你是個開發者，變量應該是你最好的朋友。若是你要重複的使用一個信息(本例中就是color)，將它設置爲一個變量就能夠。這樣，你就能夠保證本身的一致性並可能減小滾動代碼來查找顏色值、複製、粘貼等繁瑣的工做了。你甚至能夠加或者減一些你須要渲染的HEX值到這些顏色上面。看下例子：

  1. @blue: #00c;  
  2. @light_blue: @blue + #333;  
  3. @dark_blue: @blue - #333; 

若是咱們將這些樣式應用到3個div上面，咱們就能夠看到由加上和減掉的HEX值造成的漸變的效果：

 

從@light_blue到@blue到@dark_blue的漸變效果

關於變量在LESS和Sass中的惟一區別就是，LESS用@，Sass用$。同時還有一些做用域上的差異，我後面會提到。

混入(mixin)

偶爾，咱們會建立一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class，可是你能夠用LESS，在樣式表中完成。爲了描述這一點，我寫了一點兒例子：

  1. .border {  
  2.     border-top: 1px dotted #333;  
  3. }  
  4. article.post {  
  5.     background: #eee;  
  6.     .border;  
  7. }  
  8. ul.menu {  
  9.     background: #ccc;  
  10.     .border;  
  11. } 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程