面试题之Less和SaSS的原理和用法

您所在的位置:网站首页 sass是基于什么语言研发的 面试题之Less和SaSS的原理和用法

面试题之Less和SaSS的原理和用法

2023-07-17 12:56| 来源: 网络整理| 查看: 265

1.原理

          1.1 Less定义:是一种动态的样式语言,使CSS变成一种动态的语言特性,如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)           1.2 SaSS定义:是一种动态样式语言,SaSS里面的语法属于缩排语法,对于之前的css相比,多出了很多功能,更容易阅读           1.3 预处理器。Less和SaSS都属于预处理器,它会定义一种新的语言,其总体思想是为CSS增加一些编程的特性,将 CSS 作为目标生成文件, 之后开发者就只要使用这种语言进行CSS的编码工作。

2.两者之间的区别

          2.1 编译环境:                 Sass是在服务端上面处理的,之前是Ruby,现在是Dart-Sass或者是Node-Sass,但是Less在编译时,需要引入less.js来处理Less代码输出CSS到浏览器上,也可以在开发服务器上将Less语法编译成css文件,输出CSS文件到生产包目录,也有在线编译地址。           2.2 变量符                 Less是@,而Sass是$,示例代码如下

//Less-变量定义 @color: #008c8c; #footer { border: 1px solid @color; } //scss-变量定义 $color: #008c8c; #footer { border: 1px solid $color; }

          2.3 输出设置                 Less没有输出设置,而Sass有4种输出选项,如下                          nested:嵌套缩进的css代码                          expanded:展开的多行css代码                          compact:简洁格式的css代码                          compressed:压缩后的css代码           2.4 Sass支持条件语句,可以使用if{}else{},for{}循环等等,而Less不支持,其中if(){}else{}示例代码如下

@mixin txt($weight) { color: white; @if $weight == bold { font-weight: bold; } @else if $weight == light { font-weight: 100; } @else { font-weight: normal; } } .txt1 { @include txt(bold); }

编译结果

.txt1 { color: white; font-weight: bold; } 3.总体优点

           3.1 提供CSS缺失的样式层复用机制            3.2 减少冗余代码            3.3 提高样式代码的可维护性            3.4 结构清晰,便于扩展可以方便的屏蔽浏览器私有的语法差异            3.5 轻松实现多重继承,完全兼容了CSS代码,提高了开发效率。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3