Ruby（或cmd中）输入命令行编译sass

ranwu 发布于2019-04-23 13:24 / 2826人阅读

摘要：或中输入命令行编译步骤如下举例在盘中新建一个总文件夹，比如文件夹，其中在该文件夹下面建立等文件夹。文件夹下的启动根据步骤命令行输入得到结构如下图命令行没有清除缓存得到结构如下图如若文件下面有多个文件，要指定某一个文件被编译，需要指定文件。

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

5、根据步骤命令行输入

得到结构如下图

6、命令行没有清除缓存

得到结构如下图

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

得到结构如下图

发现的问题

a．在建立的文件夹下必须建立了sass文件夹，ruby需要识别sass文件夹（我试过直接在没有sass文件夹下进行编译，失败了）；

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

SASS提供四个编译风格的选项：

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

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

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

　　* compressed：压缩后的css代码。

海外云主机云服务器 Ruby命令行 php cmd命令行命令行编译命令行输入历史

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1826.html

Sass -- 安装配置及简单使用

摘要：本文仅适用于系统。安装每个流行的平台都有多种工具可用于安装平台，可以使用第三方工具如或或使用系统中的包管理系统。平台，可以使用。安装过程按照提示来即可安装假定已经安装好了运行进入命令提示符。本文仅适用于 Windows 系统。什么是 Sass Sass---- CSS 扩展语言或 CSS 预处理器，是一种 CSS 的开发工具，提供了许多便利的写法，节省了设计者的时间，使得 CSS ...

HitenDev 2019-08-29 13:46 评论0 收藏0
webstorm 设置 sass自动编译问题

摘要：语法使用它带来的好处，就不再这里做介绍了，主要看怎么在里配置自动编译。因为国内网络的问题导致源间歇性中断因此我们需要更换源。也就是说，任何标准的样式表都是具有相同语义的有效的文件。参考文档官网设置自动编译及参数配置　　sass语法、使用它带来的好处，就不再这里做介绍了，主要看怎么在webstorm里配置自动编译。　　sass编译是需要Ruby环境的，可以到这里去下载 : https:/...

APICloud 2019-04-23 13:13 评论0 收藏0
CSS 强化装备！Sass 安装与使用

摘要：不过必须要先安装，然后再安装。淘宝镜像安装由于国内网络原因你懂的，导致存放在上面的资源文件间歇性连接失败。嵌套可以进行选择器的嵌套，表示层级关系。重要注释管理项目文件结构预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 评论0 收藏0
[Sass]-Sass入门

摘要：未编译样式多继承链式继承占位选择器编译后样式中使用声明混合，可以传递参数，参数名以符号开始，多个参数以逗号分开，也可以给参数设置默认值。初识Sass SASS简介 sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组...

godiscoder 2019-08-29 13:27 评论0 收藏0