-
Sass 混合宏除了能传一个参数之外，还可以传多个参数 有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如： @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)); } 编译出来的CSS: .box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }查看全部
-
变量:重复使用单一的样式 混合宏：重复使用大段的样式 声明混合宏： 不带参数混合宏：在 Sass 中，使用“@mixin”来声明一个混合宏。 @mixin name{} 声明混合宏 @include name; 调用混合宏查看全部
-
避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
Sass 前世今生： Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。 Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。 为什么早期不如 LESS 普及？ 虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早，但远不如 LESS 普及的原因。查看全部
-
属性嵌套 font-size font-weight. 可以合并成 font：{size: weight: }查看全部
-
sass -v //检查 sass 版本 gem update sass //更新 sass查看全部
-
Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）： nth函数（nth function） 可以直接访问值列表中的某一项； join函数（join function） 可以将多个值列表连结在一起； append函数（append function） 可以在值列表中添加值； @each规则（@each rule） 则能够给值列表中的每个项目添加样式查看全部
-
in是英寸。8in即8英寸。 1英寸约=2.54厘米,1英寸大约是96像素 width:20px+8in; 8in=8*96px = 768px 即width=20px + 768px = 788px;查看全部
-
‘/* */’会在编译出来的 CSS 显示，//在编译出来的 CSS 中不会显示查看全部
-
如果没有安装ruby 使用命令行 brew install ruby 来安装ruby查看全部
-
第一步，安装ruby，在命令终端输入 ruby －v 查看。 第二步，如果已经成功安装了ruby ，在命令行输入sudo gem install sass查看全部
-
%mt10 { margin-top: 10px; } %pt10 { padding-top: 10px; } .allbox{ @extend %mt10; @extend %pt10; } .onlybox{ @extend %pt10; } .more{ @extend %mt10; .title{ @extend %pt10; } } 编译 .allbox, .more { margin-top: 10px; } .allbox, .onlybox, .more .title { padding-top: 10px; } 总结：通过@extend调用占位符编译后的是按属性分类查看全部
-
@mixin宏可以设置参数值来调用 @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 调用时候 .diaoyong{ @include border-radius; }查看全部
-
&选择符置前表示该元素为嵌套元素的子级，置后表示该元素为嵌套元素的父级。查看全部
-
两个小时之内看完查看全部
举报
0/150
提交
取消