如何在项目代码中配置环境使用sass

Tip:Sass是一种"CSS预处理器",使用Sass能够有效提升CSS的开发效率,Compass是一个使用了Sass的库,封装了一系列有用的模块和模板,Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby

安装Ruby

默认情况下。macOS是默认安装好Ruby

在命令行下可以直接通过以下命令,确认系统 Ruby 的版本信息:

$ ruby --version
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

但是,由于默认的 Ruby 安装在 /System 目录下,对日常的开发、维护都带来许多不便。

推荐使用 homebrew 来安装、管理 Ruby 的版本

安装homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Tip:刚开始使用了一下命令报错,注意要进入ruby安装所在的目录/usr/bin/ruby执行命令

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
curl: (22) The requested URL returned error: 404 Not Found

brew安装Ruby的最新版本

brew update
brew install ruby

查看当前Rudy的版本

$ ruby --version

安装compass

gem install compass

使用compass来创建Sass工程

compass create my-project

安装成功的提示

directory my-project/
directory my-project/sass/
directory my-project/stylesheets/
   create my-project/config.rb
   create my-project/sass/screen.scss
   create my-project/sass/print.scss
   create my-project/sass/ie.scss
    write my-project/stylesheets/ie.css
    write my-project/stylesheets/print.css
    write my-project/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

sass目录中就是对应的源文件目录,当我们在该目录下进行代码的编写,通过以下命令来进行编译

编译sass

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值