less与sass

一、LESS
    1.字符串方法
        escape(str):将字符串做url转码
            参数是需要转码的字符串,将空格,等号 等字符转义
        e():表示对字符串不做编译
        replace():替换字符串中的子串
            参数1：源字符串
            参数2：被替换的字符串
            参数3：替换的字符串
    2.命名空间
        命名空间是用来约束管理变量的，解决，变量在作用域中混乱的问题，防止变量污染作用域。
        设计模式中单体模式是实现命名空间管理的一种常见设计模式。
        在less中引入了该思想，在less中我们可以通过命名空间来管理变量混合，以及方法
        为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，防止重名的出现，以及更好的管理变量和混合

        &：在less中表示该元素，注意，&符号要写在里面
        注意，引用混合时，要将属性赋值给谁就要放在谁的里面
    3.作用域
        Less到底是一个什么样的作用域呢？
        在less中，作用域更像是一个块作用域，定在块内部的变量在外界访问不到。
        在less中，访问变量的顺序，就近原则，哪个变量离他近就使用哪个

        对于函数，它的存在也是依赖块级作用域，定义在块内部的函数，在外界访问不到，
        但是我们可以通过命名空间使用它。

        对于变量，他的存在也是依赖于块级作用域，定义在块内部的变量，我们在外界访问不到，
        但是我们也不能通过命名空间访问。变量更像是一种私有的。
    4.文件引入
        如果将css样式全部写在一个文件中很不方便,所以要分开
        利用文件引入,在less文件之间创建依赖
        语法：
            @import 'filename';
        通过import导入一个文件的内容,被导入的文件中的变量,混合,方法等内容在编译后会留在当前文件中,可以被调用使用
    5.插值
        如果我们需要将一个变量插入到一个字符串中,可以使用less的插值处理
        语法：
            @{key}  //key是变量名字
二、Sass
    1.简介
        SASS 是一种css的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使css的开发变得简单可维护
        sass 的本质是一种可以简化css工作流程的方式,可以帮助我们更简单的开发和维护css内容
        sass 是ruby语言写的,因此电脑需要先安装ruby,mac已经自带了,Windows系统需要重新安装环境
        ruby -v
        //如安装成功会打印
        ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
        //1.删除原gem源
        gem sources --remove https://rubygems.org/

        //2.添加国内淘宝源
        gem sources -a https://ruby.taobao.org/

        //3.打印是否替换成功
        gem sources -l

        //4.更换成功后打印如下
        *** CURRENT SOURCES ***
        https://ruby.taobao.org/

        //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
        gem install sass
        gem install compass
        检查版本号
        sass -v
        //更新sass
        gem update sass
        //查看sass帮助
        sass -h
        一般情况sass文件会写为scss
            sass index.scss index.css
            sass index.scss>index.css
    2.变量与作用域
        变量定义：$key:value;
        作用域对变量的影响：在作用域内部定义的变量,外部无法访问,是私有的
    3.父选择器
        在sass中可以通过&符号,在父选择器内部访问父选择器
        选择当前选择器
    4.属性嵌套
        sass 允许对css的属性进行嵌套,通常是对复合属性进行嵌套
        border-top-color ==>
        border:{
            top:{
                color:red;
            }
            left:{
                style:solid;
            }
        }
        在css中对属性嵌套,当编译时,会根据嵌套的层级进行编译结果
    5.混合
        sass中混合作用是为了继承复用
        语法：
            定义：@mixin names($w,$h) {width:100px}
            使用：@include names(100px,200px);
        多参数混合：
    6.继承
        sass中的混合,与less中的方法有点像
        sass中的继承,与less中的混合有点像
        继承是用来实现对其他类或者元素或者id样式的继承
        语法：
            @extend 选择器;
            sass不仅仅可以继承元素的名称的选择器,还可以继承自定义的元素名称