为什么使用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. IE11下Forms身份认证无法保存Cookie的问题

    ASP.NET中使用Forms身份认证常见的做法如下: 1. 网站根目录下的Web.config添加authentication节点 <authentication mode="For ...

  2. HTML5 ——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  3. docker学习笔记一:基本安装和设置容器静态ip

    docker是一个lxc升级版的容器类虚拟环境,具有快速部署,灵活,易迁移的虚拟机模式,现在各大公司已经开始广泛使用为了自己方便学习linux,需要多台虚拟机环境,但是vmware开启多台虚拟机时需要 ...

  4. CSS关于元素垂直居中的问题

    今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码 方法1: <div class="div1"> <d ...

  5. paip.哈米架构CAO.txt

    paip.哈米架构CAO.txt 智能语义搜索方法,建立了学习机,通过对用户点击情况的处理,对知识库进行及时更新,并将搜索结果根据关联度进行排序及重新排序,使用户能快速查询信息,从而能不断适应用户使用 ...

  6. 浅入“Block Formatting Context”

    本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...

  7. Leetcode-203 Remove Linked List Elements

    #203.   Remove Linked List Elements Remove all elements from a linked list of integers that have val ...

  8. iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前

    转:http://blog.csdn.net/houseq/article/details/40051207 对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>. ...

  9. APP顶号逻辑

    登录的接口login.do接口上需要记录关键的信息:userId.设备型号(Android|iPhone).登录时间.登录IP.设备唯一标识(UUID) 当在另外一台新设备上登录同一帐号时,将user ...

  10. Adafruit的树莓派教程第五课:使用控制电缆

    Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiM ...