4种灵活的Scss编译输出风格整理
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
那么,以后就可以随意的使用参数来生成自己喜欢的CSS风格。
1、nested
nested为嵌套输出风格,即左花括号和CSS类名(第一行)齐行。右侧花括号和最后一行齐行,不换行。
此风格一般使用较少,因为正常这样写CSS的人不多,风格比较别扭。
编译命令为:
生成结果:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .header { background : #f00 ; color : #000 ; font-size : 20px ; } .sidebar { float : left ; width : 300px ; height : 500px ; } .main { float : right ; width : 800px ; padding : 20px ; min-height : 500px ; } |
2、expanded
expanded为展开输出方式,也是一般前端开发直接写CSS使用较多的一种风格。其左花括号和第一行齐行,不换行。右侧的花括号在结尾处换行,另起一行。
编译命令为:
生成结果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .header { background : #f00 ; color : #000 ; font-size : 20px ; } .sidebar { float : left ; width : 300px ; height : 500px ; } .main { float : right ; width : 800px ; padding : 20px ; min-height : 500px ; } |
3、compact
compact为紧凑输出方式,也是前端开发直接写CSS使用较多的另外一种方式。其左花括号和右花括号均不换行。花括号内的CSS属性值也不换行,一个接着一个写。
对于比较喜欢写单行CSS的朋友十分友好。
编译命令为:
生成结果:
1 2 3 | .header { background : #f00 ; color : #000 ; font-size : 20px ; } .sidebar { float : left ; width : 300px ; height : 500px ; } .main { float : right ; width : 800px ; padding : 20px ; min-height : 500px ; } |
4、compressed
compressed为压缩输出方式。其所有内容均不换行,而且会删除所有注释和空格。把所有代码压成一团。
一般在上线情况,或者完全不用阅读修改CSS文件的情况下使用。文件会比较小。
编译命令为:
生成结果:
1 | .header{ background : #f00 ; color : #000 ; font-size : 20px }.sidebar{ float : left ; width : 300px ; height : 500px }.main{ float : right ; width : 800px ; padding : 20px ; min-height : 500px } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- CSS预编译器有 SASS LESS Stylus等等,SCSS是SASS3引入的新语法。这篇文章给大家介绍sass(scss)的安装与使用教程,感兴趣的朋友一起看看吧2018-10-15
- 这篇文章主要介绍了SCSS移动端页面遮罩层效果的实现及常见问题解决,使用CSS的预处理器框架SCSS写起来比原生CSS会来得更加简便一些,需要的朋友可以参考下2016-06-09
- LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活,使用方式形如JavaScript中的一些变量,函数等,下面与大家分享下LESSCSS的编写方法,掌握起来并不是很困2013-08-15
- lesscss语法的简单学习2012-07-06
最新评论