-
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示： //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]混合宏的参数--混合宏的不足 混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如： @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } .box { @include border-radius; margin-bottom: 5px; } .btn { @include border-radius; } 示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS： .box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; } .btn { -webkit-border-radius: 3px; border-radius: 3px; } 上例明显可以看出，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。查看全部
-
[Sass]混合宏的参数--传多个参数 @mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); }查看全部
-
[Sass]混合宏的参数--传一个带值的参数 @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } .btn { @include border-radius; }查看全部
-
[Sass]混合宏的参数--传一个不带值的参数 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”。 编译出来的 CSS: .box { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
[Sass]混合宏-声明混合宏 如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 Sass 的混合宏。 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; } 复杂的混合宏： 上面是一个简单的定义混合宏的方法，当然， 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) ”。查看全部
-
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧： .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; } 避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
[Sass]嵌套-属性嵌套 Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了： .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我们可以这样写： .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
1、选择器嵌套 假设我们有一段这样的结构： <header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header> 想选中 header 中的 a 标签，在写 CSS 会这样写： nav a { color:red; } header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header & { color:green; } } }查看全部
-
上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。 //SCSS $color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量（全局变量 $color 的影子） a { color: $color;//调用局部变量 } } 什么时候声明变量？ 我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。 温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下： http://sassmeister.com/查看全部
-
sass 的默认变量仅需要在值后面加上 !default 即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }查看全部
-
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数： sass --watch --scss --sourcemap style.scss:style.css 在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以： sass --watch style.scss:style.css查看全部
-
[Sass]压缩输出方式 compressed 2、压缩输出方式 compressed nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style compressed”: sass --watch test.scss:test.css --style compressed 压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格： nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}查看全部
-
[Sass]紧凑输出方式 compact 2、嵌套输出方式 compact nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style compact”: sass --watch test.scss:test.css --style compact 该方式适合那些喜欢单行 CSS 样式格式的朋友，编译后的代码如下： nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
[Sass]展开输出方式 expanded 2、嵌套输出方式 expanded nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style expanded”: sass --watch test.scss:test.css --style expanded 这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来： nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
举报
0/150
提交
取消