`
ultrafrog
  • 浏览: 7648 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

SASS的安装教程

css 
阅读更多
作为一个蛋疼的全端工程师,平时除了需要架构设计之外,还需要对前端进行设计,免不了的同Javascript和CSS打交道,时间长了,感觉CSS的维护还是比较麻烦的,好在赶上了好时光,除了最常用的Bootstrap框架可以用之外,还诞生了SASS和LESS,可以很高效的维护CSS。说实话已经忘记当初为什么选择SASS而不是LESS了,可能是想尝试下Ruby吧,不过用了之后确实是爱不释手啊。

讲了那么多废话,让我们开始SASS之旅吧。

首先我们需要安装Ruby,其实挺简单的,去官网下载一个就好了,地址如下:
https://www.ruby-lang.org/

当然,如果你和我一样是Windows用户,那需要的是RubyInstaller,官网里面能找到地址,当然也可以直接点下面的地址:
http://rubyinstaller.org/downloads/

建议下载压缩包就可以了,爱放哪里就放哪里,然后解压,添加Path里面定义到bin目录,具体的大家应该都懂,我就不详细说了。

配置完之后,打开命令行,输入

ruby -v


能够正常返回就说明配置没问题了,可以开始使用Ruby了,当然我们的目标不是Ruby,Ruby只是我们必须要的工具,继续在命令行输入

gem install sass


当然理论上这样就会自动下载SASS并安装了,但是由于众所周知的原因,单这样可能不太好用,那要怎么办?那什么关上一扇门,总会打开一扇窗,总有办法解决的。

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


这三条命令的意思分别是:
1. 删除资源库
2. 添加资源库
3. 列出资源库

最后一条命令之后确认当前的资源库仅 https://ruby.taobao.org/ 一条,之后再次执行

gem install sass


是不是安装很顺利?呵呵,恭喜你,安装完之后就可以用了,是不是很开心
分享到:
评论

相关推荐

    SASS 零基础学习案例以及安装教程

    以上就是SASS的基础知识和安装教程。随着你对SASS的深入学习,你会发现它能极大地提升CSS的开发效率,让代码更易于维护。通过实践这些案例,你可以快速上手SASS,并逐渐掌握其高级特性,比如函数、模块化工具(如...

    node.js 安装解决办法:sass-loader node-sass WIN10 WIN7安装与常见问题解决办法.zip

    中了解到,这是一个关于在Win7 64位系统上安装最新版Node.js (v13.14.0) 的指南,同时也涵盖了在Windows环境下安装和使用npm(Node.js包管理器)、sass-loader和node-sass的教程,以及如何处理可能出现的安装错误。...

    前端技术之Sass教程.zip

    本教程将深入探讨Sass的基础知识及其在前端开发中的应用。 一、Sass的安装与设置 在开始学习Sass之前,你需要先安装Sass编译器。通常,开发者会选择Ruby版本的Sass,因为它是最初的实现。你可以通过RubyGems来安装...

    sass(scss)的安装与使用教程

    在Windows平台下安装SASS和SCSS,首先需要安装Ruby语言环境,因为SASS是用Ruby语言开发的。安装Ruby时要选择适合自己系统位数(32位或64位)的版本,下载安装包后,进行默认的安装即可。 安装完成后,可以通过打开...

    Sass-Demo:这是一个Sass小教程,教初学者如何使用Sass

    ##Installing 首先,您需要安装 Sass 本身。 我实际上向 Sass 文档提出了拉取请求,因为他们不知何故没有这个。 要使用的命令是: sudo su -c " gem install sass " 您可能不需要使用 sudo,因此可以随意使用。 ...

    Sass入门学习笔记

    CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、...

    ruby环境中自动编译sass教程

    sass安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。安装ruby //www.jb51.net/article/61501.htm 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby 然后...

    learn-sass-basics:教程

    这是一个简单的教程,可在大约30分钟到一个小时的时间内学习SASS基础知识。 基于正式的指南,但有点冗长。 什么是SASS? SASS代表语法很棒的样式表。 它是CSS的“预处理器”。 基本上,它允许您以非常简单,方便的...

    ruby sass compass

    在压缩包文件"ruby_sass_compass"中,可能包含了一些示例项目、配置文件或者教程文档。这些资源可以帮助你更好地理解和使用Ruby Sass Compass。比如,可能有一个名为`compass_project`的文件夹,里面包含了`.scss`...

    Web-前端html+css从入门到精通 220. Sass与Less介绍和环境搭建.zip

    一旦Sass安装完成,你可以使用`sass --watch input.scss:output.css`命令来实时编译.SCSS文件。 对于Less,你需要安装Node.js环境,然后使用npm(Node Package Manager)来安装Less编译器。运行`npm install less -...

    vue使用Sass时报错问题的解决方法

    在Vue项目中,Sass是一种常用的预处理器,它允许开发者使用更高级的...希望本文提供的解决方案能对你在使用Vue和Sass时遇到的问题有所帮助,如果需要了解更多相关内容,可以搜索相关的技术文章或继续浏览其他相关教程。

    vue安装和使用scss及sass与scss的区别详解

    Vue.js 是一款流行的前端框架,它...如果你在使用过程中遇到问题,或需要了解更多高级特性,可以通过查阅文档或在线教程进一步学习。同时,持续关注 Vue 社区和 Web 开发的最新动态,可以帮助你保持技能的与时俱进。

    轻量级Sass工具集___下载.zip

    此外,社区中也有大量的教程和示例代码可供学习。 6. **版本更新与兼容性** 保持Bourbon的更新是确保最佳性能的关键。定期检查新版本并升级,以利用最新的功能和修复。同时,注意Bourbon对Sass版本和浏览器的兼容...

    php-sass:使用纯PHP自动将SASS编译为CSS。 没有使用Ruby。 一行代码。 当前使用最新的SCSS 3.2语法,导入和混合。 指南针也可以使用

    安装及使用 在项目的composer.json中,添加这些依赖项。 如果您不使用Composer,请走到角落,为自己感到非常羞愧。 然后,在那里站了2-3个小时之后,观看一些有关如何使用Composer的教程,这些教程现在非常简单,...

    sass-recipes:Sass经常做的事或我应该记住做的事,因为谷歌搜索教程太老了

    《Sass食谱:超越老旧教程的现代实践》 在当今快速发展的前端开发领域,Sass作为CSS预处理器,已经成为构建高效、可维护样式的重要工具。然而,许多开发者仍然依赖于旧的教程来学习和应用Sass,这往往无法充分利用...

    Web开发学习资料整理(第五月).docx

    综上所述,这份学习资料可能包含HTML基础知识以及深入Sass的教程,适合想要学习Web前端开发,尤其是CSS预处理的初学者。学习者可以通过安装Ruby环境,理解Sass的基本概念和语法,掌握Sass的安装、配置和编译方法,...

    Sass-Project-Tutorial:仅用于教学目的

    5. **Sass的安装与使用**:你可以通过Ruby gem来安装Sass,命令行工具`sass`用于将.SCSS文件(Sass的语法版本)编译为普通的CSS。此外,还可以使用像Webpack这样的现代构建工具,配合如node-sass或dart-sass插件实现...

    SCSS(SASS)画小黄人-内含源码以及设计说明书(可以自己运行复现).zip

    - **SASS编译器**:确保安装了SASS编译器,如Ruby Sass或LibSass,以便将SCSS代码转换为浏览器可识别的CSS。 - **文本编辑器**:选择一款支持SCSS语法高亮和自动补全的编辑器,如Visual Studio Code或Sublime Text。...

Global site tag (gtag.js) - Google Analytics