CSS样式——Less 与 Sass

  • 了解 Less 与 Sass

    • Less 与 Sass 都是css的拓展语言
    • less 和 sass 最主要的区别是less是通过Javascript编译,而sass是通过ruby编译的
    • 如果没有引入前端工程化,less会消耗客户端性能,sass会消耗服务端性能
    • 引入前端工程化的话,gunt,gulp,webpack等,less和sass在打包阶段都会转化成css,所以不会有区别,只是sass是基于ruby,所以每次npm的时候相对慢一点点
  • Less 与 Sass 之间的区别

    Less Sass
    变量定义 @变量名:值 $变量名:值
    变量使用 属性:@变量名 属性:$变量名
    插值使用 @变量名:属性名
    @{变量名}:属性值
    选择器@{变量名}{}
    $变量名:属性名
    #变量名:属性值
    选择器#{变量名}{}
    作用域 就近原则使用
    可先使用,后定义
    就近原则
    必须先定义后使用
    嵌套使用 后代选择器(两个都支持):
    选择器1{
        选择器2{
            选择器3{}
        }
    }
    伪类选择器(两个都支持):
    选择器1{
        选择器2{
            选择器3&:hover{}
        }
    }
    样式嵌套(Sass支持):
    font:{size:16px;
             weight:500
    }
    运算符 + - * / Sass ‘/’ 默认为分隔符
    转义 转为分隔符:~”20px/1.5“ 转为除号:(20px/1.5)
    函数 四舍五入:round
    百分比:percentage
    随机数(Less不支持):randm
    自定义函数(两个都支持) @function 函数名(参数){
        @return 返回值
    }
    混入 定义:
    .hide(@参数)
    使用:
    .hide(参数)
    定义:
    mixin show(参数){}
    使用:
    选择器(@inculude show;)
    命名空间 定义:
    #name(参数){}
    使用:
    #nm.show;
    Sass不支持
    继承 被继承:
    选择器{}
    使用继承:
    &extend(选择器)
    被继承:
    %选择器{}
    使用继承:
    @extend(%选择器)
    合并 逗号合并:样式名+:值
    空格合并:样式名+_:值
    需要合并内容
    $样式名{a:\_\_,b:__}
    逗号合并:
    map-value($样式名)
    空格合并:
    zip(map-value($样式名)...)
    媒体查询 与CSS文件写法相同
    条件 when关键字 @if @else @else if
    循环 递归思想 @for()
    引入文件(两个都支持) @import: '文件路径'

你可能感兴趣的