Sass 技术和相关工具介绍
来源:互联网 发布:网络视听许可 编辑:程序博客网 时间:2024/06/05 18:28
(欢迎访问:http://www.3body.tk/iblog/)
Sass是一个建立在CSS上面的元语言(meta-language),相对于CSS来说,它能够使用更加整洁和结构化的语法来描述文档的样式。Sass提供了一个简单,优雅的CSS语法,同时还实现了很多方便管理样式表的特性。
安装Sass需要的工具
Linux 用户:
sudo apt-get install ruby1.9.1
Sass是使用Ruby实现的,所以你必须安装Ruby环境。
sudo gem install sass
Sass是CSS3的扩展, 增加了嵌套规则,变量,混入,选择器继承等等。
sudo gem install compass
Compass是一个开源CSS生成框架
Windows 用户:
对于windows用户,需要先安装Ruby gem 然后执行下面的命令:
gem install sassgem install compass
MAC 用户:
gem install sassgem install compass
使用compass创建一个工程
cd path/to/where-you-want-your-project
定位到你想创建工程的目录,对于一个自定义的theme来说,一般是 sites/all/themes。
compass create project-name
上面的命令会使用project-name 创建一个文件夹,并将你的工程安装到这个文件夹里。
自动监视并编译compass的改变
cd path/to/projectcompass watch// 或者使用下面的快捷写法compass watch path/to/project
如果想手动编译,执行下面的命令:
compass compile [options]
这个命令的详细参数可以参考:
http://compass-style.org/help/tutorials/command-line/
http://compass-style.org/help/tutorials/production-css/
一些实用的Sass示例
sass中的变量
全部使用同样的颜色和宽度。Sass支持变量并支持对变量做数学运算。
.SCSS Syntax$blue: #3bbfce;$width: 100px;.main{ color: $blue; width: $width;}.footer { width: $width / 2;}
上面的代码会输入下面的css:
.main{ color: #3bbfce; width: 100px;}.footer { width: 50px;}
Sass的嵌套机制
Sass可以对选择子进行嵌套使用,避免重复的定义。对于属性也同样可以使用。
.SCSS Syntax#navigation #main-menu ul { background: #e5e5e5; border: 1px solid #e2e2e2; li { padding: 5px 10px 5px 10px; &:hover { background: #ccc; a { color: #fff; } } a { text-decoration: none; text-shadow: 1px 2px rgb(211, 200, 200); } }}
上面的代码会输入下面的css:
#main-menu ul { background: #e5e5e5; border: 1px solid #e2e2e2;}#navigation #main-menu ul li { padding: 5px 10px 5px 10px;}#navigation #main-menu ul li:hover { background: #ccc;}#navigation #main-menu ul li:hover a { color: #fff;}#navigation #main-menu ul li a { text-decoration: none; text-shadow: 1px 2px #d3c8c8;}
Sass中的混入
混入比变量更加有用,你可以重用整个CSS,属性或者选择子的代码段。甚至可以使用传入参数。
.SCSS Syntax@mixin left($dist) { float: left; margin-left: $dist;}#data { @include left(10px);}
上面的代码会输入下面的css:
#data { float: left; margin-left: 10px;}
翻译自http://drupal.org/node/1913280
- Sass 技术和相关工具介绍
- sass相关介绍
- Lm_sensors和相关技术介绍
- Lm_sensors和相关技术介绍
- Sass Scss Less快速开发工具之Compass和EST介绍
- 相关技术介绍和规范--JSR168
- 相关技术介绍和规范--Portlet
- 相关技术介绍和规范--WSRP
- 开源 SOA 工具的编程技术: Apache Beehive 相关介绍
- OCR技术的典型应用及OCR相关工具介绍
- SASS相关
- less和sass的区别和介绍
- SASS的介绍和应用示例入门
- linux 相关工具介绍
- 多媒体相关技术介绍
- 浏览器相关技术介绍
- HTTP相关技术介绍
- Linux查看磁盘分区等命令和相关工具介绍
- 佳能(中国)风光题材的拍摄效果例和要领介绍。
- 利用webqq协议使用python登录qq发消息
- string转换为char*
- Python日志模块-logging
- BZOJ 2142:礼物(国家队内部测试题,by 魏铭)——组合数取模终极版
- Sass 技术和相关工具介绍
- word目录对齐方法
- Openstack组件介绍
- TCP/IP详解学习笔记(5)-IP选路,动态选路,和一些细节
- ASIHttpRequest-创建和执行request 的 异步加载和使用块
- 简单LRU算法实现的Cache(C++)
- 全排列生成算法 .
- spfile和pfile
- 涉足计算机视觉领域要知道的