css预处理语言less和sass

常见的css预处理器语言有：less，sass，stylus等语言

一、less环境的构建（官网）

 1.安装node，安装之后敲命令

                   npm install -g less
      > lessc styles.less styles.css

2.在浏览器环境中使用 Less ：

      <link rel="stylesheet/less" type="text/css" href="styles.less" />
      <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>

这里需要注意：（测试了好久才弄出来）在浏览器环境中使用less必须在线上的环境，否则less是没有效果的。

二、less语法学习

变量：可以给css的属性设置变量：

#box{

    @h-200:200px;
    @w-300:300px;
    @red:red;
    width:@w-300;
    height:@h-200;
}

将一组样式嵌入到另一组样式里：

.style{
    border-radius:50%;
    color:#ccc;
}

#box{
    height:20px;
    width:200px;
    .style();
}

带参数使用：

.clac(@width,@height){
    width:@width;
    height:@height;
    color:#ff0;
}

#box{
    .clac(200px,200px);
}

嵌套：这里的嵌套和sass语法是一样的效果。

#box{

    height:20px;

    #wrap{
        color:#ccc;
    }
}

避免编译：这里less不认识css的语法所以要加`这个符号不进行编译。

.box{
    width:`"clac(100%-200px)"
}

映射：

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

导入其他的less文件在less文件中

@import "library"; // library.less
@import "typo.css";

这两种形式都可以。

三、sass的环境搭建

sass不管采用什么方式使用，都离不开ruby的环境，所以首先第一步就是安装ruby（https://rubyinstaller.org/downloads/）

安装最好是新一点的版本，安装完成后在命令行输入ruby -v;出现版本号安装完成这样环境就算搭建完成，然后安装sass和compass，安装完成输入sass -v 这样sass就安装完成了。

gem install sass
gem install compass

如果要将sass引入项目中，首先要将scss文件编译成css文件

在命令行输入（这种方式是监听文件的改变）  

sass --watch style.scss:style.css

将编译后的css文件引入页面中

四、sass语法

1.变量的写法：不同于less使用 @ 来标识变量sass使用 $

$w:20px;
#box{
    width:$w;
}

2.sass的指令：

@import

导入其他的sass文件

import "mysass.sass";
或者是
import "mysass";

import还可以导入样式，和嵌套功能差不多例如：

.border{
    border:1px solid #ccc;
}

#box{
    import "border";
}

3.属性嵌套：

.fon{
    font:20px{
        family:'微软雅黑'；
        weight:bold;

    }
}

编译之后

.font{
    font:20px;
    font-family:微软雅黑'；
    font-weight:bold;
}

............

五、less和sass的对比：

相同点：

1、都是css的预处理语言

2、都可以将一类属性引入到另一个选择器中

3.可以像函数一样传递参数

4、css里面的颜色，长度等的计算

5、命名空间将样式分组

6、局部作用域

7、js表达式

不同点：

1、sass要在ruby的环境才可以，less只是需要的是一个js文件和引入less文件，当然less也可以先使用node进行编译，之后再引入到页面中

2.变量的表达不同：less是使用$,sass使用的是@

3、sass是基于服务器端处理的，而less是客户端处理的

4.sass是可以进行输出的（4种编译排版模式nested，expanded，compact，compressed），而less不可以

5、sass是可以支持条件语句的