-
%updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; } 没看懂查看全部
-
如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。 如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。 占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。” http://img1.sycdn.imooc.com//55263aa30001913307940364.jpg查看全部
-
通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。查看全部
-
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。查看全部
-
Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起查看全部
-
//welcome to imooc learn Sass @mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); } //有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如： @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)); }查看全部
-
//welcome to imooc learn Sass @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } .btn { @include border-radius; }查看全部
-
//welcome to imooc learn Sass @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(3px); }查看全部
-
@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)); }查看全部
-
.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }查看全部
-
该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。查看全部
-
sass 的默认变量仅需要在值后面加上 !default 即可。查看全部
-
sass的默认变量仅需要在值后面加上!default Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式很简单，只需要在默认变量之前重新声明下变量即可。 比如： $baseLineHeight : 2; $baseLineHeight : 1.5 !default; body { line-height : $baseLineHeight; } 编译后结果就是： body { line-height : 2;查看全部
-
声明变量的符号“$” 变量名称 赋予变量的值查看全部
-
早一点的版本，需要在编译的时候添加“--sourcemap” 参数： sass --watch --scss --sourcemap style.scss:style.css 在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以： sass --watch style.scss:style.css查看全部
举报
0/150
提交
取消