东莞工厂网站建设,网络系统管理和配置,广告设计公司创业计划书,wordpress的登陆文章目录 前言SASS的系统要求安装Ruby例子后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错误当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 SASS的系统要求 操作系统:跨平台 浏览器支持: IEInternet Explorer 8FirefoxGoogle ChromeSafariOpera 编程语言: Ruby
安装Ruby
步骤1:打开链接 Ruby官网您将看到如下所示的屏幕: 下载zip文件的当前稳定。
步骤2 :接下来运行安装程序在系统上安装Ruby。
步骤3 :接下来将Ruby bin文件夹添加到您的 PATH用户变量和系统变量以使用gem命令。
路径用户变量: 右键点击我的电脑。 选择属性。 接下来选择高级标签然后点击环境变量。 在环境变量窗口下双击 PATH 如屏幕所示。 您将得到一个编辑用户变量框如图所示。在变量值字段中将ruby bin文件夹路径添加为 C:\ Ruby \ bin 。如果路径已经为其他文件设置则在其后放置分号并添加Ruby文件夹路径如下所示。 稍后点击确定按钮。
系统变量:
点击新建按钮。 接下来会显示新系统变量块如下所示。 步骤4 :在系统中打开命令提示符并输入以下行。
gem install sass 步骤5 :接下来在安装SASS之后您将看到以下屏幕。 例子
下面是一个简单的SASS示例。 html
headtitle Import example of sass/titlelink relstylesheet typetext/css hrefstyle.css/
/head
bodyh1Simple Example/h1h3Welcome to TutorialsPoint/h3
/body
/html现在我们将创建文件作为 style.scss 这是非常类似于CSS和只有一个区别是它将保存与.scss扩展名。.htm和.scss文件应该在文件夹ruby中创建。您可以将.scss文件保存到文件夹ruby \ lib \ sass \在此过程之前在lib目录中创建一个文件夹为sass。
h1{color: #AF80ED;
}h3{color: #DE5E85;
}您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css当您运行上述命令时它将自动创建 style.css 文件。每当您更改SCSS文件时style.css 文件将自动更新。
运行以上命令时style.css 文件将具有以下代码:
style.css
h1 {color: #AF80ED;}
h3 {color: #DE5E85;}让我们执行以下步骤看看上面的代码如何工作: 将上述代码保存在 hello.html 文件中。 在浏览器中打开此HTML文件。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
