-
Miscellaneous函数：if($condition,$if-true,$if-false)查看全部
-
Introspection函数： type-of($value)：返回一个值的类型 unit($number)：返回一个值的单位； unitless($number)：判断一个值是否带有带位 comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并查看全部
-
列表函数： length($list)：返回一个列表的长度值； nth($list, $n)：返回一个列表中指定的某个标签值 join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； append($list1, $val, [$separator])：将某个值放在列表的最后； zip($lists…)：将几个列表结合成一个多维的列表； index($list, $value)：返回一个值在列表中的位置值。查看全部
-
To-upper-case(); //函数将字符串小写字母转换成大写字母 To-lower-case(); //函数将字符串大写字母转换成小写字母查看全部
-
字符串函数： unquote($string)：删除字符串中的引号； quote($string)：给字符串添加引号。查看全部
-
@while循环： 只要@while后面的表达式值为真就编译查看全部
-
@if & @else:根据条件来使用不同的样式查看全部
-
截图不公开笔记查看全部
-
through 表示包括 end 这个数，而 to 则不包括 end 这个数。查看全部
-
fdf查看全部
-
@debug @debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug: @debug 10em + 12em; 会输出： Line 1 DEBUG: 22em查看全部
-
@at-root @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例： .a { color: red; .b { color: orange; .c { color: yellow; @at-root .d { color: green; } } } } 编译出来的CSS .a { color: red; } .a .b { color: orange; } .a .b .c { color: yellow; } .d { color: green; }查看全部
-
@extend Sass 中的 @extend 是用来扩展选择器或占位符。比如： .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; } 详细的可以回顾前面介绍的继承样式部分。查看全部
-
@media Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例： .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } 编译出来： .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } @media 也可以嵌套 @media： @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } 此时编译出来： @media screen and (orientation: landscape) { .sidebar { width: 500px; } } 在使用 @media 时，还可以使用插件#{}: $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } } 编译出来的 CSS： @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } }查看全部
-
@import Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。 @import Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。 Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。 @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： 如果文件的扩展名是 .css。 如果文件名以 http:// 开头。 如果文件名是 url()。 如果 @import 包含了任何媒体查询（media queries）。 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。 例如： @import "foo.scss"; 或 @import "foo"; 两者都将引入 foo.scss 文件， 而 @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 将被编译为： @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 也可以通过一个 @import 引入多个文件。例如： @import "rounded-corners", "text-shadow"; 将引入 rounded-corners 和 text-shadow 两个文件。查看全部
举报
0/150
提交
取消