来源 | https://www.kancloud.cn/kancloud/sass-tutorial/48500


1、关于sass

sass是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails的大力推动,逐渐被更多开发者使用。

sass是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。

sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss

2、安装Sass和Compass

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby(下载地址:http://rubyinstaller.org/downloads)。(注:mac下自带Ruby无需在安装Ruby!)

window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图:

安装完成后需测试安装有没有成功,运行CMD输入以下命令:

ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。(使用淘宝的gem源https://ruby.taobao.org/)如下:

//1.删除原gem源
gem sources --remove https://rubygems.org/  //2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/ //3.打印是否替换成功
gem sources -l  //4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装SassCompass。要安装最新版本的SassCompass,你需要输入下面的命令:

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

在每一个安装过程中,你都会看到如下输出:

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:

sass -v
Sass 3.x.x (Selective Steve)    compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下sass常用更新、查看版本、sass命令帮助等命令:

//更新sass
gem update sass //查看sass版本
sass -v //查看sass帮助
sass -h

本章节内容结束,下一章节,将分享SASS的使用,敬请关注!

感谢你的阅读,如果你觉得内容不错,记得点赞分享,让更多的人一起来学习。

SASS中文教程(上)相关推荐

  1. 【巨人的肩膀上制造世界】——1——Unity3D实用插件之地形插件Gaia,高质高效搭建你的地形,全中文教程!

    Unity3D快速搭建你的高质量地形,最好用的Unity3D地形制作插件Gaia,全中文教程 目录 1.博文介绍 2.Gaia3分钟制作地形效果展示 3.Gaia导入 4.Gaia编辑栏中文详解 (1 ...

  2. 【巨人的肩膀上制造世界】——2——Unity3D实用插件之QHierarchy,更方便的管理你的层级面板,全中文教程!

    [巨人的肩膀上制造世界]--2--Unity3D实用插件之QHierarchy,更方便的管理你的层级面板,全中文教程! 目录 1.博客介绍 2.QHierarchy介绍 3.QHierarchy操作详 ...

  3. 全网首发 | 第一个opencv_contrib扩展模块中文教程限时领取

    点击上方"小白学视觉",选择"星标"公众号 重磅干货,第一时间送达 OpenCV是学习计算机视觉的重要工具之一,然而多年以来,在深度学习的deBuff下,Ope ...

  4. 【好资源】全网第一份,OpenCV 4-Contrib扩展模块中文教程

    今天给大家分享一个优质的计算机视觉学习资源,帮助大家在使用OpenCV的道路上越走越远,目前资源已被翻译作者开源,提供了pdf版方便大家学习.此外,作者会实时维护资料的完整性. 重点说明:这份资源极有 ...

  5. Swift中文教程(五)--对象和类

    原文:Swift中文教程(五)--对象和类 Class 类 在Swift中可以用class关键字后跟类名创建一个类.在类里,一个属性的声明写法同一个常量或变量的声明写法一样,除非这个属性是在类的上下文 ...

  6. letswave7中文教程3:脑电数据预处理-ICA去除伪影

    目录 ICA/BSS的理论与模型 第5步:计算ICA矩阵 第6步:识别伪影成分 本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 .QQ交流群:941473018 ICA/BSS的理论与模型 ...

  7. letswave7中文教程1:软件安装与脑电数据导入

    目录 1.安装 2.数据集介绍 3. 数据集导入 4.数据集检查 本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 .QQ交流群:941473018 Letswave是一款非常好用的神经生理信 ...

  8. ERPLAB中文教程:高级EvenList选项

    目录 本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 .QQ交流群:941473018 前面我们介绍了使用ERPLAB来分析脑电数据的第一步: 安装ERPLAB并添加通道<ERPLAB ...

  9. ERPLAB中文教程:创建与查看EventList

    目录 创建EventList 本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 QQ交流群:941473018 主要内容包括: 介绍ERPLAB中常见的几个概念: 介绍如何创建EventLis ...

最新文章

  1. Ubuntu下搭建NFS,并在开发板挂载
  2. 和哪个专业的男生谈恋爱最惨?
  3. .NET Remoting Security使用小结 – TcpChannel
  4. Python菜鸟入门:day10模块介绍
  5. 如何安装 macOS Monterey Public Beta?
  6. 第四季-专题19-I2C驱动程序设计
  7. 图的m着色问题-回溯法
  8. UnrealVS插件使用简介(UBT编译,UE4热更新)
  9. 第一章 使用SOAPUI测试和开发Web Services Stubs
  10. Google地图中关于根据具体坐标定位真实地理位置
  11. All in!马斯克出价430亿美元收购Twitter全部股份,还有B计划
  12. 中图分类法----O 数理科学和化学
  13. win7系统盘瘦身秘诀
  14. 如何收集SparkSteaming运行日志实时进入kafka中
  15. java预研项目_缓存java框架技术预研3:JAVA缓存技术介绍
  16. 深圳高新技术企业补贴政策
  17. sql modify的使用方法
  18. 「计算机基础」栈结构
  19. 汇编语言笔记01_概述1(小甲鱼笔记总结)
  20. rtl8192cu_rtl8192cu推荐驱动CentOS 7

热门文章

  1. 基于R语言的seasonal包使用手册_06.final(seas(data, na.action = xxxx))
  2. 如何修改USB驱动能力
  3. 飞信2009_拥有5亿用户的飞信为啥干不过微信,主要有2个原因?
  4. php机内码,一个汉字的机内码需用( )个字节存储。
  5. 金融量化-技术分析策略和交易系统_CCI指标的策略实现
  6. 绩效差的员工,如何进行绩效面谈?
  7. 什么是版权,怎么申请
  8. mac下如何打出顿号
  9. particles 粒子效果
  10. 《我的视频我做主:Premiere Pro CS5实战精粹》——导读