省略sass/compass安装的过程^_^
sass
1. 常用命令
sass main.scss //打印到控制台
sass main.scss main.css //输出到main.css中
sass-convert main.scss main.sass// scss sass相互转化
2. 中文编译问题
sass文件中,代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错,需要修改ruby对中文的支持。
-
找到ruby的安装目录,里面也有sass模块,找到文件
engine.rb
。如这个路径:C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb(用everything搜索engine.rb) -
在这个文件里面
engine.rb
,添加一行代码:
Encoding.default_external = Encoding.find(‘utf-8’)
放在所有的require XXXX 之后即可。
3. sass语法
1.文件导入
sass文件名规则,文件名_variables.scss
导入的时候只需要这么写:
import 'variables'
可以看到不需要下划线和后缀,sass编译器认为variables == _variables.scss
2. 变量
变量的声明:
$baseSize:62.5%;
$baseColor: #f0f;
变量的使用
html {
font-size: $baseSize;
color: $baseColor;
}
3. mixin
mixin声明
@mixin col-6 {
width: 50%;
float: left;
}
@mixin col($width: 40%) {
width: $width;
float: left;
}
@mixin col-sm($width: 50%) {
@media (min-width: 768px) {
width: $width;
float: left;
}
}
mixin使用
div.content {
/*@include col-6();*/
//@include col(); //无参数括号可以省略
@include col-sm();
&:hover {
background-color:#f5f5f5;
};
@at-root //编译后寻址路径不再是:div.content .content-title{}
.content-title {
color: #0f0;
font-size: 2em;
}
}
4. extend
extend使用
//编译到css中
/* .error {
color: red;
} */
//不会编译到css中
%error {
color: red;
}
.serious-error {
@extend %error;
border: 1px solid red;
}
compass
1. 文件配置config.rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
2. compass常用命令
compass create myproject //创建compass项目
compass compile //编译
compass watch //监听文件修改,及时编译,需要配置文件
参考资料
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.ruanyifeng.com/blog/2012/11/compass.html
http://www.imooc.com/learn/371
http://www.imooc.com/learn/364