插值#{}使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。例子： 1 $properties: (margin, padding);2 @mixin set-value($side, $value) {3 @each $prop in $properties {4 #{$prop}-#{$side}: $value;5 }6 }7 .login-box {8 @include set-value(top, 14px);9 } 它可以让...
Sass的函数简介在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括： ● 字符串函数 ● 数字函数 ● 列表函数 ● 颜色函数 ● Introspection 函数 ● 三元函数等 当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。 字符串函数字符串函数顾名思意是用来处...
@if@if指令是一个SassScript,它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。在Sass中除了@if，还可以配合@else if和@else 一起使用。 1 $lte7: true; 2 $type: monster; 3 .ib{ 4 display:inline-block; 5 @if $lte7 { 6 *display:inline; 7 *zoom:1; 8 } 9 }10 p {11 @if $type == ocean {12 color: blue;13 } @else if $type == matador {14 color: red;...
数字函数简介 Sass 中的数字函数提要针对数字方面提供一系列的函数功能： percentage($value)：将一个不带单位的数转换成百分比值； round($value)：将数值四舍五入，转换成一个最接近的整数； ceil($value)：将大于自己的小数转换成下一位整数； floor($value)：将一个数去除他的小数部分； abs($value)：返回一个数的绝对值； min($numbers…)：找出几个数值之间的最...
列表函数简介 列表函数主要包括一些对列表参数的函数使用，主要包括以下几种： length($list)：返回一个列表的长度值； nth($list, $n)：返回一个列表中指定的某个标签值 join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； append($list1, $val, [$separator])：将某个值放在列表的最后； zip($lists…)：将几个列表结合成一个多维的列表； i...
MapSass 的 map 常常被称为数据地图，也有人称其为数组，是以 key:value 成对的出现。 1 $map: (2 $key1: value1,3 $key2: value2,4 $key3: value35 ) 首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。其中键 key 是用来查找相关联的...
HSL函数简介HSL颜色函数包括哪些具体的函数，所起的作用是什么： hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色； hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色； hue($color)：从一个颜色中获取色相（hue）值； saturation($color)：从一个颜色中获取饱和度（...
Opacity函数简介 在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外，还可以使用 opacity 来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。 在 Sass 中，也提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度： alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色...
@importSass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :lo...
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数，当然其还包括一些其他的颜色函数，比如说 adjust-color 和 change-color 等。1、RGB颜色函数RGB 颜色只是颜色中的一种表达式，其中 R 是 red 表示红色，G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数： rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； rgba($red,$green,$blue,$alpha)：根据红、绿、蓝...
sass安装与学习网站： http://www.w3cplus.com/sassguide/
//SCSS中混合宏使用@mixin mt($var){ margin-top: $var; }.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); }} 1、上面是sass混合宏方法编写的sass代码，下面是编译出来的css代码 .block { margin-top: 5px;}.block span { display: block; margin-top: 5px;}.header { co...
# 掌握 SASS 之精华—— @mixin、 @extend 和 Placeholder Selectors最近使用 Rails 折腾小项目，CSS 框架选用了 [Bourbon](https://github.com/thoughtbot/bourbon) 并结合了 [bitters](https://github.com/thoughtbot/bitters) 发现其能很好地利用了 SASS 特性。轻量级且定制性强，相比 bootstrap,Semantic-ui 这类啥都封装好的框架，轻量级多得多。在使用的过程中感叹在 Web 项目一开始的时候就得良好地组织好前端代码，不然地话...
Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击 这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击 这里, 下面是小demo 1.$s1: con...
告诉大家一个秘密, 自从有了 SASS 之后, 我们可以有两种方式来使用 css,我管它们叫做 类库式 和 框架式 。 这里我以 foundation 这个 scss 框架为例, 它和我们熟悉的 bootstrap 类似,只不过 bootstrap 使用 less 写的 (bootstrap 3 也改为 SASS 了, foundation 是由 sass 写的。foundation 是一个对 developer 友好的前端框架, 如果说 bootstrap 是一个 ui 库的话, foundation 更偏重于成为一个工具。 如果你对 foundation 不熟...