sass+compass生成css的使用方法(总结)

1 篇文章 0 订阅

如何使用compass生成css

补充一下,刚学前端那会真的是什么都想学一下,可能学的都不透彻,甚至不清楚到底是干嘛的,但是纯属小白的日常记录,还请大神们看到勿喷。
sass使用的很广泛,网上的使用教程很多,看之后基本了解,但是弄不清楚怎么使用compass在css与sass之间互相转换。sass主要是用在css样式上,是代码量减少,层级关系更清晰。像是在c语言中的函数,定义一个函数之后,可以在main函数中直接调用,这样在以后需要修改的时候不需要一个个改,直接在定义的函数中修改一处即可。使用起来简单方便,容易上手。Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

####第一步:配置环境
1、因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先在官网下载个ruby,链接:http://railsinstaller.org/en

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境
这里写图片描述

2、在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby
这里写图片描述

####第二步:安装sass
直接在命令行输入:

gem install sass

升级sass版本的命令行为:

gem update sass

查看sass版本的命令行为:

sass -v

你也可以运行帮助命令行来查看你需要的命令:

sass -h

####第三步:安装compass

gem install compass

会出现下面的信息
这里写图片描述
这代表你安装成功,当你运行这个命令,你看到不是这些信息,有可能在你的机器上没有Ruby或者不支持gem。

第四步:项目初始化
接下来,要创建一个你的Compass项目,假定它的名字叫做sass-test,那么在命令行键入:

compass create sass-test

当前目录中就会生成一个sass-test子目录。

进入该目录:

cd sass-test

你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。
这里写图片描述
因为我们写出来的都是scss文件,要转换成css文件才可以运用在样式中。所以运行命令:

  compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。
默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用–output-style参数。

  compass compile --output-style compressed

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用–force参数。

  compass compile --force

除了使用命令行参数,还可以在配置文件config.rb中指定编译模式。

  output_style = :expanded

:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式。

  output_style = :compressed

也可以通过指定environment的值(:production或者:development),智能判断编译模式。

  environment = :development

  output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下,除了一次性编译命令,compass还有自动编译命令

  compass watch

运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。

第五步:如果要想把css装换成scss文件,就要运用在线编译工具了。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值