SCSS的由来SCSS是CSS的增强版。要说SCSS，就得从SASS说起。开发了级联样式表语言。2007年发布，2016年版本稳定，设计和开发分开进行，使得这门语言的功能相当完善。Sass和CSS一样是一种层叠样式表语言，但它不是前端社区发明的，而是由Ruby社区发明的。为什么Ruby社区要创建一种前端语言？这是因为Ruby社区里有一个全栈的web框架Rails，这个框架包括前端和后端开发，所以当Ruby社区的人发现CSS不好用的时候，就发明了一种语言叫做萨斯。以下是Sass语法的特点#sidebarwidth:30%background-color:#faaSass语法如上图所示。写的很简单，省略了花括号和分号，但是和python一样，需要严格按照规定缩进。这种语法让很多前端工程师很不爽，于是SCSS出现了，SCSS把括号和分号加回去，比如#sidebar{width:30%;background-color:#faa;}你肯定想说，这和CSS有什么区别，其实SCSS保留了SASS的其他特性SCSS的部分用法与CSS相比，SCSS增加了编程元素。作为一个CSS预处理器，它的基本思想是使用一种特殊的编程语言来设计网页，然后编译成普通的CSS文件。变量SCSS允许使用变量，所有变量都以$开头。$blue:#1875e7; div{ color:$blue;}有了变量，需要统一修改颜色类型的时候会方便很多。SCSS中允许嵌套，例如CSS中的divh1{ color:red;}可以重写为div{h1{color:red;}}mixinmixin可以声明重用一个代码块，例如使用@mixin定义一个代码块@mixinleft{ float:left; margin-left:10px;}使用@include引入这个代码块div{ @includeleft;}编译成css是这样的div{ float:left; margin-left:10px;}另外，mixin支持参数，可以像函数一样写css，比如@mixinleft($value:10px){//默认为10px float:left; margin-right:$value;}导入时可以加上参数div{ @includeleft(20px);}placeholderalways引入代码块，编译成CSS的时候还是会有很多重复的代码。使用占位符可以节省代码。用法是用%box{float:left;定义一个通用样式margin-left:10px;}然后使用@extend调用.selector{@extend%box;}.nav>ol>li{@extend%box;}编译成CSS时就是.selector,.nav>ol>li{float:left;margin-left:10px;}否复制样式并将选择器放在样式前面
