sass+compass+bootstrap三剑合璧高效开发记录
1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到windows系统环境变量,免去手动创建烦恼.node.js就点下一步安装就行了
2. win+R cmd 再运行 gem install bootstrap-sass
3.创建一个项目 cd 进入到你所在的项目存放目录,命令行窗口运行 compass creat XXXXX(项目名称)这样就创建了一个项目会生成如下所示目录

4.右键打开 config.rb 在require 'compass/import-once/activate' 下面加一行 require 'bootstrap-sass'
5.打开sass 目录下的 { @import "compass/reset"; } 这个注释或删掉都行,再添加一行 @import "bootstrap";
6.在刚才的命令窗口处compass compile 编译下.这样就可以在 sass 目录下操作你想要操作 .scss 了,然后就compass compile , 当然了,如果你不想老是输入compass compile你就在命令窗处输入 compass watch -p 监听,这样的话就会自动编译你更改的.scss 或.sass文件,将其输出到stylesheets中的对应文件.css中
好了,写完了。适合对sass ,compass,bootstrap有所了解的园友。
补充下,如果没有创建新的项目可在命令行窗口中使用此命令 compass creat xxxxx(项目名) -r bootstrap-sass --using bootstrap 之后会得到如下文件目录

sass+compass+bootstrap三剑合璧高效开发记录的更多相关文章
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是 ...
- Android APP高效开发的十大建议
在使用Android开发APP过程中,为什么确保最优化.运行流畅且不会使Android系统出现问题至关重要呢?因为影响APP产品效率的每一个问题,如:耗电或内存占用情况等,都是关乎APP成功与否关键因 ...
- LNMP系列网站零基础开发记录(三)
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- windows下的SASS/Compass的安装与卸载
认识SASS/Compass SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS与Compass的安装说明 SASS在Wind ...
- EXT.NET高效开发(二)——封装函数
在上一篇<EXT.NET高效开发(一)--概述>中,大致的介绍了一下EXT.NET.那么本篇就要继续完成未完成的事业了.说到高效开发,那就是八仙过海各显神通.比如使用代码生成器,这点大家可 ...
- .Net 高效开发之不可错过的实用工具(转)
.Net 高效开发之不可错过的实用工具(转) 本文摘自: http://www.cnblogs.com/powertoolsteam/p/5240908.html#3372237 Visual Stu ...
- 20145337实验三实验报告——敏捷开发与XP实践
20145337实验三实验报告--敏捷开发与XP实践 实验名称 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 ** 实验步骤**### 敏捷开发与XP 软件工程包括下列领域:软件需求 ...
- window 安装 sass compass 记录
1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位 ...
随机推荐
- Linq专题之Linq查询from子句
Linq查询表达式包含8个常用的子句:from.where.select.join.into.orderby.group.let.我们来看看详细的说明. from: 指定查询操作的 ...
- 重构第16天 封装条件(Encapsulate Conditional)
理解:本文中的“封装条件”是指条件关系比较复杂时,代码的可读性会比较差,所以这时我们应当根据条件表达式是否需要参数将条件表达式提取成可读性更好的属性或者方法,如果条件表达式不需要参数则可以提取成属性, ...
- AEAI Portal V3.5.2门户集成平台发版说明
AEAI Portal门户集成平台为数通畅联的核心产品,本着分享传递的理念,数通畅联将Portal_server.Portal_portlet两个项目开源,目的在于满足客户与伙伴的OEM需求,以及为广 ...
- mysql数据库入门
在很多地方都有人提到MySQL这个数据,之前没有接触过的mysql数据库的童鞋们可以跟我一起走进mysql的世界. http://hovertree.com/menu/mysql/ 安装我就不多说了, ...
- ASP.Net中Session失效的一种编程思路
在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的 ...
- C#的pictureBox怎样使用多张图片简单切换
首先,先创建一个新的winform项目ImageTest,选择窗体,起名我ImageForm,在ImageForm拉一个picturebox控件,一个控制器trimer,一个相册imageList,在 ...
- 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化
[源码下载] 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...
- [转]基于 Quercus 的手游项目终于上线了
原文:http://blog.andsky.com/quercus-php-ngame/ 经过半年的开发,我们第一款手游戏终于开发完毕,架构使用了 netty + Quercus 实现用 php 通过 ...
- (旧)子数涵数·DW——图文混排页面
一.首先,打开Dreamweaver,新建一个的HTML项目. 二.在设计区里,写一些文字,随便写一点(也可以在代码区中的<body>和</body>之间写). 三.插入一张图 ...
- H5调用Android拨打电话
1.AndroidAndJSInterface.java class AndroidAndJSInterface { /** * 该方法将被js调用,用于加载数据 */ @JavascriptInte ...