ruby安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

sass安装

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

然后直接在命令行中输入

gem install sass

按回车键确认,等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害,如果你没有安装成功,那么请参考下面的淘宝的

淘宝RubyGems镜像安装 sass

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了,关于常用gem source命令可参看:常用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https:
//ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES *** https:
//ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
Sass 使用入门
1、
编辑器编译
某些高上大的编辑器本身就内置了sass的编译,如webstorm等,而对于sublime text也有相应的插件可以使用:编译保存即编译。如果不清楚你的编辑器是否拥有自动编译的功能,可谷歌百度。
2、Sass编译
新建文件以.scss为文件后缀名。打开

,在命令行输入 sass style.scss style.css 类似格式。
解析如下:

此处用cmd命名行查找文件所在,sublime记得sass插件安装

这样同一个文件夹下面就生成同名后缀为css的css文件,然后在html页面中引用
<link rel="stylesheet" type="text/css" href="sass/style.css"> 通过以上步骤就可以入门Sass了,Sass语法请看这里

Sass初学者超强十分钟入门的更多相关文章

  1. 十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))

    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less)) 注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文. 我们知道写css代码是非常枯燥的 ...

  2. 转载:Python十分钟入门

    Python十分钟入门:http://python.jobbole.com/23425/

  3. (转)十分钟入门pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook . 习 ...

  4. Python学习总结(一)—— 十分钟入门

    一.Python概要 1.1.语言简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,具有20多年的发展历史,成熟且稳定. 用任何编程语言来开发程序,都是为了让计算机干活,比如下 ...

  5. 十分钟入门流处理框架Flink --实时报表场景的应用

    随着业务的发展,数据量剧增,我们一些简单报表大盘类的任务,就不能简单的依赖于RDBMS了,而是依赖于数仓之类的大数据平台. 数仓有着巨量数据的存储能力,但是一般都存在一定数据延迟,所以要想完全依赖数数 ...

  6. 十分钟入门 Less

    这篇文章来自 Danny Markov, 是我最喜欢的博主之一,实际上我最近翻译的一些文章全是出自他手.在查看本文之前你也可以 查看原文. 我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成 ...

  7. JavaSE学习总结(四)——Java面向对象十分钟入门

    面向对象编程(Object Oriented Programming,OOP)是一种计算机模拟人类的自然思维方式的编程架构技术,解决了传统结构化开发方法中客观世界描述工具与软件结构的不一致性问题.Ja ...

  8. VUE -- 十分钟入门 Less

    这篇文章来自 Danny Markov, 是我最喜欢的博主之一,实际上我最近翻译的一些文章全是出自他手.在查看本文之前你也可以 查看原文. 我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成 ...

  9. Azure IoT Hub 十分钟入门系列 (4)- 实现从设备上传日志文件/图片到 Azure Storage

    本文主要分享一个案例: 10分钟内通过Device SDK上传文件到IoTHub B站视频:https://www.bilibili.com/video/av90224073/ 本文主要有如下内容: ...

随机推荐

  1. Groovy - 介绍

    Groovy 是 用于Java虚拟机的一种敏捷的动态语言,它是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言.使用该种语言不必编写过多的代码,同时又具有闭包和动态语言中的 ...

  2. thinkphp 5 前台格式化输出日期

    thinkphp格式化输出 {$time|strtotime|date="Y年m月d日",###}   $time 是日期字符串,一般后台的时间是"Y-m-d h:i:s ...

  3. Spring源码情操陶冶-AbstractApplicationContext#finishRefresh

    承接前文Spring源码情操陶冶-AbstractApplicationContext#finishBeanFactoryInitialization 约定web.xml配置的contextClass ...

  4. 让初学者快速了解Git

    Git工作原理 为了更好的学习Git,我们们必须了解Git管理我们文件的3种状态,分别是已提交(committed).已修改(modified)和已暂存(staged),由此引入 Git 项目的三个工 ...

  5. 时间标签DateTime

    1:DateTime类型初始化: DateTime date=new DateTime(2017,01,19,18,23,00);//此内部对应年,月,日,时,分,秒 Console.WriteLin ...

  6. Java之IO流概述和File基本操作

    IO流图解 IO(in / out)流的分类 流向: 输入流  读取数据 输出流  写出数据 数据类型: 字节流 一个字节占8位, 以一个字节为单位读数据 八大数据类型所占字节数: byte(1), ...

  7. java利用接口和适配器进行完全解耦--参考《thinking in java》

    一.当使用父子类来实现以下东西时,其实是用了向上转型,这段代码的确简单了很多,复用性也很好,但是我们会发现Apply.process()和Processor类耦合过紧,其实apply.process( ...

  8. python函数(6):内置函数和匿名函数

    我们学了这么多关于函数的知识基本都是自己定义自己使用,那么我们之前用的一些函数并不是我们自己定义的比如说print(),len(),type()等等,它们是哪来的呢? 一.内置函数 由python内部 ...

  9. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  10. 双向循环链表(C语言描述)(二)

    链表的基本操作基于对链表的遍历:计算链表的长度就是对链表进行一次遍历: int linkedlist_length(const LinkedList list) { assert(list); ; L ...