美文网首页
Sass系列(一):sass运行环境的搭建

Sass系列(一):sass运行环境的搭建

作者: 前端杨肖 | 来源:发表于2018-02-23 11:07 被阅读89次

说明:

1.文章根据慕课网的《Sass和Compass必备技能之Sass篇》整理而成,有兴趣的同学可以点击传送门去慕课网观看视频,如果觉得看视频太耗时间,那么请接着往下看吧.

2.有关sass和compass的区别,请自行百度获取各自官网查看

文章内容:

一、sass运行环境搭建

二、sass安装及使用

三、compass安装及使用

一、sass运行环境搭建

检测本地是否安装ruby

ruby -v

官网下载相应的ruby安装包

安装过程中,除了记得勾选“add Ruby executables to your PATH”之外,其它都是一键点到底。

安装注意事项.png

安装完成之后可再次使用ruby -v检测是否安装成功

ruby安装包中集成了gem包管理工具,类似于nodejs下的npm,因此我们不需再下载gem,直接打开命令行来使用gem

gem改源:放在rubygem.org上的资源文件位于国外站点,由于某些原因,在国内访问可能会出现连接失败等问题,所以我们先把gem的连接源改到国内的一些镜像资源上

取消默认的绑定源

gem sources --remove https://rubygems.org/

绑定国内网站

gem sources -a http://gems.ruby-china.org/

gem sources -l查看current resources,以验证换源是否成功

二、sass安装及使用

so,接下来就到sass部分了,有木有很激动呢✧(≖ ◡ ≖✿)

好,先来安装sass吧。

gem install sass

sass -v查看安装的sass版本

ok,到这里sass就安装完成了完毕,最后在放一些gem下常用的命令

如果果断时间需要更新ruby程序的话,可以使用

gem update

安装特定版本的sass

gem install sass --version=版本号(例如3.3.0)

列出本地安装的所有ruby程序包

gem list

删除特定版本的sass

gem uninstall sass --version=版本号

删除本地安装的sass

gem uninstall sass

三、compass的安装及使用

安装

gem install compass //通过gem安装compass

compass -v //检测compass的版本,以验证是否安装成功

compass使用

mkdir compasstest //创建一个compasstest目录

cd compasstest //进入到compasstest目录

compass create learn-compass //创建一个compass项目,learn为项目名称

运行该命令后,在命令行工具会输出一段说明文字,建议大家详细看一下,里边详细介绍了sass编译、引入、学习等信息。

进入到compasstest文件夹下查看compass生成的目录结构:

大家可以仔细看一下下面三张图中的目录结构,搞清出compass生成的目录结构很重要。

文件结构.png

sass文件结构.png

stylesheets文件结构.png

ok,接下来在项目文件中监视sass的change

cd learn-compass //进入到项目文件中

compass watch //监视compass的change -->Compass is watching for changes.Press Ctrl-c to Stop //监视已启动,可以使用ctrl-c来停止监视

当我们启动监视之后,如果你修改了sass文件夹下的任何一个文件,系统会自动将变化后的文件编译成stylesheets文件加下对应的css文件

到这里sass及compass的准备工作就已经完成喽。。。

相关文章

  • Sass系列(一):sass运行环境的搭建

    说明: 1.文章根据慕课网的《Sass和Compass必备技能之Sass篇》整理而成,有兴趣的同学可以点击传送门去...

  • Sass系列(一):sass运行环境的搭建

    说明:1.文章根据慕课网的《Sass和Compass必备技能之Sass篇》整理而成,有兴趣的同学可以点击传送门去慕...

  • SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 操作符

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS- 局部文件(Partial)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 输出格式

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

网友评论

      本文标题:Sass系列(一):sass运行环境的搭建

      本文链接:https://www.haomeiwen.com/subject/sggtxftx.html