sass,less面试准备

一、基础知识

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)函数
sass,less面试准备_第1张图片
一般不用,作为了解即可
(6)混入
less混入:如果带括号,定义的部分不会单独被解析(相当于是方法);如果不带,会被解析
sass,less面试准备_第2张图片scss混入
sass,less面试准备_第3张图片(7)命名空间
sass,less面试准备_第4张图片(8)继承
less继承
sass,less面试准备_第5张图片sass继承
sass,less面试准备_第6张图片%定义的不会进行解析
(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更加清晰明了,易于上手,对编译环境要求相对较松。他们增强了代码的复用性,有利于模块化开发
3.后处理器PostCSS

了解,但是没有使用过,一般是在完成的样式表中根据css规范处理css。最常用的就是给css属性添加浏览器私有前缀,解决跨浏览器兼容性问题。

你可能感兴趣的:(sass,less,javascript)