CSS面试题(一)

CSS Sprites 有哪些优点和缺点

优点:多张图片请求合为一次,减少请求次数,有利于前端性能,有预加载效果,提高用户体验。
缺点:合并图片成本太高,维护成本也高;

sass/scss 和 less的区别

sass属于动态样式语言,sass语法属于缩排语法,比css多出好多功能(比如变量、嵌套、运算、混入),更容易阅读
scss:
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass 里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{} 取代了原来的缩进。
less也是一种动态样式语言,对CSS赋予了动态语言特性,如变量,函数、继承、运算。Less既可以在客户端上运行,也可以在服务端运行(借助node.js)
区别:

  • 编译环境不一样
    Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器。也可以在开发环节使用Less,然后编译成css文件,直接发到项目中
  • 变量符不一样,Less是@,Scss是 $,而且变量的作用域也不一样
  • 输出设置
    Less没有输出设置,Sass提供四种输出选项:
    nested:嵌套缩进的css代码(默认)
    expanded:展开的多行css代码
    compact:简洁格式的css代码
    compressed:压缩后的css代码
  • Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。
  • 引用外部CSS文件
    scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件.
  • Sass和Less的工具库不同
    Sass有工具库Compass, 简单说,Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上,封装了一系列有用的模块和模板,补充强化了Sass的功能。
    Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用Less语法编写。
发布了24 篇原创文章 · 获赞 5 · 访问量 389
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览