来源 | 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. How do I filtered TextBox with a Decimal (double) Data Type
  2. 帮助你构建自适应布局的30款优秀 jQuery 插件(下篇)
  3. 经典C语言程序100例之五零
  4. 2006 mysql_MySQL 2006 超时
  5. webapi自宿主设置本地端口使用https协议
  6. 安卓逆向_22( 二 ) --- Xposed 学习记录
  7. Mybatis(6)CURD增删改查操作
  8. 面试精讲之面试考点及大厂真题 - 分布式专栏 05 公司使用什么RPC框架,聊聊你理解的RPC原理
  9. DIV+CSS 之 网页切图过程中div+css命名规则
  10. function 多个函数用一个_程序员如何用一个脚本每天定时给多个女友发微信暖心话...
  11. flex blazeds java spring_Flex+Java+Spring+BlazeDS 配置篇说明
  12. 开源|Davinci用户体验:你离数据可视精美大屏只差一个Davinci!
  13. 云上财务经营的成本管理
  14. win10家庭版的常见问题1
  15. css3 calc的使用
  16. 2019最新财务管理计算器源码
  17. dubbo消费者调用报错Unsupported protocol rest in notified url
  18. BACnet/IP之BACnet4j学习java代码例子属性读写同网段跨主机02
  19. 什么是SpringData
  20. 【python数据分析实战】城市餐饮店铺选址问题(1)—— 对不同菜系进行比较,并筛选出可开店铺的餐饮类型

热门文章

  1. 什么样的企业会上BI系统?
  2. eureka和ZooKeeper的区别
  3. 基于逻辑回归算法癌症症状预测分析
  4. 自动驾驶轨迹预测任务浅述
  5. 【STM32F407开发板用户手册】第27章 STM32F407的定时器应用之TIM1-TIM14的PWM实现
  6. 微信小程序样式点击开始倒计时(正则规则验证)手机号验证
  7. 【网页设计】期末大作业html+css(音乐网站)
  8. Opencv2.4.9源码分析——SURF
  9. Excel 2010 SQL应用034 字段中含有方括号的查询
  10. 从程序员到软件设计师的过程(转)