-
Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。查看全部
-
join() 只能将两个列表连接成一个列表。如果你无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并 的列表项，在些建议大家使用 join() 函数合并列表项的时候就明确指定 $separator 参数，用来指定合并的列表中使用什么方式来分隔列表项。查看全部
-
quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起。同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起。查看全部
-
unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。查看全部
-
关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。查看全部
-
//练习 $grid-prefix: span!default; $grid-width: 60px!default; $grid-gutter: 20px!default; %grid{ float:left; margin-left:$grid-gutter/2; margin-right:$grid-gutter/2; } //through @for $i from 1 through 12{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1 ); @extend %grid; } } //to @for $i from 1 to 13{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1); @extend %grid; } }查看全部
-
#{$i}是一个字符串，是变量i的值，而$i是一个变量查看全部
-
@for循环（上） 在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式： @for $i from <start> through <end> @for $i from <start> to <end> $i 表示变量 start 表示起始值 end 表示结束值 这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。查看全部
-
@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示： //SCSS @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } 编译出来的CSS: .block { display: block; } .hidden { display: none; }查看全部
-
点击block, block显示 或nine隐藏 //例如： //scss @mixin blockOrHidden($boolean:true){ @if $boolean{ @debug "$boolean is #{$boolean}"; dislap:block; } }查看全部
-
@error 和 @warn、@debug 功能是如出一辙。查看全部
-
类似于console.log()查看全部
-
当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。查看全部
-
.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; } 被编译为： .error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }查看全部
-
Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。 @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： 如果文件的扩展名是 .css。 如果文件名以 http:// 开头。 如果文件名是 url()。 如果 @import 包含了任何媒体查询（media queries）。 也可以通过一个 @import 引入多个文件。例如： @import "rounded-corners", "text-shadow"; 如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。查看全部
举报
0/150
提交
取消