你的位置:首页 > 网页设计

[网页设计]Sass插值、注释、数剧类型、字符串、值类型


插值#{}
使用 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 }

它可以让变量和属性工作的很完美,上面的代码编译成 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 支持六种主要的数据类型:

  • 数字(例如 1.21310px
  • 文本字符串,无论是否有引号(例如 "foo"'bar'baz
  • 颜色(例如 blue#04a3f9rgba(255, 0, 0, 0.5)
  • 布尔值(例如 truefalse
  • 空值(例如 null
  • 值列表,用空格或逗号分隔(例如 1.5em 1em 0 2emHelvetica, Arial, sans-serif

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)赋予了值列表更多功能:

  1. nth函数(nth function) 可以直接访问值列表中的某一项;
  2. join函数(join function) 可以将多个值列表连结在一起;
  3. append函数(append function) 可以在值列表中添加值; 
  4. @each规则(@each rule) 则能够给值列表中的每个项目添加样式。

值列表中可以再包含值列表,比如 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。