-
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)查看全部
-
单文件编译： sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 多文件编译： sass sass/:css/查看全部
-
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量==之前==重新声明下变量即可。查看全部
-
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。查看全部
-
为什么是这样写？查看全部
-
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。查看全部
-
SASS 是 SAS 吗？查看全部
-
什么是 CSS 预处理器？ 定义： CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。查看全部
-
没看懂查看全部
-
Sass选择器嵌套： 想要编译的结果如下所示： nav a { color:red; } header nav a { color:green; } 可以通过选择器嵌套实现： nav { a { color: red; header & { color:green; } } }查看全部
-
定义了变量： $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7 $btn-primary-color: #fff !default; $btn-primary-bg : $brand-primary !default; $btn-primary-border : darken($btn-primary-bg, 5%) !default; 在按钮 button 中调用，可以按下面的方式调用 .btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border; } 编译出来的CSS: .btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }查看全部
-
普通变量 定义之后可以在全局范围内使用。 $fontSize: 12px; body{ font-size:$fontSize; } 默认变量 sass 的默认变量仅需要在值后面加上 !default 即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; } sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } 现在编译后的 line-height 为 2查看全部
-
css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，将css作为目标生成文件。 可以在css中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让测试时更加简洁、适应性更强、可读性更佳、更易于代码的维护等好处。 css预处理语言 如 sass less stylus trbine swithch css css cacheer dt css查看全部
-
压缩输出方式 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 压缩好的 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}查看全部
-
嵌套输出方式 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 编译后的代码如下： 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
提交
取消