-
在默认变量之前，重新声明。而不是之后查看全部
-
sass --watch scss文件 : css文件 --style compressed 编译成压缩的css文件查看全部
-
gulp自动化编译SCSS文件查看全部
-
sass --watch scss文件 : css文件查看全部
-
gem sources --remove https://rubygems.org/ 不要省略最后一个斜杠 gem sources -a https://ruby.taobao.org/ gem sources -l gem install sass查看全部
-
sass是以严格的缩进式语法规则来写，不带{}和；查看全部
-
“@extend”来继承已存在的类样式块，从而实现代码的继承 .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 编译出来之后： .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; } .btn-second { background-clor: orange; color: #fff; }查看全部
-
在混合宏中，可以传一个不带任何值的参数，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在调用的时候可以给这个混合宏传一个参数值： .box { @include border-radius(3px); }查看全部
-
使用@include 调用声明好的混合宏 @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } button { @include border-radius; }查看全部
-
在 Sass 中，使用“@mixin”来声明一个混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 复杂的混合宏 @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }查看全部
-
伪类嵌套 .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 编译出来的 CSS clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }查看全部
-
属性嵌套 .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我们可以这样写： .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
选择器嵌套 nav a { color:red; } header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header & { color:green; } } }查看全部
-
Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套查看全部
-
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } 编译后的css代码： body{ line-height:2; }查看全部
举报
0/150
提交
取消