创建compass和sass工程

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

bingo1992

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

阅读量418

点赞数

分类专栏： sass 文章标签： compass scss

sass 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、首先在有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 plaincopy 
   
 <!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 plaincopy 
   
 $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设计师指南》

bingo1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建compass和sass工程

一、首先在有ruby选项的命令行创建一个compass工程：（1）创建定制化的compass工程输入compass create –sass-dir "sass" –css-dir "css" –javascripts-dir "js" –images-dir "img"，于是便生成了一个装样式表的文件夹（名称默认为stylesheets，但我将其命名为css），里面有若干默认文件
复制链接

扫一扫