费了半天劲才搞懂了，scss的函数代码写的是真累啊，而且不知道为啥我的代码格式化会给我自动换一行，导致极度不美观。//生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", &qu...

函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接1. 字符串函数unquote（$string）：删除字符串中的引号；quote（$string）：给字符串添加引号；To-upper-case（$string）：将字符串小写字母转换为大写字母To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string）unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...

sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。.button-basic { border: ...

@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text调用混入body { ...

sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。@import假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset；@import "reset"; body { font-family: Helvetica, sans-s...

sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为：#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部...

sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...