sass 使用简介
2017-02-25 18:34
141 查看
Sass使用
1. sass-ruby
sass使用ruby编写,必须先安装ruby再安装sass**安装ruby,下载ruby installer for windows,记得next后勾选
gem install sass**
2. 使用
sass test.scss屏幕显示css代码sass test.scss dest.css保存为dest.css
sass –style compressed test.scss dest.css选择compressed编译风格
* nested:嵌套缩进的css代码,它是默认值。 * expanded:没有缩进的、扩展的css代码。 * compact:简洁格式的css代码。 * compressed:压缩后的css代码。
sass –watch test.scss:out.css监听文件
sass –watch app/sass:public/style监听目录
3. 语法
变量开头,blue : #173使用变量要嵌套在字符串中,写在#{}中,border-#{$side}-radius: 5px;
计算
body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }
嵌套
使用 & 引用父元素
//比如a:hover伪类 a { &:hover { color: #ffb3ff; } }
注释
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号!,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息
代码重用
继承:@extend
.class2 { @extend .class1; font-size:120%; }
重用代码块minxin
@mixin left { float: left; margin-left: 10px; } div { @include left; }
可以指定参数和缺省值
//用来生成浏览器前缀 @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }
颜色函数?
插入文件
@import "path/filename.scss";
高级用法
1. 条件 @if @else
@if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }
循环 @for @while @each in
SASS支持for循环:
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持while循环:
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
each命令,作用与for类似:
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
自定义 @function
@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }
转:http://www.ruanyifeng.com/blog/2012/06/sass.html?20131101171639
相关文章推荐
- 简介使用ASP.NET访问Oracle数据库的方法
- linux环境下的"蚂蚁"-wget使用简介
- TreeCellRenderer使用方法简介
- 消息队列(Message Queue)简介及其使用
- SSH简介及配置使用SSH登陆远程主机
- 使用委托数组的一个例子简介一下委托
- 使用 Microsoft Visual C# 2005 Express Edition 编程简介
- .Net服务组件(ServicedComponent)简介及其使用
- DOM4J 使用简介(转)
- AWStats: 跨平台的日志分析工具使用简介
- 简介使用ASP.NET访问Oracle数据库的方法
- [Struts]使用StrutsTestCase对Action进行单元测试简介
- AWStats: Apache/IIS的日志分析工具——在GNU/Linux和Windows平台上的使用简介
- 简介使用ASP.NET访问Oracle数据库的方法
- DOM4J 使用简介
- 域安全通道实用工具nltest.exe的使用简介(下)
- 简介使用ASP.NET访问Oracle数据库的方法
- DOM4J 使用简介[转载]
- 简介使用ASP.NET访问Oracle数据库的方法
- Gmail使用简介