less與SASS學習心得

在以往學習CSS和HTML的過程當中其實仍是比較簡單的。由於HTML和css基本上沒有邏輯推理，作一步顯一步，因此作出來思路很是清晰。可是侷限性也很是的大，那就是CSS自己是不具有變量計算判斷循環這些功能的。而在實際編碼過程當中咱們又須要簡化工程量而不可避免的使用到這些功能。因此less和SASS便孕育而生。less和SASS是對現有的CSS的擴展。這兩種都使css擁有了上述中沒有的功能。CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被普遍應用於萬維網（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。做爲一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 須要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於複用，尤爲對於非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼，形成這些困難的很大緣由源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念。LESS 爲 Web 開發者帶來了福音，它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可讓咱們用更少的代碼作更多的事情。

我的認爲less的書寫更爲簡化，而SASS的功能更爲強大。在後來的自學中，我上網查詢到SASS明顯多出來的功能有如下幾點

//if條件句：

 

     p {

     　　　　@if  1  +  1  ==  2  {  border :  1px  solid ; }

     　　　　@if  5  <  3  {  border :  2px  dotted ; }

     　　}

 

//if...else條件句：

 

     @if lightness($color) >  30%  {

     　　　　 background-color :  #000 ;

     　　} @else {

     　　　　 background-color :  #fff ;

     　　}

 

//循環語句：

 

//for循環：

 

     @for $i from  1  to  10  {

     　　　　.border-#{$i} {

     　　　　　　 border : #{$i}px  solid  blue ;

     　　　　}

     　　}

 

//while循環：

 

     　$i:  6 ;

     　　@while $i >  0  {

     　　　　.item-#{$i} {  width :  2em  * $i; }

     　　　　$i: $i -  2 ;

     　　}

 

//each循環，相似於for循環：

 

     @each $member in a, b, c, d {

     　　　　.#{$member} {

     　　　　　　 background-image :  url ( "/image/#{$member}.jpg" );

     　　　　}

     　　}

 

//自定義函數：

 

     @function  double ($n) {

     　　　　@return $n *  2 ;

     　　}

     

     　　#sidebar {

     　　　　 width :  double ( 5px );

     　　}

這些功能也能在SASS 的官方手冊上找到，總之學些LESS和SASS任重而道遠，如今爲止還很是不熟悉這兩種寫法。但願可以在之後的代碼編寫中熟能生巧。