demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855

为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化css,可以将写程序的各种理论融入其中,打造NB的产品

首先 安装 ruby

http://rubyinstaller.org/downloads/

注意 建议安装ruby1.93 这个版本 最新版的ruby不靠谱 我在sass和Sencha Touch里面遭遇过倒霉的问题

安装了ruby 还要添加ruby的淘宝镜像,这样安装快

http://ruby.taobao.org/

在cmd里面

执行方法 添加方法

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources –l

安装sass 很简单

gem install sass
安装compass 也很简单
gem install compass
sass 作为一个语法规则
compass 作为一个编译器和一个css3库,也就是说写好的sass 代码要编译,才能在浏览器里面显示,
苍天,我们要实时调试!
nodejs 和grunt 解决了这个问题
安装nodejs
http://nodejs.org/download/ 
下载安装 win的安装包即可,安装完成后查看版本号,确认安装成功
没错 安装完后 node也要添加源的镜像 http://cnpmjs.org/   还有一个 http://npm.taobao.org/
我搬家后 不知道是cnpm 挂了还是咋地 建议用淘宝的
添加方法
npm install -g cnpm --registry=http://r.cnpmjs.org

这样添加完后 再用npm安装的时候,用cnpm 代替速度很快的

nodejs装完后,可以开始装grunt了

安装可以参考http://www.gruntjs.net/docs/getting-started/

安装grunt 可以分为两个部分

1 是grunt 本身

2 是grunt和命令行的交互的cli

ps 这里说个ubuntu 上,通过ubuntu官方安装源的问题,因为官方安装源在命令行里只能用“nodejs” 命令 调用node,所以grunt就失效了,需要在命令行里面添加命令映射,具体命令我没存在win下面,谷歌下就可以找到

先安装cli

npm install -g grunt-cli 或 cnpm install -g grunt-cli  通过cpm 镜像安装

然后安装grunt

npm install grunt 或者  cnpm install grunt 通过cpm 镜像安装

安装完后 就可以准备 grunt 的配置文件和一个node项目的配置文件和准备需要安装的插件

详细可以参考这里

http://www.w3cplus.com/tools/getting-started-with-grunt.html

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

还有 livereload 插件 livereload 主要用来实现页面伴随这文件的修改而自动刷新

livereload 有两个方式 1 是自己启动一个服务器

2结合iis 等服务器+谷歌浏览器插件

具体 可以参考 这里 http://www.cnblogs.com/qqloving/p/3614613.html

这里有如何创建一个 项目的具体步骤

例如 进入cmd 进入一个目录 执行 $ compass create webfans 创建一个名字叫webfans的项目

项目结构图如下

可以看到里 在 config 里面存储了基本的配置(建议配置和面向ruby编译器的配置)

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

分别制定 css目录 sass目录 和图片目录 js目录

要搭配nodejs发开工具 还需要添加node和grunt的配置文件

package.json,Gruntfile.js

首先配置package 基本的配置,先安装时时编译需要的插件

{
"name": "webjs",
"version": "0.0.0",
"description": "",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "0.4.3",
"grunt-sass": "0.6.1"
}
}

Gruntfile 的基本配置(实现实时编译) 插件为'grunt-sass'

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
tasks: ['sass:dist']
}
},
sass: {
dist: {
files: {
'stylesheets/styles.css': 'sass/styles.scss'
}
}
}
});
grunt.registerTask('default', ['sass:dist', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};

另外一个插件为grunt-contrib-compass

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
tasks: ['compass:dist']
}
},
sass: {
dist: {
files: {
'stylesheets/styles.css': 'sass/styles.scss'
}
}
},
compass: {
dist: {
options: {
config: 'config.rb'
}
}
} });
grunt.registerTask('default', ['compass:dist', 'watch']);
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
};

相比 我更喜欢这个插件

这个是插件 配置详解

https://www.npmjs.org/package/grunt-contrib-compass

不过一般用默认的就可以了

配置完成后运行 grunt 就可以了

不过现在还不可以实现实时刷新

