Sass开发环境的配置

创建运行Sass的环境

ruby安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

安装sass

<1>Sass的安装:

Ruby命令行下输入下面的命令:
gem install sass

<2>Compass的安装:
Ruby命令行下输入下面的命令:

gem install compass

<3>创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录,运行:
compass create  projectname

这个命令会创建一个包含一系列文件的目录,其中最重要的是配置文件 config.rb,其他文件如果你不需要都可以删除。

在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。
<4>实时编译 SASS 文件
COMPASS 提供的默认方法是:
在命令行下切换到项目目录,运行
compass watch

将会实时监控 SASS 目录的文件变化,只要你一保存文件,立即将相应文件编译为 CSS 文件。

<5>SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。SASS提供两种编译方式,一种是手动编译,一种是监视编译(–watch),手动编译就是当你撰写好CSS时下指令去做编译,监视编译则是你指令一个目录,当此目录里面的*.scss档案有改变时(新增、覆写等等),就会自动去做编译的动作。先来讲手动编译方式:
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)
sass test.scss
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
生产环境当中,一般使用最后一个选项。
sass –style compressed test.sass test.css
还有一种监视的方式做编译,在命令行中切换到当前sass或者scss文件所在的目录,然后运行
sass –watch scss:css

时间: 2024-08-09 10:36:30

Sass开发环境的配置的相关文章

Sass开发环境搭建

一.Ruby环境下Sass的安装 a.安装Ruby 1.下载rubyinstaller安装 2.命令行或者直接使用sass gem包安装Sass. 具体安装方法请参见:http://www.w3cplus.com/sassguide/install.html.(Sass gem地址已经被和谐了,大家可以从我的网盘下载gem包:http://pan.baidu.com/s/1hslRynE) b.安装Sass开发环境Sublime Text Sublime安装完后配置起来比较繁琐, 1.需要安装P

Java开发环境的配置

为了能够在计算机上开发Java程序和运行Java程序,就需要在Windows操作系统上配置Java开发环境. 首先,安装JDK: 1.在Oracle官网上下载JavaSE: 2.在Download下载页面中,选择Windows平台下的JDK6: 3.下载完成后进行安装,默认安装在c:\Program Files\Java下: 4.安装完成后,在DOS命令行状态下测试JDK6是否安装成功: 5.运行cmd,输入java -version命令,可以查看版本信息,若显示出版本信息,则安装成功. 然后进

【Javaweb】前台开发环境的配置Myeclipse6.5+JDK1.6+Tomcat6.0+SVN1.8

Javaweb开发环境的配置也是比较繁琐的一件事情,虽然理论上使用记事本,完全可以写出一个Javaweb工程, 但是在团队大型开发的Javaweb过程中,你必须配置好Eclipse.SVN.Tomcat与JDK1.6,当然还有Mysql数据库,不过数据库配置的事情属于后台内容,本文仅讨论前台开发环境的配置. 之所以选择Myeclipse6.5是因为其他高版本的Myeclipse实在是太卡,编辑小型程序还好,编辑大型程序完全吃不消,Eclipse的功能毕竟简陋,所以还是选择了旧版本.经典版本Mye

最简化的DirectX 11开发环境的配置 VS2010

转载自:http://blog.csdn.net/zhmxy555/article/details/7672101 在编写基于DirectX 11的应用程序之前,我们当然需要在IDE中加入DirectX SDK函数库的支持,让编译器在编译我们的代码时候,认识我们在代码中调用的DirectXSDK中的函数.否则,编译器会报出undefined  XXX等错误,因为如果我们不进行DirectXSDK的配置,编译器是不会聪明到认识这些函数的. 之前浅墨发表过一篇<DirectX开发环境快速配置>的文

PHP开发环境的配置(Linux平台上安装Apache和PHP)

PHP开发环境的配置(Linux平台上安装Apache和php): 下载Apache (httpd-2.4.12.tar.gz).下载PHP(php-5.6.9.tar.gz).下载与PHP安装相关的libxml2(libxml2-2.7.8.tar.gz).下载与Apache安装相关的三个文件:apr(apr-1.5.2.tar.gz).apr-util(apr-util-1.5.4.tar.gz).pcre (pcre-8.10.zip) (1)安装Apache:在安装apache之前必须先

64位ubuntu下Android开发环境的配置

本文介绍如何在64位ubuntu上搭建android的开发环境. 系统:ubuntu12.04LTS 使用的是ADT Bundle for Linux和jdk1.7(open jdk也可) 一共分为3步走: 1.配置JDK 安装Open jdk $sudo apt-get install openjdk-7-jdk 或 从oracle官网下载 从官网下载JDK64位版 解压安装 将解压出的文件用最高权限复制到/usr/lib/jvm里 sudo cp -r ~/jdk1.7/ /usr/lib/

在CodeBlocks 开发环境中配置使用OpenCV (ubuntu系统)

CodeBlocks是一个开放源代码的全功能的跨平台C/C++集成开发环境.CodeBlocks由纯粹的C++语言开发完毕,它使用了蓍名的图形界面库wxWidgets.对于追求完美的C++程序猿,再也不必忍受Eclipse的缓慢,再也不必忍受VS.NET的庞大和高昂的价格.界面简单.易操作.可以非常好得通过插件进行功能扩展,因此我个人比較喜欢这个C++IDE.为了可以在codeblocks中使用opencv.仿照VS2010配置opencv的步骤.在CodeBlocks 开发环境中配置使用Ope

Android基础之——MacOSX下elipse开发环境的配置

前不久换了台macbook,然后自己就把开发环境给配好了,本来这事就这么过去了,今天有位博友留言让我写一篇关于配置的文章,考虑到这个东西确实以后可能还会用,那就写下来,分享给大家,正好自己也再次回顾一下,熟悉熟悉. 一.下载adt mac版下载地址:http://developer.android.com/sdk/index.html 二.配置jdk 下载完成后将adt解压到指定路径,打开终端,使用指令: java -version 如果能够显示具体的版本,说明本机安装有java,那么可以直接使

快速学习C语言三: 开发环境, VIM配置, TCP基础,Linux开发基础,Socket开发基础

上次学了一些C开发相关的工具,这次再配置一下VIM,让开发过程更爽一些. 另外再学一些linux下网络开发的基础,好多人学C也是为了做网络开发. 开发环境 首先得有个Linux环境,有时候家里机器是Windows,装虚拟机也麻烦,所以还不如30块钱 买个腾讯云,用putty远程练上去写代码呢. 我一直都是putty+VIM在Linux下开发代码,好几年了,只要把putty和VIM配置好,其实 开发效率挺高的. 买好腾讯云后,装个Centos,会分配个外网IP,然后买个域名,在DNSPod解析过去