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任重而道远，现在为止还非常不熟悉这两种写法。希望能够在以后的代码编写中熟能生巧。