如何在项目代码中配置环境使用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
相关推荐
teresalxm 2020-06-05
LUCIEN0 2019-11-04
RedCode 2020-10-28
沈宫新 2020-05-28
dazhifu 2020-05-19
buttonChan 2020-05-10
nicepainkiller 2020-02-23
vavid 2020-02-15
tianzyc 2020-02-01
nicepainkiller 2020-01-29
dazhifu 2020-01-25
CaiKanXP 2020-01-08
葉無聞 2019-12-30
waterv 2019-12-27
福叔 2019-12-27
swiftwwj 2019-12-27
MaureenChen 2019-12-26