-
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示查看全部
-
// 可以使用 @extend 中使用插值 %updated-status{ margin-top: 20px; background: #f00; } .selected-status{ font-weight: bold; } $flag: "status"; .nav{ @extend %updated-#{$flag}; @extend .selected-#{$flag}; }查看全部
-
// 插值#{} // 设置属性值的时候你可以使用字符串插入进来 $properties:(margin,padding); @mixin set-value($side, $value){ @each $prop in $properties{ #{$prop}-#{$side}: $value; } } .login-box{ @include set-value(top, 14px); } // 另一个有用的用法是构建一个选择器 @mixin generate-sizes($class,$small,$medium,$big){ .#{$class}-small{font-size:$small;} .#{$class}-medium{font-size:$medium;} .#{$class}-big{font-size:$big;} } @include generate-sizes("header-text",12px,14px,16px); // 第一个限制，这可能会很删除用于 Sass 变量的插值。 $margin-big:40px; $margin-medium:20px; @mixin set-values($size){ margin-top: $margin-#{$size}; } .login-boxs{ @include set-values(big); } 报错：error style.scss (Line 5: Undefined variable: “$margin-".) // 也不能在 mixin 中调用： @mixin updated-status{ margin-top: 20px; background: #f00; } $flag: "status"; .nav{ @include updated-#{$flag}; } 报错： error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")查看全部
-
// 扩展/继承 // 可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器 .btn{ border: 1px solid #ccc; padding: 6px; font-size: 14px; color: #ccc; } .btn-primary{ background-color: #f36; color: #fff; @extend .btn; }查看全部
-
// 占位符 %placeholder // %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码 // 通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。 %mt5{ margin-top: 5px; } %pt5{ padding-top: 5px; } .em{ @extend %mt5; } .block{ @extend %mt5; span{ @extend %pt5; } }查看全部
-
$brand-primary: darken(#428bca, 6.5%) !default; $btn-primary-color: #fff !default; $width: 200px; $btn-primary-border: darken($brand-primary,5%) !default; .box{ width: $width; } .btn-primary{ background: $brand-primary; color: $btn-primary-color; border: 1px solid $btn-primary-border; } // 局部变量 em{ $width: 10px; a{ width: $width; } } // 选择器嵌套 ul{ li{ color: red; .head &{ color: gray; } } } // 属性嵌套 .box{ font: { size: 12px; weight: bold; }; } // 伪类嵌套 .box{ &:before{ content:"this is a before"; } }查看全部
-
// 混合宏-声明混合宏 // 不带参数混合宏： @mixin border-radius1{ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } // 带参数混合宏： @mixin border-radius2($radius: 10px){ -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,0.3); @include prefixer(box-shadow,$shadow); } } // 这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代 // 混合宏-调用混合宏 button{ @include border-radius1; } // 混合宏的参数--传一个带值的参数 .box{ @include border-radius2; } @mixin border-radius3($radius){ -webkit-border-radius: $radius; border-radius: $radius; } // 混合宏的参数--传一个不带值的参数 .btn{ @include border-radius3(2px); } // 混合宏的参数--传多个参数 @mixin size($width, $height){ width: $width; height: $height; } .box-center{ @include size(50px, 20px); } // 混合宏的参数--混合宏的不足:复用重复代码块。但其最大的不足之处是会生成冗余的代码块，并不能智能的将相同的样式代码块合并在一起查看全部
-
属性是动态改变时使用#{$side}调用，若是属性值动态改变则直接调用$side便可查看全部
-
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。查看全部
-
“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。查看全部
-
压缩输出方式 compressed sass --watch test.scss:test.css --style compressed查看全部
-
2、嵌套输出方式 compact sass --watch test.scss:test.css --style compact查看全部
-
2、嵌套输出方式 expanded sass --watch test.scss:test.css --style expanded查看全部
-
1、嵌套输出方式 nested ass --watch test.scss:test.css --style nested查看全部
-
Sass 的编译有多种方法： 命令编译 GUI工具编译 自动化编译查看全部
举报
0/150
提交
取消