-
在Sass中可以有以下强大的功能： 在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”: .btn { @include border-radius; } 编译出来的 CSS: .btn { -webkit-border-radius: 3px; border-radius: 3px; } 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如： .box { @include border-radius(50%); } 编译出来的 CSS: .box { -webkit-border-radius: 50%; border-radius: 50%; }查看全部
-
在Sass的混合宏中可以有以下强大功能 （1）传一个不带值的参数 在混合宏中，可以传一个不带任何值的参数，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。 在调用的时候可以给这个混合宏传一个参数值： .box { @include border-radius(3px); } 这里表示给混合宏传递了一个“border-radius”的值为“3px”。 编译出来的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用： button { @include border-radius; } 这个时候编译出来的 CSS: button { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
在 Sass 中，使用“@mixin”来声明一个混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }查看全部
-
sass 的默认变量仅需要在值后面加上 !default 即可。默认变量对于组件化开发很有用。查看全部
-
避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。查看全部
-
Sass 中的占位符 %placeholder 功能：可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。 %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } 这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码： //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译出来的CSS //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } 从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。查看全部
-
Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。 如下所示： //SCSS .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; } 编译出来之后： //CSS .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; } 从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器： .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }查看全部
-
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。 Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。查看全部
-
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如： @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } 在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的： .box-center { @include center(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)); }查看全部
-
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”: .btn { @include border-radius; } 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如： .box { @include border-radius(50%); }查看全部
-
Sass 的混合宏有一个强大的功能，可以传参，那么在 Sass 中传参主要有以下几种情形： A) 传一个不带值的参数 在混合宏中，可以传一个不带任何值的参数，比如： @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。 在调用的时候可以给这个混合宏传一个参数值： .box { @include border-radius(3px); } 这里表示给混合宏传递了一个“border-radius”的值为“3px”查看全部
-
1、声明混合宏 不带参数混合宏： 在 Sass 中，使用“@mixin”来声明一个混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。 带参数混合宏： 除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 带参数混合宏： 除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 复杂的混合宏： 上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如： @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); } } 这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”查看全部
-
伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。 避免选择器嵌套： 1、选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 2、选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。查看全部
-
scss默认的编译方式是nested这样的编译方式查看全部
举报
0/150
提交
取消