Sass初学者超强十分钟入门

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 类似格式。解析如下:

这样同一个文件夹下面就生成同名后缀为css的css文件,然后在html页面中引用<link rel="stylesheet" type="text/css" href="sass/style.css">

通过以上步骤就可以入门Sass了,Sass语法请看这里
				
时间: 2024-10-12 09:13:28

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

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

十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less)) 注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文. 我们知道写css代码是非常枯燥的,尤其是写重复颜色.样式的代码,这需要我们付出很多努力来保持css代码可维护,但是它本不应该是这样的. 很幸运地是,web开发社区已经解决了这个问题,我们在现在已经有了类似与less.sass和stylus这样的预处理器.它们有很多优于一般的css之处,如下所示: 变量---以至于我们可以在样式表中

Python十分钟入门

初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(CheatSheet)之间,因此只会包含一些基本概念.很显然,如果你希望真正学好一门语言,你还是需要亲自动手实践的.在此,我会假定你已经有了一定的编程基础,因此我会跳过大部分非Python语言的相关内容.本文将高亮显示重要的关键字,以便你可以很容易看到它们.另外需要注意的是,由于本教程篇幅有限,有很多内容我会

流编辑器 SED 十分钟入门全教程

这里借用一下酷壳网sed博文的图来开题,超赞的-- 1. sed 简介及原理简析 1.1 sed 简介 Sed 是什么?相信很多人都有所了解,sed 全称StreamEDitor 即流编辑器.生于1973年or 1974年by 贝尔实验室的 Lee E. McMahon(已故),是基于交互式编辑器ed("editor", 1971)的脚本功能及更早的qed(quick editor ,1965-1966)(Sed 比 awk 要大那么几岁,所以客官莫急,过几天我们再来详解 awk).S

sass十分钟入门

变量 sass中可以定义变量,方便统一修改和维护.          嵌套 sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐. //sass style //----------------------------------- nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-d

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

随着业务的发展,数据量剧增,我们一些简单报表大盘类的任务,就不能简单的依赖于RDBMS了,而是依赖于数仓之类的大数据平台. 数仓有着巨量数据的存储能力,但是一般都存在一定数据延迟,所以要想完全依赖数数仓来解决实时报表问题,是困难的. 其实,所谓的实时报表,往简单了说就是: 对现在的一些数据进行加减乘除聚合后,得到的一串与时间相关的数字. 所以,这类问题的关键点应该在于这个实时数据怎么来,以及怎么处理这些实时数据. 一般地,做这类报表类工作,最基本的原则就是: 业务无侵入性,然后又要做到实时. 所

十分钟入门pandas数据结构和索引

pandas数据结构和索引是入门pandas必学的内容,这里就详细给大家讲解一下,看完本篇文章,相信你对pandas数据结构和索引会有一个清晰的认识. 一.数据结构介绍 在pandas中有两类非常重要的数据结构,即序列Series和数据框DataFrame.Series类似于numpy中的一维数组,除了通吃一维数组可用的函数或方法,而且其可通过索引标签的方式获取数据,还具有索引的自动对齐功能:DataFrame类似于numpy中的二维数组,同样可以通用numpy数组的函数和方法,而且还具有其他灵

python学习笔记一:十分钟入门

[转]为什么要自己敲呢?--学习的过程. 发展历史 简介: Python是一种动态解释型的编程语言.Python可以再Windows,UNIX,MAC等多种ca 特点: 1. python使用C语言开发,但是python不再有C语言中的指针等复杂的数据类型. 2. python具有很强的面向对象特性,而且简化了面向对象的实现.它消除了包含类型.抽象类.接口等面向对象的元素. 3.python代码块使用空格或制表符缩进的方式分隔代码. 4. python仅有31个保留字,而且没有分号.begin.

十分钟入门 Less

我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目.你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化.这需要很多的努力和规则来保持你的 CSS 可维护,但它本不应该这样的. 很幸运,网站开发社区已经解决了这个问题,现在我们拥有诸如 Less, Sass 和 Stylus 之类的预处理器,它们给我们提供了许多优于纯 CSS 的好处. 变量 - 它可以让你更轻松的在整个样式表中定义和更改值(这个功能 CSS 在未来某一天也有可能会实现)

Azure IoT Hub 十分钟入门系列 (3)- 使用消息路由将原始设备数据记录存档

本文主要分享一个案例: 10分钟使用消息路由将原始设备数据记录存档 B站视频讲解:https://www.bilibili.com/video/av90223893/ 本文主要有如下内容: 1.理解什么是消息路由,为什么要用消息路由 2.消息路由的类型 3.配置一个到Storage的消息路由,将原始设备消息存储到blob 4.配置一个到Storage的消息路由,当温度>30°C时,才存储下来 图文讲解: 本文参照官网:https://docs.azure.cn/zh-cn/iot-hub/tut