文档章节

foundation的sass版本

百变茄
 百变茄
发布于 2014/02/21 06:30
字数 1196
阅读 254
收藏 0

##1什么是sass?##

sass是css预处理器的一种,我们也听说过less,less与sass的最大区别就是,less是基于JavaScript,所以,是在客户端处理的,Sass是基于Ruby的,所以是在服务器端处理的。

##2什么是ruby?##

想要支持sass,那必然要先安装ruby环境,自然先要搞清什么是ruby,不过,我在这里只提一句,它是一种面向对象的编程语言,再准确点是脚本语言,sass就是ruby编写的,因此要在电脑上安装ruby环境。

##3什么是compass##

是基于sass开发的框架,形象的来说就好比js和jquery的关系

##4 ruby的安装##

a下载ruby安装包,地址为http://rubyforge.org/frs/?group_id=167&release_id=47158,选择最新的支持windows的版本,最新版是2.0.0.0,如果你是个新手,则直接下载exe的

b按照提示进行安装,唯一要注意的是选择路径的下方需要勾选Add Ruby executables to you path这一项,否则你要手动去配置。

##5 sass的安装##

在命令行输入gem install sass,等待片刻即可

##6 compass的安装##

在命令行输入gem install compass

##7 zurb-foundation的安装 ##

现在轮到主角的安装了,在命令行输入gem install zurb-foundation即可

如需更新foundation版本,使用gem update zurb-foundation命令

##8 建立一个新项目 ##

在命令行输入cd xx/xx/xx(这里是你要建立项目的路径)

在相应的路径下输入

compass create myprojectname -r zurb-foundation --using foundation

其中myprojectname为你的项目名称

##9 如果你有一个用compass建立的项目,如何升级到foundation呢##

A 找到项目中的config.rb配置文件,在第一行添加require "zurb-foundation",意思是引用zurb-foundation框架

B 命令行输入cd xx/xx/xx(这里是进入你的项目路径)

C 运行compass install foundation

##10 来了解一下项目中的文件##

.sass-cache文件夹是sass预处理的缓存文件

javascripts文件夹不用多说,存放脚本文件

sass文件夹存放sass源文件

stylesheets文件夹存放编译好的最终的css文件

config.rb文件是项目的配置文件,主要配置文件路径

humans.txt这是一个很有趣的文件,没什么实际意义,主要是人情味的传播

index.html是一个展示页

MIT-LICENSE.txt是开发这的一个声明

robots.txt网站通过robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取

##11 sass文件夹中的文件各是什么功能##

_settings.scss是全局设置,主要内容是全局变量,默认情况变量都是关闭的,是用\注释掉了,在顶部 @import "foundation/foundation-global";引用了foundation的默认变量值,如需自己定义变量,可把相应变量前的\删掉,并修改为符合自己的值即可,如果文件中没有自己想要的变量,可以自行添加。

app.scss是生成框架样式的文件,主要构成是最顶部 @import "settings";引用全局变量文件,往下,@import "foundation";引用框架全部部件,再下,是单独的各个部件,是用\注释了,如果你不需要全部的部件,可以把@import "foundation";注释掉,然后再一一开启你所想要的各部件。

normalize.scss是样式初始化的文件

另外要说明的一点,文件中引用的部件样式源文件都在foundation的安装目录下,例如这样的路径

C:/Ruby200/lib/ruby/gems/2.0.0/gems/zurb-foundation-4.0.9/scss/foundation/components/_global.scss

##12 如何把scss文件编译成css文件 ##

修改了sass文件夹中的scss文件后,打开命令窗口,在项目的路径下输入compass watch,stylesheets文件下相应的css文件会自动更新,你可以在修改scss全部完成之后执行此命令,也可以提前执行此命令,可实时更新。当不需要修改时按ctrl+c,按提示输入y进行关闭

##常用命令##

1 cmd

(1)换盘符直接d:,d是你想要的盘符

(2)改变路径cd sass,路径就会成为d:/sass>,sass一定要存在

2 sass

(1)查看scss文件:sass style.scss

(2)编译scss文件:sass style.scss style.css

(3)编译风格:sass —style compressed style.scss style.css

    其中nested:嵌套缩进的css代码,默认值

    expanded:没有缩进的,扩展的css代码

    compact:简洁格式的css代码

    compressed:压缩后的css代码

(4)监听文件:sass —watch style.scss:style.css

(5)监听不同目录下的文件:sass —watch xx/sass:xx/style

3 compass

(1)创建项目:compass create projectname

(2)编译文件:compass compile

(3)编译为压缩文件:compass compile —output-style compressed

(4)监听文件compass watch

资料http://compass-style.org/reference/compass/

本文转载自:http://blog.sina.com.cn/s/blog_662be21c0101ju2p.html

百变茄
粉丝 5
博文 31
码字总数 4682
作品 0
厦门
网页/平面设计
私信 提问
使用前端框架Foundation 4来帮助简化响应式设计开发

日期:2013-3-12 来源:GBin1.com Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站。最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的帮助你快速的开发响应式的网...

gbin1
2013/03/12
4
0
Foundation 6.0.3/6.0.2 发布,Web 的 UI 框架

Foundation 陆续发布了 Foundation 6.0.2 和 Foundation 6.0.3 版本,主要都是 bug 修复。 Foundation 6.0.2 主要改进: Cleaned up the contents of the npm and Bower packages so they ha......

oschina
2015/11/22
1K
1
foundation-sites 6.4.1 发布,响应式前端框架

foundation-sites 6.4.1 已发布。Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。 该版本包含对 6....

王练
2017/07/01
428
2
foundation-sites 6.4.3 发布,响应式前端框架

foundation-sites 6.4.3 已发布。Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。 更新内容: 这个...

达尔文
2017/08/19
801
1
Foundation 6.0.4 发布,Web 的 UI 框架

Foundation 6.0.4 发布,更新如下: 重大更新 Yes, there are a few. We're going to abuse semver a little bit at the beginning here while we massage the Sass API. Renamed Sass funct......

oschina
2015/11/26
2.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
26分钟前
2
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
29分钟前
2
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
47分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
7
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
745
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部