Sass与Compass学习环境搭建

时间 2019-12-04

标签 sass compass 学习环境搭建繁體版

原文原文链接

1. Sass与Compass安装

1.1. 安装Ruby

我目前学习用的是window7系统，所以只介绍windows下的安装。去网址http://rubyinstaller.org/downloads/下载最新版本的Ruby安装程序并运行。按提示安装过程当中，在第三个窗口点击选中中间复选框，如图：
javascript

而后，就能够在开始->程序中看到Ruby程序了，打开Start Command Prompt with Ruby.css

1.2. 安装SassCompass

输入:html

gem install sass 
gem install compass

若是安装不成功，那么多是因为网络的缘由，所以须要换一个国内的镜像。以前国内的Ruby镜像一直是淘宝在维护，就是这个https://ruby.taobao.org/，不过好像目前不维护了（意思就是无法使用了）,如今国内使用的是https://gems.ruby-china.org/，输入：java

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

替换镜像的时候，可能会出现如图状况
windows

这个多是https的缘故（具体缘由我也不太清楚），但把 https 换成 http 就能够了。而后输入：sass

gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org 如图

而后再次输入：ruby

gem install sass
gem install compass

// 安装完成以后，看看是否成功
sass -v
compass -v

好了，Sass与Compass就完成了。网络

2. 新建Compass项目

2.1 建立Compass工程

建立默认工程
在命令行输入：工具
```
compass create 项目名称
```
好了，一个compass项目就建立成功了，目录以下：
学习

建立定制化的Compass工程
在命令行输入：

compass create 项目名称 --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

目录以下：

建立空的Compass工程
命令行输入：

compass create 项目名称 --bare --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

目录以下：

建立完Compass工程以后，咱们还要根据项目须要新建一些文件夹（js、css、img）与文件（index.html、js/main.js），最终的项目目录大概是这样的（视我的项目须要）：

2.2 理解config.rb文件

config.rb文件内容：

# 导入其余compass插件.
require ""

# 部署时把如下路径设置为工程根目录
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# 根据我的偏好选择输出样式
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# 想经过compass帮助工具打开资源相对路径功能，去掉下面注释前的“#”
# relative_assets = true

# 想关闭显示在选择器原始位置前的调式注释，去掉下面注释前的“#”
line_comments = false

# 下面的内容和sass的缩进语法有关，感兴趣的自行阅读，这里不作介绍
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

下面对config.vb文件进行详细介绍

添加须要的插件
如何插件均可以经过 require "" 方式添加
设定名称和路径

# 部署时把如下路径设置为工程根目录
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

上面这些路径都是相对于HTTP的路径，因此只要HTTP路径保持在根目录下（根目录用‘/’表示）,其余文件夹的路径都是相对于这个跟目录的路径。
例如，你须要给工程添加Web字体，在css/fonts下存储字体文件，那么你须要添加下面的代码：

fonts_dir = "css/fonts"

设定CSS输出样式

默认输出方式

// 将config.vb文件不设置或者设置为：
  output_style = :expanded 
  
  // sass文件
  .main {
   color : #000;
   .content {
       color : #aaa;
   }
  }
  
  // css文件
  .main {
   color : #000;
  }
  .main .content {
   color : #aaa;
  }

嵌套输出方式

// 将config.vb文件设置为：
  output_style = :nested
  
  // sass文件
  .main {
   color : #000;
   .content {
       color : #aaa;
   }
  }
  
  // css文件
  .main {
   color : #000;}
   .main .content {
       color : #aaa;}

紧密输出方式

// 将config.vb文件设置为：
  output_style = :compact
  
  // sass文件
  .main {
   color : #000;
   .content {
       color : #aaa;
   }
  }
  
  // css文件
  .main { color : #000;}
  .main .content {color : #aaa;}

压缩输出方式

// 将config.vb文件设置为：
  output_style = :compressed
  
  // sass文件
  .main {
   color : #000;
   .content {
       color : #aaa;
   }
  }
  
  // css文件
  .main {color : #000;}.main .content {color : #aaa;}

去掉注释

// 将config.vb文件设置为：
# 想关闭显示在选择器原始位置前的调式注释，去掉下面注释前的“#”
  line_comments = false

凸显注释

// 在压缩CSS文件下，又须要添加注释，那么就要用凸显注释了
// sass文件
/*! 凸显注释内容 */
.main {
    color : #999;
    .content {
        color : #aaa;
    }
}

// CSS文件
/*! 凸显注释内容*/.main{color:#999;}.main .content{color:#aaa;}

相对资源路径功能

// 设置
# 想经过compass帮助工具打开资源相对路径功能，去掉下面注释前的“#”
  relative_assets = true
  
  // 那么在sass文件中只须要
  background-image: image-url('image.png');
  
  // 生成的CSS文件就变成了
  backgroun-image: url('../img/image.png');

好了，项目环境已经搭建好了，在正式开始以前，还有一点须要注意的。

3. 项目监控

对config.vb文件修改以后，须要先清理.sass-cache文件夹。在命令行输入:

compass clean

固然，你也能够手动删除.sass-cache文件夹。

开启监控

在命令行输入：

compass watch