-
GUI界面工具编译 使用Koala,国产的Sass图形编译工具 http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html查看全部
-
命令编译:最简单直接 sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css eg: sass --watch sass/bootstrap.scss:css/bootstrap.css查看全部
-
使用sass来写css时,还是要引入css文件 Sass的编译方法 1.命令编译 2.GUI工具编译 3.自动化编译查看全部
-
1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似查看全部
-
”/ ”符号被当作除法运算符时有以下几种情况: • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。查看全部
-
常用嵌套为:属性嵌套与伪类嵌套; 避免使用选择器嵌套;查看全部
-
header &表示header作为nav的父集 & header表示header作为nav的子集查看全部
-
&是什么意思? nav { a { color: red; header & { color:green; } } }查看全部
-
Sass编译注意事项: 1、字符编码:utf-8; 2、文件命名不用中文字符。查看全部
-
数字: 如,1、 2、 13、 10px; 字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz; 颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5); 布尔型:如,true、 false; 空值:如,null; 值列表:用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。查看全部
-
占位符 总结:编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”查看全部
-
Sass 中继承 总结:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是 CSSer 期望看到。但是他不能传变量参数。 建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。查看全部
-
Sass 中的混合宏使用 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处,他可以传参数。 建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。查看全部
-
有一个特别的参数“…”。当混合宏传的参数过多之时,可以使用参数来替代,如: @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 的嵌套分为三种: 选择器嵌套 属性嵌套 伪类嵌套查看全部
举报
0/150
提交
取消