-
但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示： .box { width: 20px + 1em; } 编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”查看全部
-
Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）： nth函数（nth function） 可以直接访问值列表中的某一项； join函数（join function） 可以将多个值列表连结在一起； append函数（append function） 可以在值列表中添加值； @each规则（@each rule） 则能够给值列表中的每个项目添加样式。查看全部
-
1 inch = 96 pixel (X); 1 inch = 72 point (computer) 单位转换器： http://www.unitconversion.org/typography/inchs-to-pixels-y-conversion.html http://www.translatorscafe.com/cafe/ZH-CN/units-converter/typography/查看全部
-
值列表中可以再包含值列表，比如 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。查看全部
-
需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。 SMG?查看全部
-
数据类型 Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型： 数字: 如，1、 2、 13、 10px； 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz； 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)； 布尔型：如，true、 false； 空值：如，null； 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。 SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。 后两个小节详细讲解字符串和值列表数据类型，其它类型与JavaScript中的用法一致。查看全部
-
注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。 在 Sass 中注释有两种方式: 1、使用 ”/* ”开头，结属使用 ”*/ ” 2、使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示.查看全部
-
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分查看全部
-
//SCSS //混合宏 VS 继承 VS 占位符 //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); } } //SCSS 继承的运用 .mt{ margin-top: 5px; } .block { @extend .mt; span { display:block; @extend .mt; } } .header { color: orange; @extend .mt; span{ display:block; @extend .mt; } } //SCSS中占位符的使用 %mt{ margin-top: 5px; } .block { @extend %mt; span { display:block; @extend %mt; } } .header { color: orange; @extend %mt; span{ display:block; @extend %mt; } }查看全部
-
混合宏 VS 继承 VS 占位符: 总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。 个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。 总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。 个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。 总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”查看全部
-
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。查看全部
-
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。查看全部
-
//SCSS //混合宏-声明混合宏 @mixin box-shadow($shadows...){ //有一个特别的参数“…”。 //当混合宏传的参数过多之时，可用...参数来替代 @if length($shadows) >= 1 { -webkit-box-radius: $shadows; -moz-box-radius: $shadows; -ms-box-radius: $shadows; -o-box-radius: $shadows; box-radius: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadows; -moz-box-shadow: $shadows; -ms-box-shadow: $shadows; -o-box-shadow: $shadows; box-shadow: $shadow; } } //混合宏-调用混合宏 .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }查看全部
-
在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值.查看全部
-
@mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; }查看全部
举报
0/150
提交
取消