乐趣区

关于前端学习:CSS样式Less-与-Sass

jiezi

  • 理解 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: ‘ 文件门路 ’
退出移动版