1.安装sass

1.安装ruby

因为sass是用ruby语言写的,所以需要安装ruby环境

打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

  • [x] Add Ruby executables to your PATH

安装完成之后继续下一步操作


2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具,类似于nodejs 的npm

gem install sass

这个时候如果不翻墙的话是会出问题的,因为:

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES *** https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

安装好之后执行sass -v就可以看到sass的版本了

实在实在不行,就安装离线文件吧,但是失败率也很高

gem install ./.../sass-3.4.22.gem

2.编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译

例如:

sass scss/a.scss:css/a.css

sass 后面写要编译的sass文件的路径,‘:’后面写的是

要输出的目录及名字

  • 需要注意的是:必须有这个文件夹才能在里面生成css

这样的话写一句执行一次编译一次有些太麻烦

可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css

--watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹


2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的

考拉的方式就不多做介绍了,大家i自己去看一下

gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less

这里是网址,点击查看

3.sass四种风格

sass编译的格式

sass编译输出的css有四种格式

  • nested 嵌套
  • compact 紧凑
  • expanded 扩展
  • compressed 压缩

这些样式会影响输出的css的格式

简单介绍一下:

css默认输出的嵌套

ul{
font-size:15px;
li{
list-style:none;
}
}

---》

ul {
font-size: 15px; }
ul li {
list-style: none; }

紧凑compact

在编译的时候需要执行

sass --watch scss:css --style compact

这个时候输出的代码就是

ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }

compressed 压缩

在编译的时候需要执行

sass --watch scss:css --style compressed

--->

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}

expanded 扩展

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style expanded

--->

ul {
font-size: 15px;
}
ul li {
list-style: none;
animation: all 0.3s;
}

compressed 压缩

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style compressed

--->

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}

4.sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法

两个版本的区别

  • 后缀名不同 .sass和.scss
  • 语法不同,请看下面

新版:

/*新版本
多行文本注释*/ //新版本
//单行文本注释 @import "base"; @mixin alert{
color:red;
background:blue;
} .alert-warning{
@include alert;
} ul{
font-size:15px;
li{
list-style:none;
}
}

老版本:

/*新版本
多行文本注释 //新版本
单行文本注释*/ @import "base" =alert
color:red
background:blue .alert-warning
+alert ul
font-size:15px
li
list-style:none

1.sass的安装,编译,还有风格的更多相关文章

  1. sass 的安装 编译 使用

    1.使用node 的command 运行命令: gem install sass2.cmd检查是否安装成功 sass -v 如果成功了 可以看见版本信息Sass 3.5.5 ...3. 创建.scss ...

  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. 1-3 Sass 语法、编译、调试

    Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...

随机推荐

  1. iphone6 plus导入联系人或者通讯录

    iphone6 plus快速导入联系人或者通讯录(使用QQ同步助手,真的很简单) 最近换了部手机,由于之前的手机保存联系人都是保存在手机,没有备份在sim卡,由于sim卡被我剪小了,不能插回原来的手机 ...

  2. php 7.2 一些注意事项.

    <?php $b = array(); each($b); // Deprecated: The each() function is deprecated. This message will ...

  3. TCP/IP协议栈 --- IP路由

    IP路由:当一个IP包在主机发送出去或者在网络当中时,是怎么选择路径到达目的主机的呢? 一般情况下, 如果说源主机和目的主机在同一个网络中的话,那个数据报可以直接到达目的主机而不经过路由器,下面可以试 ...

  4. Android 7.0 中 ContentProvider 实现原理

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:汪毅雄 导语: 本文描述了ContentProvider发布者和调用者这两在Framework层是如何实现的. 作为Android的四大 ...

  5. 51Nod 1001 数组中和等于K的数对 Set

    给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数,找出数组A中所有和等于K的数对.例如K = 8,数组A:{-1,6,5,3,4,2,9,0,8},所有和等于8的数对包括(-1,9),(0 ...

  6. 如何利用panel在一个窗口中实现诸多页面的显示

    Book_register form11 = new Book_register();//new一个对象 form11.TopLevel = false;//去除子窗体的顶级窗体设置 form11.P ...

  7. google软件测试之道读后感(一)

    这几天在抽空读一本新书,久负盛名的<google软件测试之道>.之前在网络上一点一点地看过它的英文版,很受触动,还做了很长的读书笔记,现在看到了中文版,才恍觉之前的好些理解存在不恰当的地方 ...

  8. C#真的过时了吗?

    现在有一种言论:C#过时了!!! 有人说现在是BS的时代,C#开发BS网站的那一套,相对于Java.PHP来说,效率太低了! 有人说现在是移动互联网时代,C#作为微软主推的语言,无法开发移动应用成为其 ...

  9. java web学习笔记 jstl

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53311722  冷血之心的博客) 一.JSTL标签介绍 1.什么是 ...

  10. C++彩色数据流动界面

    一个数据流动界面 #include <windows.h> #include <time.h> #include <cstdio> #include <str ...