最近在项目中使用了css预处理器（sass），而这个之前没有接触过的博主，出于好奇，利用业余时间搜索了一些资料，看到整理后，觉得sass还不错，所以想简单介绍一下sass的基本用法（ps：本文只介绍sass的一些基本用法，这些内容都是博主觉得比较有趣有用的知识点）-1.Sass配置：Sass有广泛的应用。比如在vue单组件文件中可以作为样式模板调用，在react中也可以使用sass。至于在vue和react中如何配置，本文不打算细说。感兴趣的读者可以自行查阅。本文所有例子都是在webstorm中编译的，webstorm可以自己编译sass。具体可以查看这个链接：webstorm配置sass-2.sass的概念：定义：sass是css的预处理器，文件扩展名为.scss，可以使用webpack中的sass-loader进行转换成css样式。ps：因为sass是基于ruby编写的，所以需要先安装ruby，才能下载sass使用；-3.sass的基本用法：A)基本用法：-变量语法：$变量名：变量值；用途：在sass中可以定义一些项目中常用的样式变量，如font-size、color、background-color等；例如：$a:12px；.box1{font-size:$a;}.box2{font-size:$a+2px}ps：sass中定义的变量不仅可以用于样式值，还可以拼接字符串，动态改变属性名;用法：#{$variable}例如：$a:left;$b:#888;.box1{border-#{$a}-color:$b}-计算函数在项目中，如果使用sass，一些常用的值在定义变量的时候会定义为sass变量，但是如果在写样式的时候，如果font-size的值没有定义在普通变量中，那么可以使用sass变量的计算能力（加减乘除）——嵌套定义：如果几个节点之间有关系，可以使用nestedonsass嵌套的方式来替换原来css中的后代选择器；如果想嵌套调用父元素，可以用&代替；-mediaquery@mediainsass可以直接嵌套在对应的selection里面，不需要写在外层的Responsivewritingintheselector；eg:无变化前:变化后:B)重用:-继承定义:在sass中，一个选择器允许继承另一个选择器的所有样式；syntax:selector{@extendanotherselectionDevice}eg:-mixin定义：在sass中，@mixin可以用来定义一个多路复用块，多路复用块也可以引入参数和参数的默认值。语法：definemultiplexingblock@mixinname(param1:default1,param2:default2,...){}referencemultiplexingblockselector{@includename(val1,val2,...)}eg:(mixin.scssfile)(调用文件）插入一个文件这个知识点在css中已经存在，也就是将css模块化，然后使用@import来调用；上面的例子用到了这个知识点，一般情况下，在项目开发过程中，也推荐使用这种方式。c)高级用法：条件用法定义：在sass中，可以像js一样使用条件判断语句，选择性地采用合适的样式块；syntax:@if(confident){styleblock1}@else{styleblock2}eg：注意：如果mixin中有些参数有默认值，有些参数没有默认值，没有默认值的参数应该放在参数列表的前面。循环用法的定义：sass中不仅可以使用条件语句，还可以调用循环语句；sass中的循环语句包括@for和@while，用法基本相同。语法：@for$ifromstarttoend{style},@whileconfident{style}注意：@for是从头到尾但不包括结尾；eg：自定义函数定义：sass中也可以自定义函数，但是必须要有返回值，而且函数必须在调用前定义好。语法：@functionname(){return}eg：sass的内容远不止这些。如果看完这篇博客有兴趣继续学习sass，可以去官方文档：sass中文文档官方文档
