windows下的SASS/Compass的安装与卸载

摘要:
认识SASS/CompassSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS与Compass的安装说明SASS在Windows操作系统内依赖于Ruby环境,因此在安装SASS之前:1、需要先安装Ruby。Ruby现阶段的安装与一般应用程序安装没有太大区别,环境变量等由安装程序自行设置。#compact:简洁格式的css代码。

认识SASS/Compass

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

SASS与Compass的安装说明

SASS在Windows操作系统内依赖于Ruby环境,因此在安装SASS之前:

1、需要先安装Ruby。Ruby现阶段的安装与一般应用程序安装没有太大区别,环境变量等由安装程序自行设置。

2、Ruby环境内有个包管理器——GEM,它类似于Nodejs下的NPM,它随着Ruby一起被安装,因此不需要额外安装。

安装 Ruby

使用 rubyinstall 安装 ruby
官方网站:http://rubyinstaller.org/

安装好之后需要对ruby换源,因为国内你懂的,参见https://ruby.taobao.org/ 操作如下 :

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

如果在换源时提示如下错误信息:

windows下的SASS/Compass的安装与卸载第1张

这是ruby没有包含SSL证书,所以Https的链接被服务器拒绝,解决方法很简单,首先在这里下载证书(http://curl.haxx.se/ca/cacert.pem), 或者在浏览器里把这个文件内容复制(或者点击此处下载),服务器创建一个新文件cacert.pem,内容粘贴进去,然后再环境变量里设置SSL_CERT_FILE这个环境变量,在系统的环境变量里设置SSL_CERT_FILE这个环境变量,并把value指向这个文件,退出命令行窗口 重新执行添加命令即可

windows下的SASS/Compass的安装与卸载第2张

安装 sass

gem install sass

测试运行编译

sass test.scss test.css
  --style
   #  nested:嵌套缩进的css代码,它是默认值
   #  expanded:没有缩进的、扩展的css代码。
   #  compact:简洁格式的css代码。
   #  compressed:压缩后的css代码。

# watch a file
sass --watch input.scss:output.css
# watch a directory
sass --watch ap/some:some/name

安装compass

gem install compass

创建项目

compass create my-project
cd my-project
compass watch

常见错误

创建 compass 项目报错

compass create my-project

“Errno::EACCES on line [”897“] of C: Permission denied”
LoadError on line ["55"] of D: cannot load such file -- compass/import-once/activate

解决方法:

// uninstall 
gem uninstall sass
gem uninstall compass

// install pre version
gem install compass --pre
gem install sass --pre

使用 compass 监控项目变动

compass watch

LoadError on line ["55"] of D: cannot load such file -- wdm

解决方法
安装 wdm

gem install wdm

安装 wdm 出错

ERROR: Error installing wdm: The 'wdm' native gem requires installed build tools.
Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'

解决方法
下载devKit包 然后根据 上边给出的地址进行 devKit的安装
重新安装 wdm
Temporarily enhancing PATH to include DevKit...
Building native extensions. This could take a while...
Successfully installed wdm-0.1.0
Parsing documentation for wdm-0.1.0
unable to convert "x90" from ASCII-8BIT to UTF-8 for ../../extensions/x64-mingw
32/2.0.0/wdm-0.1.0/wdm_ext.so, skipping
unable to convert "x90" from ASCII-8BIT to UTF-8 for lib/wdm_ext.so, skipping
1 gem installed
后记,先按照一般的方法安装,在一般方法出错情况下再安装以上的方法 例如 --pre
use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.
这里说的是你如果使用compass 就不要是用 sass 命令来监控文件的变动了

免责声明:文章转载自《windows下的SASS/Compass的安装与卸载》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ogg一些诊断技巧Qt 使用全局缩放进行全分辨率适配(QT_SCALE_FACTOR)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS美化自己的完美网页

CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。 CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表...

如何配置Notepad++的C_C++语言开发环境

相信很多人用notepad++,但把其配置成为C/C++还是需要小折腾一下的。本人在网上找了很长时间,也没有一个统一的答案,而且很多人说的方法根本不管用,而且也不够通用,所以还是自己摸索了一下,分享给大家。 话不多说,开始配置。 1/8 下载安装Notepad++,此步不再赘述。 2/8 安装minGW(或者拷贝minGW文件夹,个人感觉安不安装无所谓,...

移动端界面适配

本文引自:http://www.cnblogs.com/xianyulaodi/p/5533201.html  摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话,就很好...

jquery实现提示框的效果

先看下效果图 这三个效果是同一个js写出来的,由此可见只要掌握了 我们可以写出格式各样的提示信息,因为css的灵活性,可以让一个熟练掌握css的人将页面玩弄于鼓掌之间,只要开动你的大脑,发挥你的想象力。 效果已定,我们可以梳理一下思路,以往的提示框,其实最简单的我们只要用css就可以写出来,利用a:hover就可以写出来,但是css写出来的效果有一个...

webpack4多页应用HTML按需添加入口依赖chunk【html-webpack-plugin & html-inline-entry-chunk-plugin】

在webpack4中使用splitChunkPlugin时,根据需要将公共代码拆分为多个依赖后,需要在创建htmlWebpackPlugin时候按需引入对应入口文件依赖的chunk。但是html-webpack-plugin的chunk配置项只能手动添加,在没有得知拆分后的chunk情况下,无法得知对应html的依赖chunk,也就无法按需做引入。 因此鄙...

浏览器工作原理和实践(三)——页面

《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。 一、事件循环 消息队列是一种数据结构,可以存放要执行的任务。它符合队列“先进先出”的特点,也就是说要添加任务的话,添加到队列的尾部;要取出任务的话,从队列头部去取。 从上图可以看出,改造可以分为下面三个步骤: (1)添加一个消息队列; (2)IO 线程中产生的新任务...