1、使用node 的command

运行命令:

gem install sass
2.cmd检查是否安装成功 
sass  -v
 如果成功了 可以看见版本信息
Sass 3.5.5 ...
3. 创建.scss
变量的命名规范
$开头
$color:red;
 使用
.contaier{
color:$color;
}
4.编译
使用node编译 
sass --watch// 当scss有改变时自动编译
sass/bootstrap.scss:css/bootstrap.css//scss的文件目录:生成css文件存放的目录

5.使用 像引入css一样 引入生成的.css文件
二 阮一峰：http://www.ruanyifeng.com/blog/2012/06/sass.html

sass 的安装 编译 使用的更多相关文章

  1. 1.sass的安装，编译，还有风格

    1.安装sass 1.安装ruby 因为sass是用ruby语言写的,所以需要安装ruby环境 打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径 [x] Add Ruby executab ...

  2. Sass环境安装-Sass sublime 编辑器插件编译方法

    首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...

  3. SASS的安装及使用（前提：安装Ruby）

    本文仅适用于Windows系统. 一.安装Ruby Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass. Linux和 ...

  4. sass的安装与使用

    一.SASS简介:SASS是一种使CSS的开发,变得简单和可维护开发工具. 二.安装和使用 2.1 SASS的安装:  安装sass之前首先需要安装ruby,ruby的安装可以直接在百度搜索安装,安装 ...

  5. 学习Sass之安装Sass（一）

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  6. 学习Sass之安装Sass

    学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...

  7. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  8. 在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  9. 学习笔记 - Sass的安装与使用手册

    最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...

随机推荐

  1. Vue项目，运行出现warning(Emitted value instead of an instance of Error)

    组件:<XXXX v-for="item in items" /> warning:(Emitted value instead of an instance of E ...

  2. 了解Python内存管理机制，让你的程序飞起来

    引用: 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的手工管理,还是Java的垃圾回收,都成为语言最重要的特征.这里以Python语言为例子,说明一门动态类型的.面 ...

  3. Java课程作业之动手动脑（五）

    1.请阅读并运行AboutException.java示例. import javax.swing.*; class AboutException { public static void main( ...

  4. 1.HTML+CSS写个8

    感想: 有点缺陷.效果地址:https://codepen.io/flyingliao/pen/QobdyE HTML code: <div class="eight"> ...

  5. 实用的DDos攻击工具

    来源: http://www.safecdn.cn/linux/2018/12/ddos/95.html ‎ 特别提示:仅用于攻防演练及教学测试用途,禁止非法使用 Hyenae 是在windows平台 ...

  6. 深入理解python with语句

    python的with语句相当于try.....finally,它是如何实现的呢?下面就结合范例和伪指令的实现来分析一下. with语句会汇编成:先调用with语句后面的表达式(open(...)), ...

  7. UI学习网站

    以下是我收集的UI设计的网站提供给大家参考: 站酷 www.zcool.com.cn UI中国 www.ui.cn 学UI网 www.xueui.cn UIGREAT www.uigreat.com ...

  8. PHP提取HTML代码中img标签下src属性

    需求:提取整片文章中img的src属性,并保存到一个数组当中 preg_match_all("/(href|src)=([\"|']?)([^\"'>]+.(jpg ...

  9. visio交叉线不凸起

    使用visio作图时,经常会遇到交叉线在相交时会形成一个弯曲弓形,这有时十分影响视图效果.可以采用下面的方法消除弓形. 1.visio2003:只需要选中该交叉线,选择“格式”->“行为”,在打 ...

  10. HashMap.put()和get()原理

    /** * Returns the value to which the specified key is mapped, * or if this map contains no mapping f ...