实时刷新的配置 需要谷歌插件

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect:{
//这里为插件子刷新方式
options: {
port: 9000,
hostname: 'localhost', //默认就是这个值,可配置为本机某个 IP,localhost 或域名
livereload: 35729 //声明给 watch 监听的端口
},
server: {
options: {
open: true, //自动打开网页 http://
base: [
'.' //主目录
]
}
} },
watch: {
sass: {
files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
tasks: ['compass:dist']
},
livereload: {
options: {
livereload:'<%=connect.options.livereload%>' //监听前面声明的端口 35729
},
files:[ //下面文件的改变就会实时刷新网页
'app/*.html',
'stylesheets/{,*/}*.css',
'javascripts/{,*/}*.js',
'images/{,*/}*.{png,jpg}' ]
}
}, compass: {
dist: {
options: {
config: 'config.rb'
}
}
} }); grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['compass:dist','connect:server', 'watch']);
};

到此 配置完了

Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]的更多相关文章

  1. maven 安装、运行、获取帮助 —— maven权威指南学习笔记(二)

    这部分在网上很容易找到详细教程,这里就略写了. 基础:系统有配置好的jdk,通过 命令行 java -version,有类似下面的提示,表示java环境以配好 下载maven:官网 http://ma ...

  2. Redis的安装和环境的搭建并设置服务(Redis学习笔记一)

    由于Redis在win上安装实在是太过于麻烦.我们选择把redis安装部署在linux上,然后远程连接. 安装Redis (1)cd /usr/src 进入下载目录 (1) yum install - ...

  3. Deep Learning 32: 自己写的keras的一个callbacks函数,解决keras中不能在每个epoch实时显示学习速率learning rate的问题

    一.问题: keras中不能在每个epoch实时显示学习速率learning rate,从而方便调试,实际上也是为了调试解决这个问题:Deep Learning 31: 不同版本的keras,对同样的 ...

  4. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  5. Ruby与sass 与compass安装

     Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables ...

  6. sass和compass安装

    安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...

  7. Visual Studio 2013使用SASS和Compass--SASS和Compass安装

    你需要安装ruby 你需要安装SASS/Compass 安装sass,在命令行中输入: $ gem install sass 你可能会问gem是什么?gem是ruby的包管理器.包的概念呢,就是一个为 ...

  8. 前端自动化神器LiveReload配合浏览器和less/sass使用方法

    前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...

  9. Sass之Compass学习笔记

    compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...

随机推荐

  1. struts2的DevMode模式

    在实际应用开发或者是产品部署的时候,对应着两种模式: 1.开发模式(devMode),此时,DevMode=true 2.产品模式(proMode),此时,DevMode=false 在一些服务器或者 ...

  2. rsync快速删除海量文件

    rsync --delete-before -avH --progress --stats /tmp/empty/ /var/spool/postfix/maildrop/ 由于业务侧使用时,一些脚本 ...

  3. NOSDK--SDK一键打包及统一接入的实现(前言)

    前言 一,一键打包的实现 1.1 shell脚本执行流程介绍 1.2 自动刷新mk文件的脚本介绍 1.3 编译及拷贝资源的脚本介绍 1.4 打包及签名的脚本介绍 1.5 mac下的脚本环境配置及脚本的 ...

  4. PHP常量详解:define和const的区别

    常量是一个简单值的标识符(名字).如同其名称所暗示的,在脚本执行期间该值不能改变(除了所谓的魔术常量,它们其实不是常量).常量默认为大小写敏感.通常常量标识符总是大写的. 可以用 define() 函 ...

  5. 机器学习 k-临近算法

    程序清单一: from numpy import * import operator def creatDataSet(): group = array([[1.0,1.1],[1.0,1.0],[0 ...

  6. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  7. 主流浏览器css兼容问题的总结

    最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...

  8. serialize存入数组

    原代码 def get_type type_list = "" if categories.include?"movie" type_list += " ...

  9. 安装切换openjdk

    安装各种版本openjdk sudo apt-get install openjdk-6-jdk sudo apt-get install openjdk-7-jdk sudo apt-get ins ...

  10. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...