less和sass哪个好用（less和sass的区别[简洁易懂]）

一    
    
    
    
、基础知识

1.sass    
    
    
    
，less都是CSS的预处理器   


     


     


     


    ，其基本思想就是用编程的思路编写CSS代码  
    
    
    
    。增加了变量



 




 




 




 


，嵌套   

   

   

   

，函数    

     

     

     

   ，语句




  




  




  




  

，继承等概念

     


     


     


     


。有助于模块化开发  


  


  


  


，例如写一个换肤的效果     
     
     
     
  ，以前我们需要写多套css样式




   




   




   




   
，现在引入了变量的概念
 



 



 



 



，只需要写一套css                     ，改变变量就可以了 




 




 




 




。

2.浏览器对sass和less是不识别的 




    




    




    




    ，在vscode中下载插件easy less/easy sass 将编写好的sass和less文件转化成css文件





















，在项目开发中会用npm下载其他的插件  

   

   

   

   。

Sass/Scss   


     


     


     


    、Less是什么?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言                    ，Sass语法属于缩排语法  



     



     



     



     ，比css比多出好些功能(如变量



 




 




 




 


、嵌套   

   

   

   

、运算,混入(Mixin)    

     

     

     

   、继承




  




  




  




  

、颜色处理





















，函数等)    
    
    
    
，更容易阅读

     

     

     

     

。

Sass与Scss是什么关系?

Sass的缩排语法【缩排语法既是使用 “缩进    
    
    
    
” 代替 “花括号   


     


     


     


    ” 表示属性属于某个选择器   


     


     


     


    ，用 “换行



 




 




 




 


” 代替 “分号   

   

   

   

” 分隔属性】



 




 




 




 


，对于写惯css前端的web开发者来说很不直观   

   

   

   

，也不能将css代码加入到Sass里面    

     

     

     

   ，因此sass语法进行了改良




  




  




  




  

，Sass 3就变成了Scss(sassy css)  




  




  




  




。与原来的语法兼容  


  


  


  


，只是用{}取代了原来的缩进  


  


  


  


  。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性     
     
     
     
  ，如变量




   




   




   




   
，继承
 



 



 



 



，运算                     ， 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox) 




    




    




    




    ，也可在服务端运行 (借助 Node.js)
     
     
     
     
。

1.编译环境不同

sass同通过ruby 是在服务器端处理

Sass的安装需要Ruby环境





















，是在服务端处理的
   




   




   




   




。

less是通过js编译 是在客户端处理

Less是需要引入less.js来处理Less代码输出css到浏览器                    ，也可以在开发环节使用Less  



     



     



     



     ，然后编译成css文件





















，直接放到项目中    
    
    
    
，也有 Less.app  


  


  


  


、SimpleLess     
     
     
     
  、CodeKit.app这样的工具   


     


     


     


    ，也有在线编译地址

2.变量符不一样 less是用@,sass是用$

3.sass支持条件语句



 




 




 




 


，可以使用if{}else{},for{}循环等等 



 



 



 



 。而less不支持                     。4




   




   




   




   
、输出设置不同

Sass提供4中输出选项：nested, compact, compressed 和 expanded

    




    




    




    




。

输出样式的风格可以有四种选择   

   

   

   

，默认为nested

nested：嵌套缩进的css代码

expanded：展开的多行css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

而Less没有输出设置

5.Sass和Less的工具库不同

Sass有工具库Compass, 简单说    

     

     

     

   ，Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上




  




  




  




  

，封装了一系列有用的模块和模板  


  


  


  


，补充强化了Sass的功能



















。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库     
     
     
     
  ，Bootstrap的样式文件部分源码就是采用Less语法编写                      。

6.Sass和Less的工具库不同

Sass有工具库 Compass

Less有UI组件库Bootstrap

7
 



 



 



 



、引用外部 CSS 文件 Scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss                     、_test2.scss 




    




    




    




    、_test3.scss文件分别设置的h1 h2 h3

     



     



     



     



。文件名如果以下划线_开头的话




   




   




   




   
，Sass会认为该文件是一个引用文件
 



 



 



 



，不会将其编译为css文件. // 源代码： @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss"; // 编译后： h1 {   font-size: 17px; }  h2 {   font-size: 17px; } h3 {   font-size: 17px; } Less引用外部文件和css中的@import没什么差异



















。

混入：SCSS运用@mixin——@include；LESS运用.show{}——.show()；

命名空间：只针对LESS文件起作用                     ，首先用#命名再调用；

继承：SCSS运用@extend 




    




    




    




    ，LESS运用&:extend( )  
    
    
    
    。