Sass-Ruby及Sass、Compass在Windows下安装

最新推荐文章于 2021-07-11 17:22:39 发布
最新推荐文章于 2021-07-11 17:22:39 发布
阅读量588 收藏
点赞数
分类专栏： CSS Sass 文章标签： CSS Sass Compass 安装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiqingjin/article/details/50539222
版权
本文详细介绍了在Windows系统中安装Ruby环境、修改Ruby源、安装Sass及特定版本Sass、更新Ruby程序以及安装Compass的步骤。通过命令行操作，确保每个步骤成功完成，为CSS开发提供便捷工具。
摘要由CSDN通过智能技术生成

1.      ruby环境安装

在http://rubyinstaller.org/downloads/选择合适版本下载，选择安装目录，并勾选Add Ruby executables to your PATH，后面用到命令行，所以需要勾选此项。安装完成后，进入windows命令提示符，输入 ruby –v，返回安装版本，则ruby安装成功。

2.      修改ruby源

默认的ruby源在亚马逊网站上，由于国内网络限制常常很慢，故为了提高速度需要修改ruby源。

命令行输入： gem sources --remove https://rubygems.org/返回已经移除的提示

gem sources –a https://ruby.taobao.org/返回已经正确加入的提示

g

最低0.47元/天 解锁文章
柒青衿
关注
专栏目录
Window 系统下 Ruby安装， Sass安装 ，Compass安装
loushengyue
12-17 954
Window 系统下，可以使用 RubyInstaller 来安装 Ruby 环境，下载地址为：请点击这里下载RubyInstaller 注意： 64位系统选择 Ruby 2.4.2-2 (x64) 32位系统选择 Ruby 2.4.2-2 (x86) Ruby安装 双击rubyinstaller-2.4.2-2.exe 点击 Next，继续向导，记得勾选 Add R
sass和compass的安装
huang_Bingo的博客
02-16 525
一、在安装Sass和Compass之前，需要先安装Ruby。如果你使用的是OS X系统，已经默认安装有Ruby，就不需要安装了。 ruby安装包地址点击打开链接，安装时一定要使用默认路径，否则会出错。 二、安装好ruby后，点击电脑“开始”按钮（Windows），如果有“Start Command Prompt with Ruby”选项则直接点击打开，如果没有该选项则在“搜索程序和文件
windows下，ruby环境的安装，与sass,compass的使用方法
weixin_34292924的博客
05-07 155
cmd下：ruby -v 成功安装使用sass1：移除http://rubygems.org源 gem sources --remove https://rubygems.org/2: 添加taobao源 gem sources -a https://ruby.taobao.org/3: 查看前两步是否操作成功 gem sources -l4: 安装s...
下载、安装Ruby和sass，并在webStorm里配置sass
coder_ying的博客
03-14 1393
下载、安装Ruby和sass，并且在webStorm里配置scss
SASS和Compass学习笔记和在vue中使用SASS
weixin_44181180的博客
07-11 700
文章目录前言一、安装SASS二、vue中使用SASS三、SASS的常见使用总结 前言 一篇简单无奇记录一下学习SASS的博客 一、安装SASS SASS是基于Ruby语言开发的，所以，我们要使用SASS需要先安装Ruby 安装好后，我们就能安装SASS，打开命令行窗口，输入 gem install sass 然后测试一下是否安装好了，我们在命令行中，输入 sass -v 出现版本号就可以了 二、vue中使用SASS 安装依赖 npm install --save-dev sass-loa..
本地安装 ruby sass compass
hjh15827475896的博客
06-24 583
ruby : 是一种计处机语言sass : 是一种 Css 预处理语言compass : 是sass的一个工具集 ，依赖sass,但又扩充了 sass.  可以这样理解，  sass运行的基础是 ruby,  compass 对sass做了集成，方便应用通俗点：sass 和 compass 的关系： 相当于  javascript 和 jquery 之间的关系安装：1：百度上,下载 rubyins...
sass-compass之一
u013285765的博客
04-29 331
这几天在写静态页面比较多，纯用css写复用性不太好，于是就看了看有没有什么工具，于是就发现了sass和compass。 Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。 一、Compass是什么？ 简单说，Compass是Sass的工具库（toolkit）。 Sass本身只是一个编译器，Compass在它的基础上...
Windows8.1 64位 安装 Ruby Sass Compass
略陈管见
03-16 782
整理了Sass，compass 和 ruby 的介绍，以及在windows8.1 下安装会出现的一些问题，供自己参考，希望对其他人也有用。 我们知道CSS是为设计师准备的工具，没有变量，也没逻辑语句，仅有一行行单纯的描述，对于程序员来说是一堆非常麻烦的东西。"CSS预处理器"（css preprocessor）的想法是以程序员的思考方式来
broccoli-ruby-sass
06-29
西兰花Ruby Sass 安装 npm install --save-dev broccoli-ruby-sass 用法 var compileRubySass = require ( 'broccoli-ruby-sass' ) ; compileRubySass ( 'styles' , 'main.scss' , 'main.css' , { imagePath : '...
livre-sass-compass-avance:livre«Sass et Compassavancé，CSS样式的优化»，paru auxÉditionsEyrolles的代码来源-css source code
03-25
Livre Sass和Compassavancé的代码来源 来源杜里弗 ，帕鲁辅助 。... 法语源代码~/livre-sass-compass-avance/ 。 安装自动化 Mac OS X，Linux实用程序，或者您可以自行购买，也可以进行自动安装不同版本的Sass和
sass-inline-svg-image:SASS 内联 SVG 图像 + 可选更改背景填充
07-12
内联 svg 图像 将 svg 图像的内容直接嵌入到样式表中。 对于小图像，这可能是以生成更大的 CSS 文件为代价的性能优势。... sass --compass --require '../../inline-svg-image.rb' sass/example.sass > css/example.c
ruby sass compass
01-19
确保你在安装Ruby的目录下执行这个命令，例如在“ruby200”的主目录。 再来说说Compass，它是基于Sass的一个强大框架。Compass提供了一系列预先定义的样式、布局工具和最佳实践，使得开发者可以快速地构建响应式和...
Bootstrap-栅格系统自适应布局
热门推荐
柒青衿的博客
12-20 3万+
1 container 顾名思义container是栅格系统最外层的class，直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值，这样container与浏览器窗口之间就存在一定距离。 2 row row指container的一行，每行理想状态包含12个col，这些col在不同屏幕大小时行为不同，见下图： 你也
Bootstrap-栅格布局实例
柒青衿的博客
12-20 7049
下面是某管理系统的Bootstrap实现 XXXXX系统 body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; } /* 下面是左侧导航栏的代码 */ .sidebar {
CSS-合理使用z-index控制盒子视轴高度，解决z-index失效
柒青衿的博客
06-18 6794
z-index只控制某些特殊盒子，比如绝对定位的盒子。不管特殊盒子还是普通盒子，它们都有z轴高度（视轴高度），那么当这些盒子重合排列时，哪个盒子在上哪个盒子在下呢，z-index又是如何影响盒子的上下排列的，为什么有时候z-index会“失效”呢。这些都是需要我们理解z-index原理，合理使用。
CSS-float浮动与流体布局（2）
柒青衿的博客
12-11 2081
2 float特性 2.1 包裹性 未浮动： hi 效果： 浮动后： hi 效果： 结论：未设宽度的块级元素浮动后展示效果如果内联元素，会自动收缩包裹其内容。具有相同特性的css样式还有： display:inline-block/talbe-cell position:absolute/fixed overflow:hidden/scroll 2.2
CSS-overflow特性及总结
柒青衿的博客
12-27 1688
1.      overflow-x与overflow-y 如果两值不同，其中一值为visible，另一值为 hidden、scroll、auto，则visible被重置为auto，自动重置。所以给一个宽高都大于容器的内容div设置overflow-x:hidden; 会使得其x方向隐藏，y方向出现滚动条。 2.      滚动条一般17px。 3.      如果设置内容器宽度为100%，
CSS-float 特性及应用总结
柒青衿的博客
12-26 1603
1.      float的结果 包裹、坚挺、隔绝、破坏 2.      清除浮动带来的影响 方法：浮动元素底部加 clear:both 的空div（margin重叠）             父元素BFC化（无margin重叠）             .clearfix:after{                   content:’’;
Sass与Compass实战指南：2013年最新版
这本书详细介绍了如何安装和配置Sass和Compass，包括在各种开发环境中的集成方法，如Ruby on Rails和其他Web框架。书中涵盖的主题包括但不限于：基础语法和概念、变量管理、嵌套和继承、混合（mixin）的应用、模块化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值