学习Sass之安装Sass

为什么使用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/%E5%AD%A6%E4%B9%A0sass%E4%B9%8B%E5%AE%89%E8%A3%85sass%EF%BC%88%E4%B8%80%EF%BC%89/

 
 
分类: sass
标签: sasscss

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

  1. 学习Sass之安装Sass(一)

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

  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. react.js 从零开始(五)React 中事件的用法

    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...

  2. python 编码转换(转)

    主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情况: 自动识别 字符串编 ...

  3. 朴素贝叶斯算法(Naive Bayes)

    朴素贝叶斯算法(Naive Bayes) 阅读目录 一.病人分类的例子 二.朴素贝叶斯分类器的公式 三.账号分类的例子 四.性别分类的例子 生活中很多场合需要用到分类,比如新闻分类.病人分类等等. 本 ...

  4. Codeforces Round #306 (Div. 2) C

    意甲冠军 到不超过一个更100该整数字符串.采取随机从数间(不能拿). 问:是否有可能被剩下8除尽.假设能,出口YES和任选一个数字的其余病例的. 不能够,输出NO. 思路 想法题. 首先观察到.10 ...

  5. 《STL源代码分析》---stl_list.h读书笔记

    STL在列表list它是一种经常使用的容器.list不连续双向链表在内存,而且是环形. 理解列表如何操作的详细信息,然后.阅读STL名单上的代码是最好的方法. G++ 2.91.57.cygnus\c ...

  6. ASP.NET的CMS

    最受欢迎的ASP.NET的CMS下载 1. Umbraco 项目地址 | 下载 Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbrac ...

  7. Excel 删除所有错误公式

    当前工作表的话可以F5-定位-公式-错误值 来选中所有含错误值的单元格,然后按delete删除. 多表的话没办法了,因为不能跨工作表多重选中,只能一页页的删,或者用vba编个宏来解决

  8. jquery+css3打造一款ajax分页插件

    原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...

  9. 使用ButterKnife无法inject view的解决办法

    使用ButterKnife做android开发时,发现无法inject,如下,tvInfo总是null. @InjectView(R.id.textView1Info) TextView tvInfo ...

  10. iis配置PHP

    今天在服务器上配置PHP出现在下面的问题:“HTTP 错误 500.0 - Internal Server Error,C:\php\php-cgi.exe - FastCGI 进程意外退出”,下面说 ...