less 和 sass

一、LESS
    1.条件判断
        在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现
        在when方法中添加条件时,不需要单位
        当判断相等时,使用=实现,没有==和===
        判断多个条件时使用and关键字,配合when使用    when and
        判断非语句,使用not,    when not
    2.函数-Math
        在less中我们可以像js中使用Math对象一样使用less中的数学函数
        Floor():向下取整(参数可以带单位)
        Ceil():向上取整
        Round():四舍五入
        Percentage():将数值转换为百分数,(参数如果带有%单位是无效的),参数只能是数字
        sqrt():平方根
        abs():绝对值
        sin():sin函数
        asin():arcsin函数
        cos():cos函数
        acos():arccos函数
        tan():tan函数
        atan();arctan函数
        pi():返回π
        pow(a,b):次方 a的b次方
        mod(m,n):m对n取余
        convert(m,n):数字之间的转换
        unit(m,n):不转换情况下替换数字的单位
    3.颜色定义函数
        rgb():可以生产一个16进制的色彩值,标准色彩方法
            语法：rgb(red,green,blue);
                每个值都是0-255
        rgba():rgba(red,green,blue,alpha)
            红绿蓝透明度
        hsl():表示色相,饱和度,亮度模式,是一种工业标准色彩模式
            语法：hsl(h,s,l)
                h:色相,表示某一个颜色(0-360)
                s:饱和度,色彩的浓度,单位是百分数,0%表示灰色,100%表示纯色
                l:亮度,单位也是百分比,0%表示黑色,100%表示白色
    4.颜色通道
        less中色彩通道的方法：
            red():获取色中的红色通道
            green():获取色中的绿色通道
            blue():获取色中的蓝色通道
            alpha():获取色中的透明度通道
            hue():获取色中的色值通道,数字(0-360)
            saturation():获取色中的饱和度通道,百分数
            lightness():获取色中的亮度通道,结果是百分数
            这七个通道方法都只能接受一个参数,这个参数就是某个颜色
            灰色是由三个相同的通道组成的,值越小灰度越大
    5.颜色操作
        颜色操作类函数,用于处理色彩
        fade():对色彩进行透明度处理
            fade(color,alpha)
            fade(red,0.4)
        fadeIn():表示增加透明度,当第一个参数不是颜色时,得到的是一个16进制不透明的颜色,透明度大于1
        fadeout():透明度减少,可以接受两个参数,第一个表示颜色,第二个表示透明度的变化,是一个百分数
        greyscale():得到混合色灰色的颜色值,接受一个表示颜色的参数
        mix():将两种颜色混合,默认情况下取两种颜色相加后的平均值,第三个参数表示取的数值,是百分比,表示色彩混合的一个权重
        saturate():增加饱和度
            参数1：颜色
            参数2：饱和度的增加量
        desaturate():减少饱和度
        lighten():提高颜色亮度
            参数1：颜色
            参数2：提高的亮度
        darken():降低颜色亮度
    6.色彩混合函数
        这个函数只做颜色处理,不处理图片
        softlight:柔光处理
            参数1：底色
            参数2：添加色
        hardlight:强光处理
             参数1：底色
             参数2：添加色

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

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

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

    对于变量，他的存在也是依赖于块级作用域，定义在块内部的变量，我们在外界访问不到，
    但是我们也不能通过命名空间访问。变量更像是一种私有的。
10.文件引入
    如果将css样式全部写在一个文件中很不方便,所以要分开
    利用文件引入,在less文件之间创建依赖
    语法：
        @import 'filename';
    通过import导入一个文件的内容,被导入的文件中的变量,混合,方法等内容在编译后会留在当前文件中,可以被调用使用
11.插值
    如果我们需要将一个变量插入到一个字符串中,可以使用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不仅仅可以继承元素的名称的选择器,还可以继承自定义的元素名称

7.解决中文报错
    在ruby中找到engine.rb文件,在该文件require XXXX 后边写上：
        Encoding.default_external = Encoding.find('utf-8')
8.作用域对混合以及继承的影响
    sass中：
        定义在作用域内部的混合,在外部无法访问,只能在内部访问
        定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到
    less中：
        less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问
        less的方法和sass的混合比较像,less定义在作用域内部的方法,在外部不能直接访问,需要通过命名空间访问
9.占位符
    我们自定义一个选择器样式,用于继承,继承结束,我们不想要这个选择器了,删掉它
    此时可以使用占位符,表示定义一组临时属性,当 编译结束 就立马被删除
    占位符只能用于标签选择器,其他选择器不能用
    语法：
        %div{}
        %mydiv{}
10.数字运算
    sass中也有+-*/ 运算,可以进行数字变量之间的运算,可以带单位运算
    带有单位运算时：默认是px,哪个单位在前边,最终结果就以哪个单位为标准
    除法有点特殊：
        1) 加上()
        2) 变量或者是函数的返回结果
        3) 除法运算只是表达式的一部分
        满足以上任何一个条件都可以
11.色彩运算
    sass中支持色彩的加减乘除,注意除法要满足上边的数学运算中的条件
    16进制的色彩运算,每个通道进行独立运算,
    如果十六进制色彩每个通道的值大于255或小于0,不会影响其他通道,大于255取255,小于0取0
    在rgba下,进行运算时,要求透明度必须一致,否则无法运算,最终结果不会影响透明度
12.插值与字符串拼接
    插值：
        为了动态创建属性
        语法：
            #{$dir}
    字符串拼接：
        + 拼接两个字符串,没有''
        no + -repeat
        $re:-repeat
        no + $re
13. if语句
    语法：
        @if 定义if语句
        @else if 定义 else if 语句
        @else 定义 else 语句
        or 或 and 与 not 非
        判断相等使用：== <= >= < >
14. for循环
    语法：
        @for $i from start through end{
            //循环体
        }
        @for:定义for循环
        $i:循环变量
        start:$i的初始值,包含start
        end:$i的结束值,包括end
        from:从哪里开始
        through:到哪里结束
15. while循坏
    语法：
        @while 条件 {}
    $i : 0;
    @while $i < 20{
        //循环体
        $i:$i+1;
    }
16.三元运算符
    if(条件,true结果执行,false结果执行)