为了账号安全,请及时绑定邮箱和手机立即绑定
  • 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
提交
取消
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则
意见反馈 邀请有奖 帮助中心 APP下载
官方微信