ruby中sass和compass的下载与安装以及css样式的引用

用scss来书写css还是很方便的。首先是ruby的下载与安装,下载地址是http://rubyinstaller.org/downloads/ 。下载完以后,我们打开安装文件,点击下一步安装即可,注意

在这里下面打上勾,防止以后运行命令的时候找不到。

安装完成后,点击后打开。

运行命令 gem install sass

然后等待安装完成,第一次安装可能会花费时间比较长,也有可能是被屏蔽了,多试几次

就可以。

下一步我们安装compass,运行命令 gem install compass

然后也是等待安装。

安装完成后 运行 sass -v 和 compass -v。表明已经安装成功。

对于使用,比如你新建一个项目叫test在e盘下, 首先进入e盘的test里。

然后我们在test中建一个文件夹用来存放css样式 , 用命令compass create style

点回车,会生成一大堆代码,style文件就建好了,

style文件夹里生成了这几个文件:

然后接着上面的黑框输入如下内容

表明监听成功,然后就可以在sass文件夹下的文件里写样式了(比如在ie.scss里)。

引用样式还是引stylesheets文件夹下的css文件,比如

<link style="stylesheet" href="style/stylesheets/ie.css">

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-26 19:14:20

ruby中sass和compass的下载与安装以及css样式的引用的相关文章

安装Ruby、Sass与Compass

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量. 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby. 安装完成后需测试安装有没有成功,在命令行中输入:ruby -v 如

web前端开发利器——基于ruby的sass,compass和Dreamever+emmet插件

引言:web前端的html页面和css文件有时写起来会很麻烦,但是借助一些工具能够帮助我们轻松的构建相应的页面.sass是css的一款开发工具,有相应的语法,可以有逻辑和简洁编写css代码.本文介绍的主要是基于Dreamever cs5加上emmet插件快速编写简洁html页. 1. ruby安装与配置 ruby可以从百度搜索中的百度软件安装中心找到或者官网下载.安装很简单,以.exe文件进行安装,直接进行下一步安装就行.安装完成之后,在命令行窗口中输入 ruby -v,如果显示了相应的版本说明

HTML文件中css样式的引用

1.1.直接在div中使用css样式制作div+css网页 如: <div style="font-size:14px; color:#FF0000;">内容</div> 1.2.html中使用style标签 在html头部head部分内style标签插入css样式代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

揭开Sass和Compass的神秘面纱

可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些基础知识,包括它们是什么.如何安装.为什么要使用.基础语法等一些基本知识.需要说明的是我也仅仅只是刚刚接触Sass和Compass,一些高级用法等将不再本文的讨论范围之内.接触一周以后发现Sass和Compass的用处非常大,也打算今后在项目中尝试引进并应用起来.希望读完以后,你跟我一样对Sass和Compass给你带来的东西非常开心,也

OpenCV3.1.0的下载、安装和配置

作者:大曲曲 邮箱:[email protected] 本文最终目标:要实现VS2015+QT5+OpenCV3开发环境搭建 1.任务描述 准备配置的环境 电脑系统:Windows 10 专业版 OpenCV版本:3.1.0 Visual Studio版本:2015 在配置OpenCV3之前,需要先把VS2015安装好.本文默认已经安装了VS2015. 如果没有安装VS2015,请参考我的博客中的关于 VS2015的下载和安装的内容:http://blog.csdn.net/quxiaoxia1

Sass学习笔记 -- 在Windows系统中安装Sass和Compass

Sass和Compass都是基于Ruby编程语言的命令行工具.要使用它们,你首先需要在电脑中安装Ruby,Windows系统并没有预置Ruby,因此如果你之前没有安装过Ruby,现在就需要进行安装.安 装Ruby只需要花费几分钟的时间. 直接百度搜索"ruby"或者点击http://rubyinstaller.org/downloads/ 下载,根据自己系统配置,如果是x64,则选择" Ruby 2.3.1 (x64)" 按照提示,点击下一步,注意这里需要全部勾选

(二)在实战中使用Sass和Compass

第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的HTML元素 是 4 槽 网格布局中列与列之间的统一留白 否 3.2.3 固定的网格布局还是流动的网格布局 1 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择: 2 // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出); 3 // 2.要么实现一种灵活的流动布

分享15款很实用的 Sass 和 Compass 工具

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

【CSS】Windows下安装sass和compass

因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网下载最新版ruby安装包http://rubyinstaller.org/downloads/ 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境: Sass和compass安装: 安装完ruby后,在开始菜单找到刚才我们安装的ruby,打开Start Command Prompt with Ruby