学习Sass之安装Sass
学习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之前,需要一些准备条件:
文件夹---存放*.scss 或 *.sass;
编辑器,我们推荐使用Sublime Text 2 或者 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之安装Sass的更多相关文章
- 学习Sass之安装Sass(一)
为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...
- Sass环境安装-Sass sublime 编辑器插件编译方法
首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...
- 学习笔记 - Sass的安装与使用手册
最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- 在sublime text3中安装sass编译scss文件
一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...
- 安装sass时遇到Failed to build gem native extension
错误信息 执行命令: sudo gem install sass时遇到下面的错误信息 Building native extensions. This could take a while... ER ...
- Sass学习之路(2)——Sass环境安装(windows版)
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...
- SASS学习笔记1 —— 安装、编译和调试
一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...
- 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher
1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551 安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去. 安装结束后在命令行中 ...
随机推荐
- react.js 从零开始(五)React 中事件的用法
事件系统 虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
- python 编码转换(转)
主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情况: 自动识别 字符串编 ...
- 朴素贝叶斯算法(Naive Bayes)
朴素贝叶斯算法(Naive Bayes) 阅读目录 一.病人分类的例子 二.朴素贝叶斯分类器的公式 三.账号分类的例子 四.性别分类的例子 生活中很多场合需要用到分类,比如新闻分类.病人分类等等. 本 ...
- Codeforces Round #306 (Div. 2) C
意甲冠军 到不超过一个更100该整数字符串.采取随机从数间(不能拿). 问:是否有可能被剩下8除尽.假设能,出口YES和任选一个数字的其余病例的. 不能够,输出NO. 思路 想法题. 首先观察到.10 ...
- 《STL源代码分析》---stl_list.h读书笔记
STL在列表list它是一种经常使用的容器.list不连续双向链表在内存,而且是环形. 理解列表如何操作的详细信息,然后.阅读STL名单上的代码是最好的方法. G++ 2.91.57.cygnus\c ...
- ASP.NET的CMS
最受欢迎的ASP.NET的CMS下载 1. Umbraco 项目地址 | 下载 Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbrac ...
- Excel 删除所有错误公式
当前工作表的话可以F5-定位-公式-错误值 来选中所有含错误值的单元格,然后按delete删除. 多表的话没办法了,因为不能跨工作表多重选中,只能一页页的删,或者用vba编个宏来解决
- jquery+css3打造一款ajax分页插件
原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...
- 使用ButterKnife无法inject view的解决办法
使用ButterKnife做android开发时,发现无法inject,如下,tvInfo总是null. @InjectView(R.id.textView1Info) TextView tvInfo ...
- iis配置PHP
今天在服务器上配置PHP出现在下面的问题:“HTTP 错误 500.0 - Internal Server Error,C:\php\php-cgi.exe - FastCGI 进程意外退出”,下面说 ...