less和sass面试 sass less面试题

转载

mob64ca14137e4f 2024-04-09 06:47:41

文章标签 less和sass面试 sass less javascript css 文章分类 架构后端开发

一、基础知识

1.sass，less都是CSS的预处理器，其基本思想就是用编程的思路编写CSS代码。增加了变量，嵌套，函数，语句，继承等概念。有助于模块化开发，例如写一个换肤的效果，以前我们需要写多套css样式，现在引入了变量的概念，只需要写一套css，改变变量就可以了。
2.浏览器对sass和less是不识别的，在vscode中下载插件easy less/easy sass 将编写好的sass和less文件转化成css文件，在项目开发中会用npm下载其他的插件。
3.html页面引入样式：

链接式

<link href="lianjie.css" type="text/css" rel="stylesheet" />

导入样式：

<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">    //导入样式
        @import url(lianjie.css);
        @import url(daoru.css);
        body { background-color: #e4e929; }
    </style>
    </head>
    <body>
        <div>
            <p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
            <h3>褛上的，<span>lianjie.css</span>文件给我穿的花衣服。</h3>
        </div>
    </body>
    </html>

4.sass/less的语法
（1）注释：单行会被编译，多行不会被编译
（2）变量，插值，作用域

变量：less定义变量用@
sass定义变量用$
使用变量（插值语法）：less使用变量@{变量}
sass使用变量#{$变量}
sass在3.4.0之前没有作用域之说，现在已经改进，可查看官方文档https://www.sass.hk/docs/

（3）选择器嵌套，伪类嵌套

样式嵌套书写，有利于模块化开发

（4）运算

less进行运算时，单位不同，以第一个单位为准

sass运算时，如果单位不同，不能进行运算

（5）函数

less和sass面试 sass less面试题_less

一般不用，作为了解即可

（6）混入

less混入：如果带括号，定义的部分不会单独被解析（相当于是方法）；如果不带，会被解析

less和sass面试 sass less面试题_sass_02

scss混入

less和sass面试 sass less面试题_less_03

（7）命名空间

less和sass面试 sass less面试题_javascript_04

（8）继承

less继承

less和sass面试 sass less面试题_less_05

sass继承

less和sass面试 sass less面试题_sass_06

%定义的不会进行解析

（9）条件循环

sass支持if…else…、for循环等，less不支持

面试题

1.CSS预编译器是什么

css预编译器有sass,less,stylus。我自己比较了解的是sass和less。他们基本的思想就是用编程的思路编写CSS代码。他们赋予了CSS动态语言的特性，引入了变量，运算，函数，作用域，继承，嵌套，还有条件语句等特性。

2.sass和less的区别是什么

编译环境不一样，sass的安装需要Ruby环境，是在服务端处理的；less是基于JavaScript，需要引入less.js来处理，然后less代码输出css到浏览器中。
变量名不一样，less使用@，sass使用$
插值语法也不同，less是@{变量名}，sass是#{$变量名}
sass支持条件语句，如if…else…，for循环等，less不支持
总体来说，可以将它们视为基于CSS之上的高级语言，sass更强大，可以认为是一种真正的编程语言，less更加清晰明了，易于上手，对编译环境要求相对较松。他们增强了代码的复用性，有利于模块化开发