sass的使用

一、sass

1.解决中文报错

    在ruby中找到engine.rb文件,在该文件require xxx 后边写上:

    Encoding.default_external = Encoding.find('utf-8')

2.作用域对混合以及继承的影响

    sass中:

        1)定义在作用域内部的混合,在外部无法访问,只能在内部访问

        2)定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到

    less中:

        1)less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问

        2)less的方法和sass的混合比较像,less定义在作用域内部的方法,在外部不能直接访问,需要通过命名空间

3.占位符

    我们自定义一个选择器样式,用于继承,继承结束,我们不想要这个选择器了，删掉它

    此时可以使用占位符,表示定义一组临时属性,当编译结束就会被删除

    占位符只能用于标签选择器,其他选择器不能用

    语法:

    %div{}

    %mydiv{}

4.数字运算

    Sass中也有加减乘除运算,可以进行数字、变量之间的运算,可以带单位运算

    带有单位运算时:默认是px,哪个单位在前边,最终就以那个单位为标准

    除法有点特殊:

    1)加上()

    2)变量或者是函数的返回结果

    3)除法运算只是表达式的一部分

    满足以上任何一个条件都可以

5.色彩运算

    sass中支持色彩的加减乘除,注意除法要满足上边的数学运算中的条件

    16进制的色彩运算,每个通道进行独立运算,如果十六进制色彩每个通道的值大于255或小于0，不会影响其他通道,大于255取255，小于0取0

    在rgba模式下,进行运算时,要求透明度必须一致,否则无法运算,最终结果不会影响透明度

6.插值与字符串拼接

        插值:为了动态创建属性

        语法:

        #{$dir}

        字符串拼接:

        + 拼接两个字符串,没有''

        no + -repeat

        $re:-repeat

        no + $re;

7.

    语法:

    @if 定义if语句

    @else if 定义else if语句

    @else 定义else语句

    or 或 and 与 not 非

    判断相等使用:==

    <= >= < >

8.for循环

    语法:

    @for $i from start through end{

    //循环体

    }

    @for:定义for循环

    $i:循环变量

    start:$i的初始值,包括start

    end:$i的结束值,包括end

    from:从哪里开始

    through:到哪里结束

9.while循环

    语法:

    @while 条件{}

    $i : 0;

    @while $i < 20{

    //循环体

    $i:$i+1;

    }

10.三元运算符

    if(条件,true结果执行,false结果执行)