-
变量计算 在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。 $content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width + $sidebar-width + $gutter; margin: 0 auto; } 编译出来的CSS .container { width: 960px; margin: 0 auto; }查看全部
-
除法 Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例： .box { width: 100px / 2; } 编译出来的 CSS 如下： .box { width: 100px / 2; } 要修正这个问题，只需要给运算的外面添加一个小括号( )即可： .box { width: (100px / 2); } 编译出来的 CSS 如下： .box { width: 50px; } 除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例： .box { width: 100px / 2 + 2in; } 编译出来的CSS： .box { width: 242px; } 另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示： $width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; } 编译出来的CSS: .item { width: 100px; } .list { width: 100px; } 另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示： $width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; } 编译出来的CSS: .item { width: 100px; } .list { width: 100px; }查看全部
-
乘法 Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。 .box { width:10px * 2px; } 编译的时候报“20px*px isn't a valid CSS value.”错误信息。 如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成： .box { width: 10px * 2; } 编译出来的 CSS: .box { width: 20px; } Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例： .box { width: 20px * 2em; } 编译时报“40em*px isn't a valid CSS value.”错误信息。查看全部
-
减法 Sass的减法运算和加法运算类似 $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; } 编译出来的 CSS 如下： .content { width: 760px; } 同样的，运算时碰到不同类型的单位时，编译也会报错查看全部
-
加法 在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算。 加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如： .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示： .box { width: 20px + 1em; } 编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”查看全部
-
建议满足所有下述标准时方可创建新变量： 1.该值至少重复出现了两次； 2.该值至少可能会被更新一次； 3.该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量查看全部
-
调用变量： $width: 300px; body{ width: $width; }查看全部
-
1.覆盖默认变量：只需要在默认变量之前重新声明下变量； 如：$width: 200px;$width: 100px !default; 2.默认变量的价值在进行组件化开发的时候回非常有用；查看全部
-
$width: 300px; 变量包括三部分： 1.声明变量的符号：“$”； 2.变量名称：width； 3.赋予变量的值： 300px； 4.值后面加上!default则表示默认值，如：$width: 300px !default;查看全部
-
压缩输出方式： sass --watch <路劲>/test.scss:<路劲>/test.css --style compressed查看全部
-
展开输出方式的命令： sass --watch <路劲>/test.scss:<路径>/test.css --style expanded查看全部
-
个人常用的输出方式为： 1.展开输出方式：expanded； 2.压缩输出方式 compressed（一般上线之后，输出）；查看全部
-
1.命令编译sass： sass <要编译的文件路径>/style.scss:<要输出到的路径>/style.css； 2.监听：sass --watch <要编译的文件路径>/style.scss:<要输出到的路径>/style.css；查看全部
-
值列表 所谓值列表 (lists) 是指 Sass 如何处理 CSS 中： margin: 10px 15px 0 0 或者： font-face: Helvetica, Arial, sans-serif 像上面这样通过空格或者逗号分隔的一系列的值。 事实上，独立的值也被视为值列表——只包含一个值的值列表。 Sass列表函数（Sass list functions）赋予了值列表更多功能 nth函数（nth function） 可以直接访问值列表中的某一项； join函数（join function） 可以将多个值列表连结在一起； append函数（append function） 可以在值列表中添加值； @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。查看全部
-
字符串 SassScript 支持 CSS 的两种字符串类型： 有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'； 无引号字符串 (unquoted strings)，如 sans-serifbold。 在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。 @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); 编译为： body.firefox .header:before { content: "Hi, Firefox users!"; } 需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。查看全部
举报
0/150
提交
取消