-
在 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。查看全部
-
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//”查看全部
-
混合宏，继承，占位符的区别和优缺点查看全部
-
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。查看全部
-
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。查看全部
-
混合宏的不足：并不能智能的将相同的样式代码块合并在一起。查看全部
-
有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如： @mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } } 在实际调用中： .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); } 编译出来的CSS: .box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }查看全部
-
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”: .btn { @include border-radius; } 编译出来的 CSS: .btn { -webkit-border-radius: 3px; border-radius: 3px; } 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如： .box { @include border-radius(50%); } 编译出来的 CSS: .box { -webkit-border-radius: 50%; border-radius: 50%; }查看全部
-
Sass 的混合宏有一个强大的功能，可以传参，那么在 Sass 中传参主要有以下几种情形： A) 传一个不带值的参数 在混合宏中，可以传一个不带任何值的参数，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。 在调用的时候可以给这个混合宏传一个参数值： .box { @include border-radius(3px); } 这里表示给混合宏传递了一个“border-radius”的值为“3px”。 编译出来的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
@mixin 声明混合宏； @include 调用混合宏；查看全部
-
[Sass]混合宏-声明混合宏 如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 Sass 的混合宏。 声明混合宏：1.不带参数的混合宏；2.带参数的混合宏；3.复杂的混合宏；查看全部
-
&替代元素本身。 避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了： .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我们可以这样写： .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
& 选择符置前表示该元素为嵌套元素的子级，置后表示该元素为嵌套元素的父级。查看全部
-
全局变量就是定义在元素外面的变量，而定义在元素内部的变量 是一个局部变量。局部变量只会在局部范围内覆盖全局变量。 什么时候声明变量？ 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）查看全部
举报
0/150
提交
取消