SASS相关
2016-11-24 17:59
120 查看
安装ruby和sass
安装ruby:http://rubyinstaller.org/downloads安装sass:gem install sass
或者安装compass(含sass): gem install compass
取版本:sass -v
更新:gem update sass
卸载:gem uninstall sass
编译
命令:// 冒号前面是scss路径,后面需要生成的css路径 sass ---wath style\scss\:style\css\--style compressed
支持中文注释:lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass\engine.rb
在末尾加: Encoding.default_external = Encoding.find(‘utf-8’)
输出风格命令
嵌套输出:–style nested, 最后的大括号不折行
展开输出:–style expanded, 最后的大括号折行
紧凑输出:–style compact, 单行
压缩输出:–style compressed,最大压缩
API
变量的声明和调用
$color: #333; $btn-bg: #ccc; $btn-bg: #e5e5e5 !default; //多用于组件化开发,重新定义变量即覆盖 .btn { border: 1px solid $color; background: $btn-bg; } 变量作用域类似js (选择器、函数、混合宏...的内部定义的变量为全局变量))
嵌套
选择器嵌套’&‘nav { ul { header & { color: blue; } } li { &:hover { font-size: 100px; } &::before , &::after { content: ''; display: table; } &::after{ clear: both; overflow: hidden; } a { display: block; } &.open a { display: inline-block; } } }
‘&’可以前面或者后面 + 选择器
复合属性的嵌套:
border: { top: { color: #ccc; width: 1px; } }
属性嵌套以 ’ : ‘拼接
混合宏
分别有不带参数,带参数和复杂的混合宏:@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }
@mixin border-radius($radius:5px){ //可设置默认值 -webkit-border-radius: $radius; border-radius: $radius; }
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }
继承(@extend)和占位符(%)
a.btn { height: 30px; } .btn-big { @extend .btn; color: #ccc; } //编译后生成 a.btn, a.btn-big { height: 30px; } .btn-big { color: #ccc; }
div%h { height: 30px; } .btn { @extend %h; } .btn-big { @extend %h; color: #ccc; } //编译后生成 div.btn, div.btn-big { height: 30px; } .btn-big { color: #ccc; }
插值#{} 注释 数据类型
插值#{}$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); }
注释
注释‘/../’编译会在CSS文件中显示,‘//’不会显示
数据类型
跟javascript字符类型一样,
SassScript 支持 CSS 的两种字符串类型:
有引号字符串 (quoted strings),如 “Lucida Grande” 、’http://sass-lang.com‘;
无引号字符串 (unquoted strings),如 sans-serifbold。
值列表:margin: 10px 15px 0 0或者: font-face: Helvetica, Arial, sans-serif,可以是空格或者逗号
运算符
‘+ -’:相同单位才能运算;‘*’:只需为一个值提供单位;
‘/’:与乘法差不多,只有以下这些情况才会被当作除法运算符
1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 2. 如果数值被圆括号包围。 3. 如果数值是另一个数学表达式的一部分。
Function相关
if else: @if 条件 {} @else if 条件 {} @else {} 判断符:!= == > < >= <= 逻辑:or and for/while: @for $i from 1 through 3 {} //1~3 @for $i from 1 to 3 {} //1~2 $i: 4; @while $i > 0 { $i: $i - 1; } each: $list: a b c; @each $item in $list {}
length($list) //num --- 取列表长度 index($list, $item) //num|false --- 取元素索引 nth($list, n) //el --- 按索引取元素,n大于length时报错 join($list1, $list2, auto|space|comma) //$newList --- 将两个列表合成一个列表 join( (1 2), (3,4) ) //1 2 3 4 join( (1,2), (3 4) ) //1,2,3,4 join(1, (2 3) ) //1 2 3 join(1, (2,3) ) //1,2,3 join(1,2) //1 2 append($list, $add, auto|space|comma) //$newList--- 将一个元素添加到列表 zip(1px 2px 3px, solid dashed dotted, #333 #666 #999) //--- 转成多维列表 type-of(el) //number|string|bool|color --- 返回数据类型 unit(number) //--- 取数值的单位, 乘除可获得两个单位 unitless(number) //true|false--- 是否不带单位 comparable(number1, number2) //true|false --- 是否可运算 if($condition, $if-true, $if-false) //三元运算
map
$theme-color: ( default:( bgcolor: #fff, text-color: #444, link-color:#39f ), primary:( bgcolor:#000, text-color:#fff, link-color: #93f, ), negative:( bgcolor: #f36, text-color:#fefefe, link-color: #d4e ) );
map-get($map, key) //--- 取出,没有则返回null map-has-key($map, key) //true|false --- 判断$map中是否有指定key值 map-keys($map) //--- 返回keys列表(逗号分隔) map-values($map) //--- 返回values列表(逗号分隔) map-merge($map1, $map2) //$newMap --- map-remove($map, key) //删除指定key返回新map(不能删除map中的map) keywords($args) //--- 根据宏的参数动态创建map(自动去除参数中的$符号)
颜色函数
RGBrgba(#f00, 0.6) //--- 将颜色转成rgba red(#f00) //255 --- 取出R green(#f00) //0 --- 取出G blue(#f00) //0 --- 取出B mix($color-1, $color-2, 50%) //颜色混合
HSL
adjust-hue(-deg|-%) //调整色相 saturate(#ccc, 30%) //增加饱和度 desaturate(#f00, 80%) //降低饱和度 lighten(#000, 30%) //提高明度 darken(#fff, 30%) //降低明度 grayscale(#f00) //转成无彩系,等同于desaturate(#f00, 100%)
opacity
alpha($color) | opacity($color) //--- 取出A fade-in($color, .2) | opacify($color, .2) //--- 与原值进行加法运算 fade-out($color, .2) | transparentize($color, .2) //--- 与原值进行减法运算
@规则
引入scss或sass@import "include/foo.scss|include/foo", "...", "..."; @import "include/";
不想被编译只想被导入,此时的命名方式:_foo.scss
@media
//冒泡 .sidebar { @media screen { width: 300px; } @media screen and (orientation: landscape) { width: 500px; } } //嵌套 @media screen { .sidebar { width: 300px; @media (orientation: landscape) { width: 500px; } } } //使用插值 @media #{$media} and ($feature: $value) { }
@extend
//继承的位置点 .header a.btn:hover i.red { } span { @extend i.red; } //.header a.btn:hover span .header a.btn:hover %child { } span { @extend %child; } //.header a.btn:hover span
@at-root //— 跳出所有嵌套
.a { height: 20px; @at-root .d { height: 30px; } }
@debug 、 @warn 、 @error
相关文章推荐
- Web布局连载——两栏固定布局(五)
- SASS编译
- SASS调试
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的