码迷,mamicode.com
首页 > 其他好文 > 详细

sass学习总结

时间:2015-07-19 14:49:19      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。个人简单总结了下比较常用的的一些东西。

$ 开头定义变量名 是个全局变量   在{ $name } 局部变量

&代表父级 a{ &:hover{} } a{} a:hover{}

.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组

.a,.b{ a{}}  .a a,.b a{}   群组

.a{ border : { style:solid;width:1px;color:#ccc } }  属性嵌套 ‘:’ 必写

@at-root 在嵌套里标记用的 生成出来css是独立的 跳出嵌套

_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写

$aa:10 !default  !default设置默认值

@mixin 混合器 @include 调用 

布尔值  and(与)\or(或)\not(非)

comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false

unit($numver) 判断 $numver 的单位

unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false

type-of($value) 返回类型 类似于js typeof

@function @return  必须要有返回值 

#{...} 插值

@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 后者循环到5 

@for $i from $strat through $end  开始结束如果是 strat 大就从小到大 反之亦然 

@if 判断条件{}@else{} 判断

@include a($a:10,$b:20) 可以传类似于json的值

sass学习总结

标签:

原文地址:http://www.cnblogs.com/gua-gua/p/4658570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!