-
unquote($string)：删除字符串中的引号； quote($string)：给字符串添加引号。 unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。查看全部
-
@each $var in <list> $var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。查看全部
-
运算符的两侧要用空格查看全部
-
@for $i from <start> through <end> @for $i from <start> to <end> $i 表示变量 start 表示起始值 end 表示结束值 这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。查看全部
-
字符串函数-To-upper-case()、To-lower-case() 1、To-upper-case() To-upper-case() 函数将字符串小写字母转换成大写字母。如： //SCSS .test { text: to-upper-case(aaaaa); text: to-upper-case(aA-aAAA-aaa); } 编译出来的 css 代码： //CSS .test { text: AAAAA; text: AA-AAAA-AAA; } 2、To-lower-case() To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母： //SCSS .test { text: to-lower-case(AAAAA); text: to-lower-case(aA-aAAA-aaa); } 编译出来的 css 代码： //CSS .test { text: aaaaa; text: aa-aaaa-aaa; }查看全部
-
字符串函数-quote()函数 quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。 如： //SCSS .test1 { content: quote('Hello Sass!'); } .test2 { content: quote("Hello Sass!"); } .test3 { content: quote(ImWebDesigner); } .test4 { content: quote(' '); } 编译出来的 css 代码： //CSS .test1 { content: "Hello Sass!"; } .test2 { content: "Hello Sass!"; } .test3 { content: "ImWebDesigner"; } .test4 { content: ""; } 使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。 .test1 { content: quote(Hello Sass); } 这样使用，编译器马上会报错： error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote') 解决方案就是去掉空格，或者加上引号： .test1 { content: quote(HelloSass); } .test1 { content: quote("Hello Sass"); } 同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。查看全部
-
字符串函数-unquote()函数 字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数： unquote($string):删除字符串中的引号； quote($string)：给字符串添加引号。 1、unquote()函数 unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。 //SCSS .test1 { content: unquote('Hello Sass!') ; } .test2 { content: unquote("'Hello Sass!"); } .test3 { content: unquote("I'm Web Designer"); } .test4 { content: unquote("'Hello Sass!'"); } .test5 { content: unquote('"Hello Sass!"'); } .test6 { content: unquote(Hello Sass); } 编译后的 css 代码： //CSS .test1 { content: Hello Sass!; } .test2 { content: 'Hello Sass!; } .test3 { content: I'm Web Designer; } .test4 { content: 'Hello Sass!'; } .test5 { content: "Hello Sass!"; } .test6 { content: Hello Sass; } 注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。查看全部
-
Sass的函数简介 在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括： 字符串函数 数字函数 列表函数 颜色函数 Introspection 函数 三元函数等 当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。查看全部
-
@each循环就是去遍历一个列表，然后从列表中取出对应的值。 @each循环指令形式： @each $var in <list> $var就是一个变量名，<list>是一个SassScript表达式，他将返回一个列表值。变量$var会在列表中做出遍历，并且遍历出与$var对应的样式块。 这有一个 @each 指令的简单示例： $list: adam john wynn mason kuroir;//$list 就是一个列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; } 编译出CSS： .author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }查看全部
-
@while循环 @while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。 @while指令简单用例： //SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types}{ width: $type-width + $types; } $types: $types - 1; } 编译出来的 CSS .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }查看全部
-
@for循环（下） @for应用在网格系统生成各个格子 class 的代码： //SCSS $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; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } } 编译出来的 CSS: .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { float: left; margin-left: 10px; margin-right: 10px; } .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; } .span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; } .span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; }查看全部
-
@for循环（上） 在 Sass 的 @for 循环中有两种方式： @for $i from <start> through <end> @for $i from <start> through <end> $i 表示变量 start 表示起始值 end 表示结束值 这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。 如下代码，使用through关键字的例子： @for $i from 1 through 3{ .item-#{$i} {width: 2em * $i;} } 编译出来的 CSS: .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } to关键字的例子： @for $i from 1 to 3{ .itme-#{$i} { width: 2 * $i;} } 编译出来的 CSS: .item-1 { width: 2em; } .item-2 { width: 4em; }查看全部
-
@if @if指令是一个SassScript,它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。在Sass中除了@if，还可以配合@else if和@else 一起使用。 $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css style //------------------------------- .ib{ display:inline-block; *display:inline; *zoom:1; } p { color: green; } 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @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; }查看全部
-
@if @for @while的条件都没有括号查看全部
-
length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错查看全部
举报
0/150
提交
取消