-
sass -v查看版本 gem update sass 更新查看全部
-
在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads 在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况）Add Ruby executables to ypur PATH 淘宝 RubyGems 镜像安装 Sass 第一步：移动默认的源 gem sources --remove https://rubygems.org/ 第二步：指定淘宝的源 gem sources -a https://ruby.taobao.org/ 第三步：查看指定的源是不是淘宝源 gem sources -l 返回结果如下： *** CURRENT SOURCES *** https://ruby.taobao.org 请确保只有 ruby.taobao.org。如果无误之后，执行下面的命令： gem install sass查看全部
-
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。查看全部
-
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 这种带值得参数比较更好。可以直接调用：.btn { @include border-radius; } 如果需要别的值的时候，也可以直接覆盖： .btn { @include border-radius(8px); }查看全部
-
$list: twitter,facebook,github,weibo; @for $i from 1 through length($list){ .icon-#{nth($list,$i)}{ background-postion: 0 -20px * $i; } }查看全部
-
注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为： 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//” 第一种方式会在编译后的css文件中显示出来。查看全部
-
插值#{} 使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。查看全部
-
混合宏 VS 继承 VS 占位符 初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果： a) Sass 中的混合宏使用 举例代码见右侧 2-24 行 编译出来的 CSS 见右侧结果窗口。 总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。 个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。 b) Sass 中继承 同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用： 代码见右侧 26-48 行 总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。 个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。 c) 占位符 最后来看占位符，将上面代码中的基类 .mt 换成 Sass 的占位符格式： 代码见右侧 50-72 行 总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”查看全部
-
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。 通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。查看全部
-
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。 实现代码的重用。查看全部
-
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)); } 编译出来的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 border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”: .btn { @include border-radius; } 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值查看全部
-
混合宏的参数--传一个不带值的参数 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”。查看全部
-
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用： button { @include border-radius; }查看全部
举报
0/150
提交
取消