[Sass学习]Sass的安装和使用

安装

需要安装Ruby, Sass

Ruby的安装分两个平台

1. Window平台安装方法:

  第一步,去官网 http://rubyinstaller.org/downloads 下载ruby

  第二步,安装,选择默认安装即可,安装选项选第二项。

  第三步,安装完成后,打开ruby command,调整sources

      gem sources -l  查看当前镜像地址

      gem sources --remove [url]

      gem sources -a http://gems.ruby-china.org/

2. Mac平台安装方法:

  Mac平台自带Ruby,可以直接安装Sass

Sass的安装方法   gem install sass

检测是否安装成功  sass -v

配置:正常情况下,在scss文件中不允许出现UTF8格式的中文符号,配置方法是打开Sass安装目录下的文件

C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb

打开该文件后在文件里的require(XXX)语句之后加入

Encoding.default_external = Encoding.find("utf-8");

使用

在ruby command prompt中,使用Sass命令完成SCSS-->CSS的编译过程,语法:

sass <scss file path>/filename.scss:<css file path>/filename.css

example:

  cd filepath

  sass css/file.scss:css/file.css

如果有多个SCSS文件需要编译,可以不用指定具体文件名,而是直接使用文件目录即可,语法:

sass <scss file path>:<css file path>

example:

    cd filepath

    sass css/:css/

如果需要实时监听SCSS文件变化,并同时生成新的CSS文件。可以使用 --watch 参数,语法:

sass --watch

example:

    sass --watch css/:css/

时间: 2024-12-20 01:17:51

[Sass学习]Sass的安装和使用的相关文章

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

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

sass学习--sass的函数功能(进阶篇)

1.字符串功能: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号: To-upper-case($string):将字符串小写字母转换为大写字母 To-lower-case($string):将字符串大写字母转换为小写字母 unquote($string): //sass:unquote($string) .test2 { content: unquote("'Hello Sass!"); } .test3 { content:

学习Sass之安装Sass(一)

为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开发语言的不二之选.只有css似乎成为前端开发的被忽视的角色了. Sass让css有了动态语言的特点,在初次学习css时,有时候同样的样式在不同的#或.中一次又一次重复的编码,有了Sass,在css语法的基础上不仅可以写变量.函数,而且可以百分百的转换为标准的css.再次把Don't Repeat Y

sass学习笔记-安装

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby

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安装好后,打开开始菜单 ,有 sta

sass学习笔记(一):sass在windows下的安装、编译

一.sass在windows下的安装 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可以在这里下载: https://www.ruby-lang.org/en/downloads/ Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby. Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板Start Command Prompt with Ruby.接下来就可以安装 Sass 了. 1.通过命令安装 Sa

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

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

Sass学习笔记(补充)

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C