随笔分类 - sass
摘要：@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。 这里有一个 @while 指令的简单用例： 编译出来的 CSS
阅读全文
摘要：在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式： $i 表示变量 start 表示起始值 end 表示结束值 这两个的区别是关键字 thr
阅读全文
摘要：@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @
阅读全文
摘要：在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如： 编译出来的CSS： 除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起： 编译出来的CSS: 注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字
阅读全文
摘要：所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如： 计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为： 如此编译出来的 CSS 为： 算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：
阅读全文
摘要：在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。 编译出来的 CSS:
阅读全文
摘要：在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例：
阅读全文
摘要：Sass的乘法运算规则也适用于除法运算。不过除了除法运算还有一个特殊之处。众所周知“/”符号在css中已作为一种符号使用,因此在sass中做除法运算时,直接使用"/" 符号作为除号时,将不会生效，编译时既得不到我们需要的效果,也不会报错。一起先来看简单的示例： 这样的结果对于大家来说没有任何意义。要
阅读全文
摘要：Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例： 编译的时候报“20px*px isn't a valid CSS value.”错误信息。 如果进行乘法运算时，两个值单位相同时
阅读全文
摘要：Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述： 同样的，运算时碰到不同类型的单位时，编译也会报错，如：
阅读全文
摘要：程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算 （一）、加法 加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如： 但对于携带不同类型的单位时，在
阅读全文
摘要：所谓值列表 (lists) 是指 Sass 如何处理 CSS 中： 或者： 像上面这样通过空格或者逗号分隔的一系列的值。 事实上，独立的值也被视为值列表——只包含一个值的值列表。
阅读全文
摘要：JavaScript支持css的两种字符串类型： 有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'； 无引号字符串 (unquoted strings)，如 sans-serifbold。 在编译 CSS 文件时不会改
阅读全文
摘要：Sass和JavaScript语言类似,也具有自己的数据类型,在Sass中包含一下几种数据类型 数字：如，1，2，13，10px; 字符串： 有引号字符串或无引号字符串,如,“foo”,"bar","baz"； 颜色：如,blue、#04a3f9、rgba(255,0,0,0,5); 布尔值：如,t
阅读全文
摘要：注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为： 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，
阅读全文
摘要：使用 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 在
阅读全文
浙公网安备 33010602011771号