sass

一、sass
    1.解决中文报错
        在ruby中找到engine.rb文件,在该文件require XXXX 后边写上:
            Encoding.default_external = Encoding.find('utf-8')
    2.作用域对混合以及继承的影响
        sass中:
            定义在作用域内部的混合,在外部无法访问,只能在内部访问
            定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到
        less中:
            less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问
            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 定义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结果执行)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值