关于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写出来的样式结构,不仅层次分明,意思明确,而且编码量明显减少。
关于SASS--->推荐使用的更多相关文章
- elementUI——主题定制
需求: 设计三套主题色+部分图标更换: 实现方式汇总: 1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/: <link id=& ...
- 移动端SCSS
一.什么是SASS SASS是一种强化CSS的辅助工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单可维护. #二.安装和使用(VS Code中) #1.安装 下载扩展文件 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- 分享15款很实用的 Sass 和 Compass 工具
Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- 推荐15个最好用的 JavaScript 代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- Webstorm功能详解及插件推荐
Web前端开发神器--Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制.本地历史.即时模板等.Webstorm还内置了对 SASS.NodeJS.C ...
- Sass预一:
为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...
- sass编译
sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...
随机推荐
- poj 1004:Financial Management(水题,求平均数)
Financial Management Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 126087 Accepted: ...
- MD5与Base64的思考
MD5加密是对任意长的数据使用MD5哈稀算法散列为4个32位组,若格式化为ASCII字符则为16字符,若格式化16进制表示,则为32字符. (MD5的具体算法请参阅相关书籍和资料) MD5广泛用于数 ...
- 把VSO作为GitHub上JavaScript项目的免费CI服务器
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软变得更加开放后,走向开放的不仅有.NET运行时.IDE工具,还有ALM服务器核心组 ...
- 如何在ASP.NET 5中使用ADO.NET
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:ASP.NET 5是一个全新的平台,在这个平台上也带来一些全新的函数库.不过这并非意味 ...
- A Study of WebRTC Security
转自:http://webrtc-security.github.io/ A Study of WebRTC Security Abstract Web Real-Time Communication ...
- Java学习笔记(五)——数组
一.数组使用方法 1. 声明数组 语法: 数据类型[ ] 数组名: 或者 数据类型 数组名[ ]: 其中,数组名可以是任意合法的变量名 2. 分配空间 简单地说,就是指定数组中最多可存储多少个元素 ...
- loadrunner通过C语言实现自定义字符出现次数截取对应字符串
void lr_custom_string_delim_save(char inputStr[500], char* outputStr, char *delim, int occrNo, int s ...
- .net自动生成数据库表的类
// 获取到所有的用户表.DataTable userTableName = GetTable( "select name as tablename from sysobjects wher ...
- [HTTP那些事]网络请求API
在Android上,原生API有两个,HttpUrlConnection和HttpClient,它们对封装Socket进行封装,让HTTP请求变得简单.这应该也算框架吧? 想象下,如果没有HttpUr ...
- SpringMVC解析1-使用示例
Spring MVC分离了控制器.模型对象.分派器以及处理程序对象的角色,这种分离让它们更容易进行定制.Spring的MVC是基于servlet功能实现的,通过实现Servlet接口的Dispatch ...