作为一个蛋疼的全端工程师,平时除了需要架构设计之外,还需要对前端进行设计,免不了的同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的深入学习,你会发现它能极大地提升CSS的开发效率,让代码更易于维护。通过实践这些案例,你可以快速上手SASS,并逐渐掌握其高级特性,比如函数、模块化工具(如...
中了解到,这是一个关于在Win7 64位系统上安装最新版Node.js (v13.14.0) 的指南,同时也涵盖了在Windows环境下安装和使用npm(Node.js包管理器)、sass-loader和node-sass的教程,以及如何处理可能出现的安装错误。...
本教程将深入探讨Sass的基础知识及其在前端开发中的应用。 一、Sass的安装与设置 在开始学习Sass之前,你需要先安装Sass编译器。通常,开发者会选择Ruby版本的Sass,因为它是最初的实现。你可以通过RubyGems来安装...
在Windows平台下安装SASS和SCSS,首先需要安装Ruby语言环境,因为SASS是用Ruby语言开发的。安装Ruby时要选择适合自己系统位数(32位或64位)的版本,下载安装包后,进行默认的安装即可。 安装完成后,可以通过打开...
##Installing 首先,您需要安装 Sass 本身。 我实际上向 Sass 文档提出了拉取请求,因为他们不知何故没有这个。 要使用的命令是: sudo su -c " gem install sass " 您可能不需要使用 sudo,因此可以随意使用。 ...
CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、...
sass安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。安装ruby //www.jb51.net/article/61501.htm 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby 然后...
这是一个简单的教程,可在大约30分钟到一个小时的时间内学习SASS基础知识。 基于正式的指南,但有点冗长。 什么是SASS? SASS代表语法很棒的样式表。 它是CSS的“预处理器”。 基本上,它允许您以非常简单,方便的...
在压缩包文件"ruby_sass_compass"中,可能包含了一些示例项目、配置文件或者教程文档。这些资源可以帮助你更好地理解和使用Ruby Sass Compass。比如,可能有一个名为`compass_project`的文件夹,里面包含了`.scss`...
一旦Sass安装完成,你可以使用`sass --watch input.scss:output.css`命令来实时编译.SCSS文件。 对于Less,你需要安装Node.js环境,然后使用npm(Node Package Manager)来安装Less编译器。运行`npm install less -...
在Vue项目中,Sass是一种常用的预处理器,它允许开发者使用更高级的...希望本文提供的解决方案能对你在使用Vue和Sass时遇到的问题有所帮助,如果需要了解更多相关内容,可以搜索相关的技术文章或继续浏览其他相关教程。
Vue.js 是一款流行的前端框架,它...如果你在使用过程中遇到问题,或需要了解更多高级特性,可以通过查阅文档或在线教程进一步学习。同时,持续关注 Vue 社区和 Web 开发的最新动态,可以帮助你保持技能的与时俱进。
此外,社区中也有大量的教程和示例代码可供学习。 6. **版本更新与兼容性** 保持Bourbon的更新是确保最佳性能的关键。定期检查新版本并升级,以利用最新的功能和修复。同时,注意Bourbon对Sass版本和浏览器的兼容...
安装及使用 在项目的composer.json中,添加这些依赖项。 如果您不使用Composer,请走到角落,为自己感到非常羞愧。 然后,在那里站了2-3个小时之后,观看一些有关如何使用Composer的教程,这些教程现在非常简单,...
《Sass食谱:超越老旧教程的现代实践》 在当今快速发展的前端开发领域,Sass作为CSS预处理器,已经成为构建高效、可维护样式的重要工具。然而,许多开发者仍然依赖于旧的教程来学习和应用Sass,这往往无法充分利用...
综上所述,这份学习资料可能包含HTML基础知识以及深入Sass的教程,适合想要学习Web前端开发,尤其是CSS预处理的初学者。学习者可以通过安装Ruby环境,理解Sass的基本概念和语法,掌握Sass的安装、配置和编译方法,...
5. **Sass的安装与使用**:你可以通过Ruby gem来安装Sass,命令行工具`sass`用于将.SCSS文件(Sass的语法版本)编译为普通的CSS。此外,还可以使用像Webpack这样的现代构建工具,配合如node-sass或dart-sass插件实现...
- **SASS编译器**:确保安装了SASS编译器,如Ruby Sass或LibSass,以便将SCSS代码转换为浏览器可识别的CSS。 - **文本编辑器**:选择一款支持SCSS语法高亮和自动补全的编辑器,如Visual Studio Code或Sublime Text。...