时间:2021-07-01 10:21:17 帮助过:32人阅读
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 }
它可以让变量和属性工作的很完美,上面的代码编译成 CSS:
1 .login-box {2 margin-top: 14px;3 padding-top: 14px;4 }
当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用:
1 @mixin generate-sizes($class, $small, $medium, $big) {2 .#{$class}-small { font-size: $small; }3 .#{$class}-medium { font-size: $medium; }4 .#{$class}-big { font-size: $big; }5 }6 @include generate-sizes("header-text", 12px, 20px, 40px);
编译出来的 CSS:
1 .header-text-small { font-size: 12px; }2 .header-text-medium { font-size: 20px; }3 .header-text-big { font-size: 40px; }
#{}语法并不是随处可用,不能在 mixin 中调用
可以使用 @extend 中使用插值。
1 %updated-status { 2 margin-top: 20px; 3 background: #F00; 4 } 5 .selected-status { 6 font-weight: bold; 7 } 8 $flag: "status"; 9 .navigation {10 @extend %updated-#{$flag};11 @extend .selected-#{$flag};12 }
上面的 Sass 代码是可以运行的,可以动态的插入 .class 和 %placeholder。他们不能接受像 mixin 这样的参数,上面的代码编译出来的 CSS:
1 .navigation {2 margin-top: 20px;3 background: #F00;4 }5 .selected-status, .navigation {6 font-weight: bold;7 }
注释
在 Sass 中注释有两种方式:
1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”
2、类似 JavaScript 的注释方式,使用“//”
两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示
数据类型
SassScript 支持六种主要的数据类型:
SassScript 还支持所有其他 CSS 属性值类型, 例如 Unicode 范围和 !important 声明。 然而,它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。
字符串
CSS 提供了两种类型的字符串:
带引号的字符串,例如 "Lucida Grande" 或 'http://sass-lang.com'; 不带引号的字符串,例如 sans-serif 或 bold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。
1 @mixin firefox-message($selector) {2 body.firefox #{$selector}:before {3 content: "Hi, Firefox users!";4 }5 }6 @include firefox-message(".header");
编译为:
1 body.firefox .header:before {2 content: "Hi, Firefox users!"; 3 }
值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中: margin: 10px 15px 0 0 或者:font-face: Helvetica, Arial, sans-serif
像上面这样通过空格或者逗号分隔的一系列的值。
事实上,独立的值也被视为值列表——只包含一个值的值列表。
Sass列表函数(Sass list functions)赋予了值列表更多功能:
值列表中可以再包含值列表,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式,要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时,Sass 不会添加任何圆括号,因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的,但是它们在 Sass 文件中却有不同的意义,前者是包含两个值列表的值列表,而后者是包含四个值的值列表。
可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。