ruby中输入命令行编译sass(ruby小白)
Ruby(或cmd中)输入命令行编译sass步骤如下:
(1)举例而言:首先在F盘下建立一个总文件夹,比如test文件夹;其次在该文件夹下建立html,images,js,sass等文件夹。
(2)在sass文件夹中创建要使用到的sass文件。例如common.scss,reset.scss,config.scss等公共文件以及项目中需要使用到的各个文件,当然这里的文件也可以分别放在不同的文件夹中,不过都是sass文件夹的子目录。
(3)如下是sass文件夹下的common.scss:
1 /* 2 *created by Irene 3 *2016-04-20 4 */ 5 div{ 6 width: 300px; 7 height: 300px; 8 border: 1px solid #000; 9 background-color: #333; 10 p{ 11 width: 200px; 12 height: 200px; 13 background-color: #666; 14 a{ 15 display: inline-block; 16 width: 100px; 17 height: 100px; 18 background-color: #999; 19 } 20 } 21 }
(4)启动ruby,可以设置快捷键(右键开始菜单中的ruby,选择属性设置快捷键),(我设置的是Ctrl+Alt+Z)。
(5)根据步骤输入命令行。
得到如下结构:
(6)这种情况下的命令行没有清除缓存,因此会有文件及文件夹生成结果是这样的:
得到如下结构:
因此最好带上清除缓存的--no-cache指令。
(7)若是sass文件夹下有多个scss文件,要指定某一个文件被编译,则专门指定哪一个文件即可。命令见下图,其中首先找到sass文件这个目录,然后将sass文件夹下的某一个文件转化为css文件夹下的某一个。
生成了如下的结构:
(8)发现的问题:
a.在test文件夹下必须建立了sass文件夹,ruby需要识别sass文件夹(我试过直接在没有sass文件夹下进行编译,失败了);
b.--no-cache是清除缓存,--watch是监听指令,--style是样式,compressed指令可以压缩css文件。
c.又发现可几个编译为不同形式的css文件形式的指令
(替换命令中的“compressed”):
【1】nested:嵌套缩进的css代码,它是默认值。
1 /* 2 *created by Irene 3 *2016-04-20 4 */ 5 div { 6 width: 300px; 7 height: 300px; 8 border: 1px solid #000; 9 background-color: #333; } 10 div p { 11 width: 200px; 12 height: 200px; 13 background-color: #666; } 14 div p a { 15 display: inline-block; 16 width: 100px; 17 height: 100px; 18 background-color: #999; } 19 20 /*# sourceMappingURL=common.css.map */
【2】expanded:没有缩进的、扩展的css代码。
1 /* 2 *created by Irene 3 *2016-04-20 4 */ 5 div { 6 width: 300px; 7 height: 300px; 8 border: 1px solid #000; 9 background-color: #333; 10 } 11 div p { 12 width: 200px; 13 height: 200px; 14 background-color: #666; 15 } 16 div p a { 17 display: inline-block; 18 width: 100px; 19 height: 100px; 20 background-color: #999; 21 } 22 23 /*# sourceMappingURL=common.css.map */
【3】compact:简洁格式的css代码。
1 /* 2 *created by Irene 3 *2016-04-20 */ 4 div { width: 300px; height: 300px; border: 1px solid #000; background-color: #333; } 5 div p { width: 200px; height: 200px; background-color: #666; } 6 div p a { display: inline-block; width: 100px; height: 100px; background-color: #999; } 7 8 /*# sourceMappingURL=common.css.map */
【4】(还是加上这一条,强迫症…)compressed:压缩后的css代码。(生产环境当中,一般使用压缩后的)
1 div{width:300px;height:300px;border:1px solid #000;background-color:#333}div p{width:200px;height:200px;background-color:#666}div p a{display:inline-block;width:100px;height:100px;background-color:#999} 2 /*# sourceMappingURL=common.css.map */
(自言自语:对于这个操作,目前自己的理解是这样的,肯定很片面也很不具体,但是会一步步学习改善哒。)