摘要：
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子： 它可以让变量和属性工作的很完美，上面的代码编译成 CSS： 这是 Sass 阅读全文
摘要：
什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果： a) Sass 中的混合宏使用 总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CS 阅读全文
摘要：
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示： 这段代码没有被 @ext 阅读全文
摘要：
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示： 编译出来之后： 从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起， 阅读全文
摘要：
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如： 示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS： 上例明显可以看出，Sass 在 阅读全文
摘要：
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如： 在混合宏“center” 就传了多个参数。在实际调用和其调用其他混合宏是一样的： 编译出来css: 有一个特别的参数“...”。当混合宏的参数过多之时,可以使用的参数来替代如： 在实际调用中： 编译出来的css: 阅读全文
摘要：
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： 在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认 阅读全文
摘要：
Sass 的混合宏有一个强大的功能，可以传参，那么在 Sass 中传参主要有以下几种情形： A) 传一个不带值的参数 在混合宏中，可以传一个不带任何值的参数，比如： 在混合宏"border-radius"中定义了一个不带任何值的参数"$radius"。 在调用的时候可以给这个混合宏传一个参数值： 这 阅读全文
摘要：
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”: 在一个按钮中用调用好的混合宏"border-radius",可以这样使用: 这个时候编译出 阅读全文
摘要：
如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义下面介绍 Sass 的混合宏。 1、声明混合宏 不带参 阅读全文
摘要：
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。 编译出来的 CSS： 避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些 阅读全文
摘要：
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了： 在Sass中我们可以这样写： 阅读全文
摘要：
Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sas 阅读全文
摘要：
全局变量与局部变量 先来看一下代码例子： 用sassmeiste转换成css之后： 上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量 如下代码： $color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 阅读全文
摘要：
定义变量的语法： 在有些编程语言中(如javascript)中声明变量是使用关键字"var"开头,但是在Sass不使用这个关键字词,而是使用美元符号"$"开头 上面的图很清楚的介绍了Sass的变量包括三个部分： 1.声明变量的符号 "$" 2.变量名称 3.赋予变量的值 来看一个简单的例子： 效果如 阅读全文