sass学习之一:sass安装compass部署

主要参考 http://www.jianshu.com/p/5bfc9411f58f

--------------------------------------------

sass基于ruby 需ruby解释器

1. 安装ruby

下载地址 https://rubyinstaller.org/downloads/

选一个合适的版本下载并安装即可。安装中勾选第二项:

检测是否安装成功

ruby -v 

2.sass安装及使用

利用ruby的gem命令

ruby安装好后,打开开始菜单 ,有 start Command Prompt width Ruby,打开 此命令面板,运行命令

gem install sass

运行 sass -v ,查看是否安装成功

ok, sass就安装完成

3. compass的安装及使用

浏览器只认识css文件,sass需要编译成.css文件才能被浏览器使用,有koala可视化工具或gulp等自动化工具配置编译.茴香豆的一百种写法只先研究一种好了。

gem install compass 

运行 compass -v ,查看是否安装成功。

然后是怎样使用 compass?

到自己的工作目录下面,如d盘workspace下手动创建一个Sass-test文件夹,然后进入此目录(我用gitbash工具)

cd Sass-test    //进入到 Sass-test  目录
compass create learn-compass    //创建一个compass项目,learn为项目名称

会看到有

sass是源文件 stylesheets是编译后的css文件;config.rb自然是配置文件

ok,当文件改变时 我们希望能及时自动编译,所以在项目文件中监视sass的change

cd  learn-compass    //进入到项目文件中
compass watch    //监视compass的change

---至此 准备工作完成 做个小小demo-------------------------

1. 在learn-compass/sass文件夹中添加一个test.scss

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

点击保存,可看到命令命令面板内容有变化

在stylesheets目录下课看到编译后的test.css

2.在创建一个html,引入css文件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <link rel="stylesheet" type="text/css" href="stylesheets/test.css">
 6 </head>
 7
 8 <body>
 9 <nav>home</nav>
10 </body>
11 </html>

浏览器运行可看到效果

时间: 2024-10-22 22:06:25

sass学习之一:sass安装compass部署的相关文章

【Redis 1】Redis数据库的学习与实践—安装与部署

Redis数据库的学习与实践-安装与部署 一:Redis数据库简介: Redis-Remote DictionaryServer,可以直接理解为远程字典服务. 这里摘抄一段Redis官网上的话似乎更能准确的概述Redis的含义:Redis is an open source,BSD licensed, advanced key-valuecache and store.It is often referred to as a datastructure server since keys can

Sass学习之 Sass语法入门--3.混合宏

3.混合宏 混合宏的作用: 相当于把复杂的变量声明集中在一起,免去了单个变量的调用. 声明:@mixin border{} 调用:@include border; 混合宏的分类: 不带参数: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 带参数: //默认有值@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; bord

SASS学习笔记1 —— 安装、编译和调试

一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS.先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,

Nodejs学习之一 下载安装与部署nodejs

1,下载nodejs 访问nodejs官网 www.nodejs.org/download/   下载与机器相匹配的版本 2,安装nodejs 下载下来的msi包一直点击下一步即可 3,部署环境 打开cmd控制台 cd到nodejs的安装目录 输入npm install express -d 控制台会访问网络下载相应的数据包,且安装到nodejs下的node_modules目录下 还需要安装模板引擎,一般用ejs或jade 命令如下 npm install jade -d npm install

Jenkins学习初始篇-安装和部署

一.Jenkins介绍 Jenkins是基于Java开发的一款CI(持续集成)工具,主要用来持续发布软件项目,如打包测试一体化,由于基于Java开发,则需要安装JDK,最低版本不能低于JDK1.5 二.Jenkins安装 1.首先从www.jenkins-ci.org,下载稳定版本的包,如我这里下载的就是jenkins2.19.4.建议大家下载war包,能方便部署 2.Jenkins运行,方法很多如:我在centos6.5中搭建了tomcat,JDK和tomcat的版本都是7,直接把jenkin

Sass学习之 Sass语法入门--6.插值#{}

6.插值#{} 将预备好的值放进#{“预备好的值”}这里面 @mixin sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include sizes("header", 12px, 20px, 40px); //CSS

Sass学习之 Sass语法入门--5.占位符%

5.占位符% 只有通过@extend调用才会产生代码,不然不会有任何影响 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译后 //CSS .btn, .block { margin-top: 5px; } .btn, .block span { paddi

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

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

Sass学习之路:Sass、Compass安装与命令行

导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,Sass则是其中的佼佼者. 什么是Sass Sass是最成熟.稳定.强大.专业的CSS扩展语言(官方解释).直白点,Sass就是一个非常好用的CSS预处理器,为css引入部分编程语言的特性. Sass在现阶段,有两种编码的语法,一个是兼容CSS语法的Scss格式文件,一个是Haml.Ruby类似语法的