Sass及其环境的安装


张登友,张登友的博客,张登友的网站——

1、Sass的安装

sass引擎是用Ruby语言开发的(但是两者的语法没有关系),因此在安装 Sass 前,需要先安装Ruby(mac下自带Ruby无需再安装Ruby)。此处以Mac系统做演示

Mac下的Ruby

Mac自带Ruby,输入ruby -v可查询版本:

zdy@MacBook-Pro:~|⇒  ruby -v
ruby 2.6.8p205 (2021-07-07 revision 67951) [universal.x86_64-darwin21]

系统版本较老可能自带的ruby版本也比较老,我一般都是最新系统,这里还算比较新的版本,但是还是升级下最新版本。

更新Ruby

有时候可能需要使用特定版本的ruby,或者在不同的ruby版本之间进行切换,可以尝试安装rvm,它是ruby的版本管理工具。官网是:https://rvm.io

请尽可能用比较新的 RubyGems 版本,建议 2.6.x 以上。

curl -sSL https://get.rvm.io | bash -s stable #安装最新稳定版命令, 可能需要科技才能运行, 此处不做赘述

更换gem源

Ruby 是使用 gem 来管理它的各种包(比如Sass)。我们安装好ruby之后,gem会自动安装上;类似于,我们安装完node之后,npm也自动安装好了。

gem update --system # 这里可能需要点科技才能用
gem -v #输出版本号
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ #添加中国加速镜像源并移除默认源
gem sources -l #查看gem源
# 确保只有 gems.ruby-china.com

执行结果如图所示:

gem换源

安装Sass

输入以下命令进行安装

gem install sass #若提示没有权限可以在前面加一个sudo提权执行

执行结果如图所示, installed表示已经安装成功

sass安装

查看sass版本的命令为:

sass -v

sass_version

升级sass版本的命令为:

gem update sass

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

sass -h

2、Compass 安装

安装完sass之后,我们在main.scss中写一些代码,然后输入如下命令,就可以将scss文件转化为css文件

sass main.scss main.css

真正的项目开发中,我们不一定是直接使用 sass 命令,而是使用 Compass。

Compass 简介

官网是:http://compass-style.org/ Compass 是开源的CSS书写框架。

安装命令跟sass大同小异

gem isntall compass #安装命令
compass -v #查看compass版本

compass_install

compass_version

Compass的简单使用

通过 Compass 创建工程目录:

mkdir sass && cd sass  #创建sass文件夹并切换到sass文件夹
compass creat CompassDemo #创建工程目录

work_space

文件夹结构如下

CompassDemo
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

为了能够让文件实时编译,通过 copass watch 监听sass文件的变化,当.scss文件改动时,会自动生成对应的.css文件。

cd CompassDemo 
compass watch #开启监听, 实时编译, 按Ctrl+c可以停止

compass_watch


文章作者: 张登友
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张登友 !
  目录