sass菜鸟教程
1、安装sass
在安装sass前需要安装ruby,下载ruby时要注意自己电脑是32位还是64位,下载好正常安装,但注意一下:要勾选下图这一项,添加环境变量(安装过JDK的朋友应该知道环境变量)
下一步、下一步。。。安装完成后,开始菜单点击:
输入命令:gem install sass 。我猜你会看到安装失败的提醒:
因为默认的sass下载地址https://rubygems.org/被墙了,所以无法连接安装,ping了一下可看到:
可我“翻”了一下“墙”,发现还是不能成功安装,只好作罢,换一个下载地址,淘宝的:https://ruby.taobao.org/ 。 ping一下正常:
接下来要做的就是添加国产淘宝的地址,并把默认被墙掉的地址删除,输入命令: gem sources -a https://ruby.taobao.org/添加淘宝地址:
提示信息有added to sources表示添加成功,可运行命令:gem sources 查看现有的下载地址:
现有两个,一个是默认的,一个是刚添加的淘宝的,必须要把默认的删掉才能安装,运行命令删除默认:gem sources -r https://rubygems.org/ 提示removed from sources 说明删除成功。
确保只有一个淘宝的地址,才能成功安装sass:
好,这时可以放心的运行 gem install sass 来安装了:
Perfect!
2.把scss文件编译为css文件
先新建一个.scss文件吧,代码:(虽然sass代码刚写起来生硬,但相信代码还是能看懂啥意思的)
.box {
background: #eee;
border: 2px solid #ccc; .heading {
font-size: 14px;
}
} .box2 {
@extend .box;
padding: 10px;
}
我这里保存为test.scss文件,然后用命令行进入保存文件的所在目录(我的是E盘ts文件夹下),然后运行翻译命令: sass test.scss test.css 把test.scss文件编译为test.css文件(css文件名可以重新取名):
这时再返回文件所在文件夹,你会发现多出了一些文件,其中就有我们想要的test.css文件:
打开test.css文件我们会看到编译好的css代码,对比编译前scss文件源代码可看出sass的厉害之处啦:
.box, .box2 {
background: #eee;
border: 1px solid #ccc;
}
.box .heading, .box2 .heading {
font-size: 2em;
}
.box2 {
padding: 10px;
} /*# sourceMappingURL=test.css.map */
当然了你也可以把css文件编译为scss文件,输入命令: sass -convert test.css newtest.scss 就能把test.css编译为newtest.scss文件啦,这里就不再赘述。下面就是要学习sass语法的时候了,我也是初学者,共同进步吧。
sass菜鸟教程的更多相关文章
- 菜鸟教程 Python100例 之实例29
学习编程的路,走得好艰辛... 为了巩固基础知识,把菜鸟教程网上的实例拿来练习.. 在做到实例29时,看了网站给出的代码,觉得可以加强一下功能,不由得动了一下脑筋,如下: 原文题目: 题目:给一个不多 ...
- 【转载】jQuery Validate 菜鸟教程
文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html (jQuery Validate 菜鸟教程)
- Http状态码大全(来自菜鸟教程)
HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 ...
- 菜鸟教程之学习Shell script笔记(下)
菜鸟教程Shell script学习笔记(下) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh ...
- 菜鸟教程之学习Shell script笔记(中)
菜鸟教程Shell script学习笔记(中) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh ...
- 菜鸟教程之学习Shell script笔记(上)
菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht ...
- C语言经典例题(菜鸟教程100例)
学习c语言基础,怎么能少了菜鸟教程上的100道例题呢,这里整理一下每道题的链接,希望大家能享受学习的乐趣 1,有1,2,3,4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 2,企业发放 ...
- 学习笔记之HTML 教程 | 菜鸟教程
HTML 教程 | 菜鸟教程 http://www.runoob.com/html/html-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/try ...
- JavaScript 实例 | w3cschool菜鸟教程
JavaScript 实例 | w3cschool菜鸟教程 http://www.w3cschool.cc/js/js-examples.html
随机推荐
- JavaScript之毒瘤
0.导言 JavaScript中有许多难以避免的问题特性.接下来就一一揭示. 1.全局变量 在所有JavaScript的糟糕特性中,最为糟糕的就是全局变量的依赖.全局变量使得在同一个程序中运行独立的子 ...
- 360wifi使用方法|360wifi使用教程
360随身WiFi是一款超迷你.操作极其简单的无线路由器,只需把360随身WiFi插到一台可以上网的电脑上,不用做任何设置,就把连接有线网络的电脑转变成接入点,实现与其他终端的网络共享.简单方便实现手 ...
- 在Spring Boot中使用Https
本文介绍如何在Spring Boot中,使用Https提供服务,并将Http请求自动重定向到Https. Https证书 巧妇难为无米之炊,开始的开始,要先取得Https证书.你可以向证书机构申请证书 ...
- T-SQL---多值模糊查询的处理
多值模糊查询的处理 所谓多值模糊查询,就是应用程序中传递过来多个参数,对这些参数做拆分,拆分之后,对拆分结果的key值分别做模糊查询处理 对于精确匹配时,不管是单个Key值还是多个Key值,都很容易处 ...
- 利用Navigation Timing测量页面加载时间
最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...
- 30天C#基础巩固------集合,File(文件操作 ),Encoding处理字符集
一:泛型 关于泛型我自己也不是很好的理解,但是具体的运用还是可以的,可以这样的理解,我们定义一个数组,但是不知道将来它是保存什么类型的值,很是矛盾,这个时候泛型就出现了,它可以解决这个场景,li ...
- ASP.NET MVC系列:添加模型
模型(Model)是应用程序中用于处理应用程序数据逻辑的部分;通常模型对象在数据库中存取数据 添加模型类 在解决方案中右击Models文件夹,然后选择“添加”,在“添加”项里选择“类”:或者选中Mod ...
- 基于C#的MongoDB数据库开发应用(1)--MongoDB数据库的基础知识和使用
在花了不少时间研究学习了MongoDB数据库的相关知识,以及利用C#对MongoDB数据库的封装.测试应用后,决定花一些时间来总结一下最近的研究心得,把这个数据库的应用单独作为一个系列来介绍,希望从各 ...
- 年薪10w和年薪100w的人,差在哪里?
职场10年,为什么有人已经当上了董事总经理,而有的人还是资深销售经理? 出道10年,为什么有人已经当上了主编.出版人,而有的人还是资深编辑? 打拼10年,为什么有人已经身价数十亿美金,而有的人还在为竞 ...
- 【C#】让DataGridView输入中实时更新数据源中的计算列
本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案 考虑这样一个场景: 某D ...