创建compass和sass工程

最新推荐文章于 2022-11-13 10:03:52 发布

huang_bingo

最新推荐文章于 2022-11-13 10:03:52 发布

阅读量1.4k

点赞数

文章标签： compass sass

一、首先在有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）：

<!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）：

$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设计师指南》