创建compass和sass工程

来源：互联网发布：淘宝上如何关闭网店编辑：程序博客网时间：2024/06/07 16:36

一、首先在有ruby选项的命令行创建一个compass工程：

（1）创建定制化的compass工程

输入compass create –sass-dir "sass" –css-dir "css" –javascripts-dir "js" –images-dir "img"，于是便生成了一个装样式表的文件夹（名称默认为stylesheets，但我将其命名为css），里面有若干默认文件（如ie.css、print.css和styles.css），一个装有Sass文件的文件夹（默认名称为sass，我保留了这个名字，里面装有ie.scss、print.scss和styles.scss文件），一个装有图像的文件夹（默认名称为images，但我将其重新命名为img），以及一个叫做.sass-cache的隐藏文件夹。默认情况下，Compass的create命令不会为JavaScript创建文件夹，所以需要手动创建。可以通过图形用户界面工具直接创建，也可以通过命令行来创建：md js （Windows下）；mkdir js （Mac OS X系统下）。

创建index.html文件： echo >index.html（Windows下）; touch index.html（Mac OS X系统下）。

（2）创建空的compass工程

输入compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"
--bare参数避免Compass创建和添加一些初始化文件和文件夹，它仅仅创建一个config.rb文件和一个sass文件夹。

(3) 添加html代码（index.html）：

[html] view plain copy
<!DOCTYPE html>  
<html class="no-js" lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>sass练习</title>  
    <meta name="viewport" content="width=device-width">  
    <link rel="stylesheet" href="css/styles.css">  
</head>  
  
<body>  
    <header>  
        <h4>sass学习</h4>  
    </header>  
    <nav>  
        <ul>  
            <li><a href="#">asdfsdgsrg</a></li>  
            <li><a href="#">asdfsdgsrg</a></li>  
            <li><a href="#">asdfsdgsrg</a></li>  
            <li><a href="#">asdfsdgsrg</a></li>  
        </ul>  
    </nav>  
</body>  
  
</html>  

（4）添加sass代码（styles.scss）：

[html] view plain copy
$color: #888;  
$bgColor: #f36;  
  
header {  
    color: $color;  
    background-color: $bgColor;  
}  
  
nav {  
  ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
  }  
  
  li { display: inline-block; }  
  
  a {  
    display: block;  
    padding: 6px 12px;  
    text-decoration: none;  
  }  
}  

（5）命令行输入 compass watch 保存编译styles.scss，若无错误，css文件夹中将自动生成一个styles.css文件。此时修改并保存styles.scss文件，styles.css也会及时改变。

参考：《Sass和Compass设计师指南》

0 0