• Windows上设置Sass


    现在有很多信息在预处理器上浮动。大部分信息都面向Mac用户,所以在这篇文章中,我提供了一个非常简单的指南,帮助基于Windows的开发人员快速启动并运行Sass(我选择的预处理器)。

    本文是在此博客上CSS Basics类别下提交的,但任何已经在Windows上使用Sass的开发人员也可以添加他们的反馈。

    总的来说,即使你在命令行上这样做,Sass也不难设置。但是,如果您没有兴趣完成所有这些步骤,但仍想在Windows上使用Sass,那么,请跳到本文中的最后一个标题,以获取可让您在Windows上以最少的设置开始使用Sass的应用程序列表。

    1.安装Ruby

    因为Sass是一个Ruby gem,所以你需要做的第一件事是使用Windows安装程序安装Ruby 与OS X不同,默认情况下不在Windows上安装Ruby,因此Windows用户需要手动安装它。

    当您完成安装向导时,您将进入此选项屏幕:

    安装Ruby

    据我所知,你需要检查的唯一选项是中间选项,它可以帮助你的命令行指令识别在哪里找到(如它所说)“Ruby可执行文件”。否则,当您尝试在命令提示符下安装Sass时,您将收到错误消息“ruby未被识别为内部或外部命令”(请参阅​​下一步)。

    如果有人对此设置的特定方面有任何其他相关信息,请注释,我会相应更新。但这对于第一步应该足够了。

    2.使用命令提示符安装Sass

    现在您已经安装了Ruby,您将能够安装Sass。为此,请通过执行以下操作之一打开命令提示符:

    • 单击开始 - >运行,然后键入“cmd”; 要么
    • 单击开始 - >所有程序 - >附件,然后选择“命令提示符”

    命令提示符打开后,通过在提示符中键入以下内容来安装Sass:

    gem install sass

    然后点击“输入”,等待安装Sass。完成后应该如下所示:

    在命令提示符下安装Sass

    如果你想获得Compass的额外好处,Compass是一个使用Sass的创作框架,你可以选择做“gem install compass”,它将同时安装Compass和Sass。我不会在这里详细介绍Compass的详细信息,但是一旦你开始使用Sass,你就可以通过谷歌了解一些信息。

    3.设置Sass文件

    现在已经安装了Ruby和Sass,你想告诉Sass你正在处理什么文件并让它从你的Sass文件中编译你的CSS。

    在命令提示符下,使用Sass语法导航到要编写CSS的文件夹。这不是关于命令行语法的教程,所以如果你从未这样做过,你必须自己解决这个问题。您可以查看此链接或只是在谷歌搜索有关简单命令行表达式的教程。

    以下是导航到我的文件夹后我的提示的处理方式:

    在提示中导航

    请注意,我已使用“cd”或“change directory”命令导航以找到我正在使用的文件夹。

    现在,使用Windows资源管理器,进入该文件夹并创建一个扩展名为“.scss”的新CSS文件。因此,您只需在扩展程序的前面添加“s”,而不是通常的“.css”扩展名。您可以通过创建常规CSS文件和更改扩展名,或创建空白文本文件并将.txt扩展名更改为.scss来完成此操作。

    告诉Sass“观察”文件

    一旦你的文件存在,你想告诉Sass要注意它的变化,所以它可以用传统的CSS语法将它编译成常规的CSS文件。

    在命令提示符下,在.scss文件所在的文件夹内,键入以下内容,然后按Enter键:

    sass --watch styles.scss:styles.css

    您可以复制上面的代码并将其粘贴到提示中,方法是右键单击并选择“粘贴”(ctrl-V将无法在那里工作)。确保“styles.scss”与您在创建新.scss文件时选择的文件名匹配,并与生成的.css文件相同。不要担心.css文件还不存在; Sass会自动创建它。

    一旦使用了如上所示的正确命令,您应该在命令提示符中看到:

    告诉Sass看你的档案

    如您所见,Sass现在正在“观察”您的.scss文件以进行更改。要停止观看,只需在提示符中按ctrl-C即可。

    告诉Sass“观察”文件

    一旦你的文件存在,你想告诉Sass要注意它的变化,所以它可以用传统的CSS语法将它编译成常规的CSS文件。

    在命令提示符下,在.scss文件所在的文件夹内,键入以下内容,然后按Enter键:

    sass --watch styles.scss:styles.css

    您可以复制上面的代码并将其粘贴到提示中,方法是右键单击并选择“粘贴”(ctrl-V将无法在那里工作)。确保“styles.scss”与您在创建新.scss文件时选择的文件名匹配,并与生成的.css文件相同。不要担心.css文件还不存在; Sass会自动创建它。

    一旦使用了如上所示的正确命令,您应该在命令提示符中看到:

    告诉Sass看你的档案

    如您所见,Sass现在正在“观察”您的.scss文件以进行更改。要停止观看,只需在提示符中按ctrl-C即可。

    写一些Sass并让它编译

    使用任何文本编辑器,打开.scss文件并在其中抛出一些Sass。这篇文章不是关于Sass语法(在线有大量的东西,我将来可能会介绍一些东西),但这里有一个你可以复制和粘贴的例子,取自Sass网站(使用“view plain”)链接以获取没有行号的代码的干净副本):

    $blue: #3bbfce;
    $margin: 16px;
    
    .content-navigation {
      border-color: $blue;
      color: darken($blue, 9%);
    }
    
    .border {
      padding: $margin / 2;
      margin: $margin / 2;
      border-color: $blue;
    }

    将其粘贴到文本编辑器后,只需保存.scss文件,然后返回命令提示符。您应该看到如下内容:

    Sass检测到更改,编译为CSS

    请注意,Sass已自动检测到对文件的更改,并在同一文件夹中生成了一个新文件。在该文件夹中,您将看到名为“styles.css”的新文件(或任何您命名为.scss文件的文件)。在文本编辑器中打开该新文件以查看已编译的CSS。

    使用上面的示例,您应该看到输出显示如下(花括号放置或间距可能略有不同):

    .content-navigation {
      border-color: #3bbfce;
      color: #2ca2af;
    }
    
    .border {
      padding: 8px;
      margin: 8px;
      border-color: #3bbfce;
    }

    现在,您可以继续在.scss文件中编写基于Sass的代码,Sass将在每次保存原始文件时继续检测这些更改并覆盖CSS文件。

    当然,请记住,在HTML文件中,当您引用CSS时,您将指向常规的.css文件。.scss文件仅供您编辑,不会直接在任何网页中使用。

  • 相关阅读:
    开源作品-PHP写的Redis管理工具(单文件绿色版)-SuRedisAdmin_PHP_1_0
    开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5
    Javascript关于JSON集合的几种循环方法
    正式安家
    Oracle 常用脚本
    Centos6安装zabbix_server
    centos_6下源码编译安装zabbix之一 LNMP环境的搭建
    reg51.h
    C语言浮点数存储结构分析
    WinForm程序中两份mdf文件问题的解决
  • 原文地址:https://www.cnblogs.com/500m/p/10373939.html
Copyright © 2020-2023  润新知