为什么使用Sass

作为前端(html、javascript、css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了、javascript由于NODE.JS而成为目前前后端统一开发语言的不二之选。只有css似乎成为前端开发的被忽视的角色了。

Sass让css有了动态语言的特点,在初次学习css时,有时候同样的样式在不同的#或.中一次又一次重复的编码,有了Sass,在css语法的基础上不仅可以写变量、函数,而且可以百分百的转换为标准的css。再次把Don‘t Repeat Yourself进行到底,降低了“码农”的工作量,提高了效率。而且现在越来越多的优秀开发人员专门利用sass和compass构建出非常优秀的前端样式开发框架(如,Button),再一次提高我们的生产力。

准备条件

在安装和使用sass之前,需要一些准备条件:

  1. 文件夹---存放*.scss 或 *.sass;

  2. 编辑器,我们推荐使用Sublime Text 2 或者 3

  3. 你的电脑需要安装Ruby,因为sass是依赖于Ruby的。在windows需要自己手动下载Ruby的。

安装Sass

使用命令行安装sass:

gem install sass

使用命令,查看是否安装成功,如下显示表示安装成功:

$ sass -v
Sass 3.3.8 (Maptastic Maple)

简单使用Sass

在sass文件夹下创建demo1.scss文件,内容:

$myColor: #ccc;

#page {
color: $myColor;
}

使用命令行:

sass demo1.scss demo1.css

会在同一个文件夹下生成一个demo1.css文件,内容:

#page {
color: #cccccc; }

提高生产力的Sass

如下,在学习sass之前我们大概都是这么来写css的:

ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

但,有了sass后,那就方便多了:

ul.nav {
float: right; li {
float: left; a {
color: #111;
}
&.current {
font-weight: bold;
}
}
}

通过编译,得到css:

ul.nav {
float: right; }
ul.nav li {
float: left; }
ul.nav li a {
color: #111; }
ul.nav li.current {
font-weight: bold; }

除了排版不一样之外,再也看不出有什么区别。但使用sass写出来的样式结构,不仅层次分明,意思明确,而且编码量明显减少。

转自:http://www.yemeishu.com/学习sass之安装sass(一)/

学习Sass之安装Sass(一)的更多相关文章

  1. 学习Sass之安装Sass

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

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

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

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

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

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

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  5. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  6. 安装sass时遇到Failed to build gem native extension

    错误信息 执行命令: sudo gem install sass时遇到下面的错误信息 Building native extensions. This could take a while... ER ...

  7. Sass学习之路(2)——Sass环境安装(windows版)

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

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

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  9. 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

    1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551    安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去.       安装结束后在命令行中 ...

随机推荐

  1. ROCK 聚类算法‏

    ROCK (RObust Clustering using linKs)  聚类算法‏是一种鲁棒的用于分类属性的聚类算法.该算法属于凝聚型的层次聚类算法.之所以鲁棒是因为在确认两对象(样本点/簇)之间 ...

  2. little skill---ping

    一.ping简介 Ping是Windows下的一个命令,在Unix和Linux下也有这个命令. ping也属于一个通信协议,是TCP/IP协议的一部分. 利用“ping”命令可以检查网络是否连通,可以 ...

  3. 浅谈压缩感知(三十一):压缩感知重构算法之定点连续法FPC

    主要内容: FPC的算法流程 FPC的MATLAB实现 一维信号的实验与结果 基于凸优化的重构算法 基于凸优化的压缩感知重构算法. 约束的凸优化问题: 去约束的凸优化问题: 在压缩感知中,J函数和H函 ...

  4. paip. dsl 编程语言优点以及 常见的dsl

    paip. dsl 编程语言优点以及  常见的dsl 作者Attilax 艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn. ...

  5. 文件上传小技巧/原生态【html篇】

    引语:大家都知道,html中上传文件就一个input,type=file就搞定了.但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的.但是其实挺简单,今天就来说说上传文件小技巧吧 ...

  6. javascript设计模式与开发实践阅读笔记(9)——命令模式

    命令模式:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时希望用一种松耦合的方式来设计软件,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 说法很复 ...

  7. RecyclerView的使用

    什么是RecyclerView         RecyclerView是Android 5.0 materials design中的组件之一,相应的还有CardView.Palette等.看名字我们 ...

  8. DataGridView很详细的用法(转载)

    一.DataGridView 取得或者修改当前单元格的内容: 当前单元格指的是 DataGridView 焦点所在的单元格,它可以通过 DataGridView 对象的 CurrentCell 属性取 ...

  9. Swift入门篇-集合

    一:数组 一:可变数组 定义:数组使用有序列表存储相同类型的多重数据. 格式: 第一种格式 var 变量: 类型[] = [变量值,变量值,...] 第二种格式 var 变量 =[变量值,变量值,.. ...

  10. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...