欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ruby(或cmd中)输入命令行编译sass

程序员文章站 2022-03-31 18:03:09
Ruby(或cmd中)输入命令行编译sass步骤如下: 举例: 1、在F盘中新建一个总文件夹,比如test文件夹,其中在该文件夹下面建立html、images、js、sass等文件夹。 2、在sass文件夹中创建要使用到的sass文件,或者scss文件。common.scss、reset.scss、 ......

ruby(或cmd中)输入命令行编译sass步骤如下:

举例:

1、在f盘中新建一个总文件夹,比如test文件夹,其中在该文件夹下面建立html、images、js、sass等文件夹。

2、在sass文件夹中创建要使用到的sass文件,或者scss文件。common.scss、reset.scss、config.scss等一些公共文件以及项目中需要使用到的各个文件。(当然这里的文件也可以分别放在不同的文件夹中,不过必须都是sass文件夹的子目录。)

3、sass文件夹下的common.scss:

div{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background-color: #333;
    p{
    width: 200px;
    height: 200px;
    background-color: #666;
     a{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #999;
        }
    }
}

 

4、 启动ruby

 Ruby(或cmd中)输入命令行编译sass

 

5、根据步骤命令行输入

 Ruby(或cmd中)输入命令行编译sass

 

得到结构如下图

 Ruby(或cmd中)输入命令行编译sass

6、命令行没有清除缓存

 Ruby(或cmd中)输入命令行编译sass

得到结构如下图

 Ruby(或cmd中)输入命令行编译sass

 

7、如若sass文件下面有多个sass文件,要指定某一个文件被编译,需要指定文件。其中首先找到sass文件这个目录,然后将sass文件夹下的某一个文件转化为css文件夹下的某一个。

 Ruby(或cmd中)输入命令行编译sass

得到结构如下图

 Ruby(或cmd中)输入命令行编译sass

发现的问题

a.在建立的文件夹下必须建立了sass文件夹,ruby需要识别sass文件夹(我试过直接在没有sass文件夹下进行编译,失败了);

b.--no-cache是清除缓存,--watch是监听指令,--style是样式,compressed指令可以压缩css文件。

sass提供四个编译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。

  * expanded:没有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。