zoukankan      html  css  js  c++  java
  • 浅谈Sass与Less区别、优缺点

      Sass是一种动态样式语言,Sass语法的缩排语法,比Css比多出很多功能,如变量,嵌套,运算,继承,颜色处理,函数等,易于阅读。Cass的安装需要安装Ruby环境,是服务器端处理的,Less是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中,有less.app、SimpleLess、CodeKit.app这样的工具,也有在线编辑地址。

      事实证明,LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性,比如下面这些:

      ● 混入(Mixins)——class中的class;

      ● 参数混入——可以传递参数的class,就像函数一样;

      ● 嵌套规则——Class中嵌套class,从而减少重复的代码;

      ● 运算——CSS中用上数学;

      ● 颜色功能——可以编辑颜色;

      ● 名字空间(namespace)——分组样式,从而可以被调用;

      ● 作用域——局部修改样式;

      ● 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的)。

      变量  

    关于变量在LESS和Sass中的唯一区别就是,LESS用@,Sass用$。同时还有一些作用域上的差别,我后面会提到。

      混入(mixin)

    偶尔,我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class,但是你可以用LESS,在样式表中完成。

      参数混入
    就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章,内容是包含着由有用的参数组成的文件,他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。

    Sass中的语法很像LESS,只是使用$声明变量,然后使用前面提到的@mixin和@include来调用。

      

  • 相关阅读:
    零零碎碎
    MFC入门--显示静态图片及调用本地软件
    Python版本OpenCV安装配置及简单实例
    用星星画菱形--Java
    pycharm IDE在导入自定义模块时提示有错,但实际没错
    Cmd使用方式--命令行运行程序
    cv2 & PIL(pillow)显示图像
    C++命令行多文件编译(g++)
    MNIST多图显示--Python练习
    visual studio 2017--括号自动补全
  • 原文地址:https://www.cnblogs.com/xkweb/p/5935027.html
Copyright © 2011-2022 走看看