-
Sass 的编译有多种方法： 命令编译 GUI工具编译 自动化编译查看全部
-
Ubuntu / Debian 的同学，apt-get install ruby是不能正常安装ruby2.0以上版本的，而最新版的sass又非要2.0版以上的ruby。解决方法如下： $ sudo apt-get update $ sudo apt-get install build-essential zlib1g-dev libssl-dev libreadline6-dev libyaml-dev $ cd /tmp # 接下来下载ruby，哪个版本你自己定，如果下面命令这一步下载失败就自己手动去别的地方下载 $ wget http://cache.ruby-lang.org/pub/ruby/2.0/ruby-2.0.0-p481.tar.gz $ tar -xvzf ruby-2.0.0-p481.tar.gz $ cd ruby-2.0.0-p481/ $ ./configure --prefix=/usr/local $ make $ sudo make install 来源：http://stackoverflow.com/questions/16222738/how-do-i-install-ruby-2-0-0-correctly-on-ubuntu-12-04查看全部
-
在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格： 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
GUI 界面工具编译 Koala (http://koala-app.com/) Compass.app（http://compass.kkbox.com/） Scout（http://mhs.github.io/scout-app/） CodeKit（https://incident57.com/codekit/index.html） Prepros（https://prepros.io/） 推荐使用： 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 --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css查看全部
-
scss与css写法无差别 sass书写时不带大括号和分号,但要依靠严格的缩进方式 body color:#fff fon-size:12px查看全部
-
不同样式风格的输出方法: 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
什么是 CSS 预处理器？ 定义： CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。查看全部
-
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型： 数字: 如，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。 SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。查看全部
-
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用： button { @include border-radius; } 这个时候编译出来的 CSS: button { -webkit-border-radius: 3px; border-radius: 3px; }查看全部
-
避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
Sass 的变量包括三个部分： 声明变量的符号“$” 变量名称 赋予变量的值 来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量： $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;查看全部
-
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数： sass --watch --scss --sourcemap style.scss:style.css 在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以： sass --watch style.scss:style.css 在命令终端，你将看到一个信息： >>> Change detected to: style.scss write style.css write style.css.map 这时你就可以像前面展示的 gif 图一样，调试你的 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}查看全部
举报
0/150
提交
取消