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任重而道远，如今为止还很是不熟悉这两种写法。但愿可以在之后的代码编写中熟能生巧。